【问题标题】:Switch-Button thumb gets skewed?开关按钮拇指歪斜?
【发布时间】:2014-03-29 02:52:39
【问题描述】:

我的开关按钮的拇指似乎歪斜了(对于开&关状态)。 github上也有类似的问题,但是那些是为了让库支持API 4.0中的开关按钮的人-

main 包含开关按钮,并有一个拇指和轨道可绘制应用到它

这是正在发生的事情:

这就是它的样子:

switch_track_on.png

ma​​in.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<Switch
    android:id="@+id/switch1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="112dp"
    android:thumb="@drawable/switch_thumb_selector"
    android:track="@drawable/switch_track_selector"
    android:textOn=""
    android:textOff=""/>

</RelativeLayout>

switch_thumb_selector.xml

<selector>
<item android:drawable="@drawable/switch_thumb">
</item>
</selector>

switch_track_selector.xml

    <selector>
<item android:drawable="@drawable/switch_track_on" android:state_checked="true"/>
<item android:drawable="@drawable/switch_track_off" android:state_checked="false"/>
</selector> 

【问题讨论】:

    标签: android xml android-switch


    【解决方案1】:

    对于自定义开关(如IOS开关)我尝试了以下步骤:

    创建一个可绘制的track_selector.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true">
            <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
                <solid android:color="#ca120f" />
                <corners android:radius="25dp" />
                <size android:width="2dp" android:height="18dp" />
            </shape>
        </item>
        <item android:state_checked="false">
            <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
                <solid android:color="#27170432" />
                <corners android:radius="25dp" />
                <size android:width="2dp" android:height="18dp" />
            </shape>
        </item>
    </selector>
    

    创建一个可绘制的thumb_selector.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="false">
            <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
                <solid android:color="#ffffff" />
                <corners android:radius="100dp" />
                <size android:width="24dp" android:height="25dp" />
                <stroke android:width="4dp" android:color="#0000ffff" />
            </shape>
        </item>
    </selector>
    

    在你的布局中:

    <Switch
        android:id="@+id/checkboxAttendanceSelector"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:thumb="@drawable/thumb_selector"
        app:track="@drawable/track_selector" />
    

    它对我来说很好用。

    【讨论】:

    【解决方案2】:

    我也有同样的要求。我检查了Android代码,发现

    1. switch 忽略应用到可绘制拇指形状的任何垂直边距/填充(因此拇指始终接触轨道的顶部和底部)
    2. 拇指的宽度是通过使用水平填充 + 开启和关闭文本的最大宽度来计算的。

    这使得制作圆形拇指真的很困难。

    但是,如果您将拇指可绘制对象指定为可绘制图层的唯一原因是能够为可绘制对象的单层指定填充,则可以获得所需的效果。

    拇指选择器:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <!--
            NOTE
            We want a thumb with padding around it inside the track.
            Sadly, a switch draws its track and thumb with the same height ignoring
            any padding of the drawable, so using a shape with padding does not work.
            To overcome, we apply a trick. We create layer list because the
            LayerListDrawable draws itself with taking the top, left, right, bottom
            values into account.
            -->
            <layer-list>
                <item
                    android:top="@dimen/switch_thumb_padding"
                    android:left="@dimen/switch_thumb_padding"
                    android:right="@dimen/switch_thumb_padding"
                    android:bottom="@dimen/switch_thumb_padding">
                    <!--
                    NOTE
                    No need to specify size because:
                      - The thumb fills the track in height.
                      - The thumb width is determined from thumb max(on, off) text +
                        text padding + drawable padding.
                    -->
                    <shape android:shape="oval">
                        <solid android:color="@color/switch_thumb"/>
                        <!-- NOTE did not work, had to set Switch's thumbTextPadding to the radius -->
                        <!--
                        <padding android:right="@dimen/switch_thumb_radius"
                                 android:left="@dimen/switch_thumb_radius"/>
                        -->
                    </shape>
                </item>
            </layer-list>
        </item>
    </selector>
    

    我将开关的开关文本设置为空(实际上设置为“”以防止出现有关空资源的警告)。

    曲目:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false">
            <shape android:shape="rectangle">
                <size android:height="@dimen/switch_track_height"/>
                <corners android:radius="@dimen/switch_thumb_radius"/>
                <solid android:color="@color/switch_track_off"/>
            </shape>
        </item>
        <item android:state_checked="true">
            <shape android:shape="rectangle">
                <size android:height="@dimen/switch_track_height"/>
                <corners android:radius="@dimen/switch_thumb_radius"/>
                <solid android:color="@color/switch_track_on"/>
            </shape>
        </item>
    </selector>
    

    切换风格:

    <style name="CustomSwitch">
        <!-- NOTE this way the switch will be as width as required minimally -->
        <item name="android:switchMinWidth">0dp</item>
        <item name="android:track">@drawable/switch_track</item>
        <item name="android:thumb">@drawable/switch_thumb</item>
        <item name="android:textOff">@string/switch_thumb_off</item>
        <item name="android:textOn">@string/switch_thumb_on</item>
        <!-- NOTE if set to 0dp, the thumb was not visible even with padding
                  of the thumb drawable set to -->
        <item name="android:thumbTextPadding">@dimen/switch_thumb_radius</item>-->
        <!--<item name="android:thumbTextPadding">0dp</item>-->
    </style>
    

    最后是尺寸:

    <dimen name="switch_track_height">30dp</dimen>
    <dimen name="switch_thumb_radius">15dp</dimen>
    <dimen name="switch_thumb_padding">2dp</dimen>
    

    所以唯一“棘手”的事情是保持高度 = 半径 * 2。

    【讨论】:

    • 我通过将 textColor 设置为圆形的任何颜色来解决它,并将开关放在 LinearLayout 中,检查我上面的答案。但是谢谢:)
    • @summers - 如果您将颜色设置为白色,我猜它不会是圆形的。根据文本长度,它将呈椭圆形。但是 zsolt 解决方案是完美的解决方案。
    • 这个解决方案效果很好!谢谢你:)
    【解决方案3】:

    不知道为什么会发生这种情况,但通过将开关按钮放置在线性布局中解决了它。 拇指的某些属性(宽度)必须具有某种必须导致它的“match_parent”。

    编辑:当我删除默认的“ON”和“OFF”文本时会发生这种情况。因此,为了隐藏文本,我将其颜色更改为白色。 How to change textcolor of switch in Android

    ma​​in.java

    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.toggle_button);
    
        Switch sw = (Switch) findViewById(R.id.switch1);
    
                //Both of these need to be used to change the text color to white
                sw.setTextColor(Color.WHITE);
        sw.setSwitchTextAppearance(this, Color.WHITE);
    
                //Doing this would skew the circle
                //sw.setTextOn("  ");
        //sw.setTextOff("   ");
    }
    

    ma​​in.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp" >
    
        <Switch
            android:id="@+id/switch1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:thumb="@drawable/switch_thumb_selector"
            android:track="@drawable/switch_track_selector" />
    </LinearLayout>
    

    【讨论】:

      【解决方案4】:

      如果您不能使用其他答案,您始终可以水平拉伸图形本身(即“switch_thumb.png”)。

      如果您使用用于设计图形的原始软件并在拉伸后将其重新导出,则不应导致图像模糊。您必须注意自己的尺寸,但从 +30% 的拉伸开始应该会让您接近。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-07-24
        • 2012-12-04
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-08-04
        • 1970-01-01
        相关资源
        最近更新 更多