Question

我的开关按钮的拇指似乎变得歪斜（对于开启和关闭状态）。在github上也存在类似的问题，但那些是人们在API 4.0中支持Switch按钮的人 -

main包含开关按钮，并且有一个拇指和轨道可绘制

这就是发生的事情：

enter image description here

这就是它的假设：

enter image description here

switch_track_on.png

enter image description here

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代码，发现

开关忽略应用于拇指形状可绘制的任何垂直边距/填充（因此拇指始终触及轨道的顶部和底部）
通过取水平填充+开启和关闭文本的最大宽度来计算拇指的宽度。

这很难制作一个圆圈拇指。

但是，如果您将拇指绘制指定为可绘制图层，唯一的原因是能够为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>

我将开关的开启和关闭文本设置为空（实际上是＆＃34;＆＃34;以防止关于空资源的警告）。

磁道：

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

所以唯一＆＃39;棘手的＆＃39;事情是保持身高=半径* 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>

创建一个可绘制的 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

不知道为什么会发生这种情况，但是通过将Switch按钮放在linearLayout中来解决它。必须有一些拇指的（宽度）具有某种必然导致它的“match_parent”。

编辑：删除默认的“开启”和“关闭”文字时会发生这种情况。因此，要隐藏文本，我将其颜色更改为白色。 How to change textcolor of switch in 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("   ");
}

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

Answer 4

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

如果使用用于设计图形的原始软件并在拉伸后将其重新导出，则不会造成图像模糊。您必须对尺寸有所关注，但是从+ 30％的拉伸开始，您应该会接近。

Switch-Button拇指歪斜了吗？

4 个答案: