12

我的开关按钮的拇指似乎歪斜了(对于开和关状态)。在 github 上也有类似的问题,但这些问题是为人们制作库以支持 API 4.0 中的 Switch 按钮-

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

这是正在发生的事情:

在此处输入图像描述

这就是它的样子:

在此处输入图像描述

switch_track_on.png

在此处输入图像描述

主要的.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> 
4

4 回答 4

21

对于自定义交换机(如 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" />

在此处输入图像描述

它对我来说工作正常。

于 2017-07-15T19:21:57.943 回答
14

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

  1. 开关忽略应用于可绘制拇指形状的任何垂直边距/填充(因此拇指始终触摸轨道的顶部和底部)
  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。

于 2015-06-17T13:23:16.897 回答
1

不知道为什么会发生这种情况,但通过将开关按钮放置在线性布局中来解决它。拇指的某些属性(宽度)必须具有某种必须导致它的“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("   ");
}

主要的.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>

于 2014-03-29T03:00:28.127 回答
0

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

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

于 2019-10-25T18:49:46.193 回答