Switch-Button拇指歪斜了吗？

Question

我的Switch按钮的拇指似乎变得歪斜(开启和关闭状态).在github上也有类似的问题,但那些是人们在API 4.0中使库支持Switch按钮 -

main包含开关按钮,并且有一个拇指和轨道可绘制的应用程序

这就是发生的事情:

这就是它的假设:

switch_track_on.png

main.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> 

Answer 1

我有同样的要求.我检查了Android代码并发现了

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

这使得制作圆形拇指变得非常困难.

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

拇指选择器:

<?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>

我将switch的on和off文本设置为空(实际为""以防止关于空资源的警告).

跟踪:

<?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.

Answer 2

对于自定义开关(像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>

创建一个drawable 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" />

它对我来说很好.

Answer 3

不知道为什么会发生这种情况，但通过将开关按钮放置在线性布局中解决了这个问题。拇指的某些属性（宽度）必须具有某种“match_parent”，这肯定是导致它的原因。

编辑：当我删除默认的“ON”和“OFF”文本时会发生这种情况。因此，为了隐藏文本，我将其颜色更改为白色。 如何更改Android中开关的文本颜色

main.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("   ");
}

主文件

<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>