的Android定製開關左右可繪

Question

我想創建這樣一個自定義開關：

我想吃什麼我需要的是像左/右在綠色繪製每一/白色狀態，或者可選的綠色輪廓，帶有可供選擇的時間。

我在this這樣的帖子中不明白的地方在於，所有樣本可繪圖都向右傾斜，然而'開'按鈕偏向左側。

我想用下面的'thumb'drawable。

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_checked="true" android:drawable="@drawable/choice_right"/> 
    <item        android:drawable="@drawable/choice_left"/> 
</selector> 

但它似乎削減了可刪除的結束。如果我還設置了這樣的軌道：

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" > 

     <stroke 
      android:width="1dp" 
      android:color="@color/text_input"/> 

     <corners 
      android:radius="1dp" 
      android:bottomLeftRadius="4.5dp" 
      android:bottomRightRadius="4.5dp" 
      android:topLeftRadius="4.5dp" 
      android:topRightRadius="4.5dp" > 
    </corners> 
</shape> 

然後我得到的是一條細線。所以，我不知道接下來要嘗試什麼。

Answer 1

這不能與樣式單獨，這需要自定義視圖實現。這很多的代碼，所以我的建議是使用第三方庫，如 https://github.com/hoang8f/android-segmented-control 這個庫已經過測試和測試，所以它的安全使用它而不是重寫它。

Answer 2

更新答案

要做到這一點，你應該在繪製文件夾中創建層列表

RES /繪製/ toggle_layerlist.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:drawable="@drawable/choice_right"> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <stroke 
     android:width="1dp" 
     android:color="@color/text_input"/> 

    <corners 
     android:radius="1dp" 
     android:bottomLeftRadius="4.5dp" 
     android:bottomRightRadius="4.5dp" 
     android:topLeftRadius="4.5dp" 
     android:topRightRadius="4.5dp" > 
    </corners> 
</shape> 
    </item> 

    </layer-list> 

添加圖層列表，你選擇

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
     <item android:drawable="@drawable/toggle_layerlist" android:state_checked="true" /> 

    </selector> 

使用這種選擇爲背景，但要確保你空文本在開/關狀態

通過設置android:textOff="" android:textOn=""

<ToggleButton 
      android:id="@+id/chkState" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/toggle_selector" 
      android:textOff="" 
      android:textOn=""/> 

兩個單選按鈕做同樣的其他國家

Answer 3

你可以使用RadioGroup中：

<RadioGroup 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:gravity="center_horizontal" 
       android:orientation="horizontal"> 

      <RadioButton 
        android:id="@+id/male_radio_button" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textColor="@drawable/selector_radio_btn_text" 
        android:background="@drawable/selector_radio_btn_left_bg" 
        android:gravity="center" 
        android:button="@null" 
        android:text="@string/male_radio_text" 
        /> 

      <RadioButton 
        android:id="@+id/female_radio_button" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textColor="@drawable/selector_radio_btn_text" 
        android:background="@drawable/selector_radio_btn_right_bg" 
        android:gravity="center" 
        android:button="@null" 
        android:text="@string/female_radio_text"/> 
     </RadioGroup> 

其中selector_radio_btn_text.xml是文字顏色選擇器：

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_checked="true" android:color="@color/checkbox_text_color_checked"/> 
<item android:state_checked="false" android:color="@color/checkbox_text_color"/> 

和selector_radio_btn_left_bg（右BG）的.xml被backgorund左側和右側

Answer 4

我已經創建了一個示例應用程序，你可以找到here應該解決您的問題。您可以查看this庫，該庫有適當的段控制實現。

基本上我創建的帶有默認加入以1:1的weight的2.兩個ButtonsweightSum和一些邏輯被施加到它們之間切換延伸LinearLayout定製控制。在切換時，觸發構建在此界面上的自定義事件。

public interface SwitchToggleListener { 
    void onSwitchToggle(SwitchToggleState switchToggleState); 
} 

我用drawable資源來設計按鈕的樣式。

最後的結果看起來是這樣

Answer 5

而是他使用任何外部libaray或支持庫的這個可以很容易地通過使用RadioGroup中和單選按鈕來完成。正如「迪米特里」在他的回答中提到的，我也用同樣的東西來實現。 這是我回答的複製粘貼的問題給出How to custom switch button?

<RadioGroup 
    android:checkedButton="@+id/offer" 
    android:id="@+id/toggle" 
    android:layout_width="match_parent" 
    android:layout_height="30dp" 
    android:layout_marginBottom="@dimen/margin_medium" 
    android:layout_marginLeft="50dp" 
    android:layout_marginRight="50dp" 
    android:layout_marginTop="@dimen/margin_medium" 
    android:background="@drawable/pink_out_line" 
    android:orientation="horizontal"> 

    <RadioButton 
     android:layout_marginTop="1dp" 
     android:layout_marginBottom="1dp" 
     android:layout_marginLeft="1dp" 
     android:id="@+id/search" 
     android:background="@drawable/toggle_widget_background" 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:button="@null" 
     android:gravity="center" 
     android:text="Search" 
     android:textColor="@color/white" /> 

    <RadioButton 
     android:layout_marginRight="1dp" 
     android:layout_marginTop="1dp" 
     android:layout_marginBottom="1dp" 
     android:id="@+id/offer" 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="@drawable/toggle_widget_background" 
     android:button="@null" 
     android:gravity="center" 
     android:text="Offers" 
     android:textColor="@color/white" /> 
</RadioGroup> 

pink_out_line.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"> 
<corners android:radius="2dp" /> 
<solid android:color="#80000000" /> 
<stroke 
    android:width="1dp" 
    android:color="@color/pink" /> 
</shape> 

toggle_widget_background.xml

 <?xml version="1.0" encoding="UTF-8"   standalone="no"?> 
     <selector  xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@color/pink" android:state_checked="true" /> 
    <item android:drawable="@color/dark_pink" android:state_pressed="true" /> 
    <item android:drawable="@color/transparent" /> 
    </selector>