开关按钮拇指偏斜？

Question

我的开关按钮的拇指似乎偏斜（关于&关闭状态）。有在github上类似的问题，但这些都是为人民作出的库，以支持API 4.0〜

主开关按钮包含了开关按钮，并有一个拇指和跟踪绘制应用到它

这是发生了什么事：

这是它如何猜想loook：

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

不知道为什么发生这种情况，但通过放置一个的LinearLayout内的开关按钮解决了这个问题。 必须有一些具有某种“match_parent”的拇指的拇指（宽度），一定是它造成的。

编辑：它发生在我删除默认的'ON'和'OFF'文本。所以为了隐藏文字，我把它的颜色改成了白色。 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 2

我有同样的要求。余检查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.

Answer 3

Fo [R 自定义开关（像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" 
    android:track="@drawable/track_selector" /> 

它对我的工作很好。