開關按鈕拇指偏斜？

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

它對我的工作很好。