安卓开关自定义左右图标

Question

我正在尝试创建一个自定义开关，就像这样：

我觉得我需要的是左右各有一个绿色/白色状态的绘图，或者一个绿色轮廓和一个用于选择时的可绘制对象。

在像这个帖子中，我不明白为什么所有提供的示例可绘制对象都向右倾斜，而“打开”按钮却向左倾斜。

我正在尝试使用以下“拇指”可绘制对象。

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

然后我只能得到一条细线。所以，我不确定接下来该尝试什么。

- Mike T

Answer 1

仅凭样式无法实现此功能，需要进行自定义视图实现。因此，我的建议是使用第三方库，例如https://github.com/hoang8f/android-segmented-control。

这个库经过了试用和测试，因此可以放心使用，而不必进行重写。

- Rajesh Batth

---

也许答案是这不是一个特别针对Android的设计，需要改变设计以更符合Android的UI元素。 - Mike T

这个设计源于iOS，但新的SwitchCompat小部件看起来和这个小部件一样好看和简单，所以试试吧。 - Rajesh Batth

Answer 2

我创建了一个范例应用程序，你可以在这里找到，它应该可以解决你的问题。你可以查看这个库，它有一个适当的分段控制器实现。

基本上，我创建了一个自定义控件，它扩展了默认weightSum为2的LinearLayout。添加了两个带有weight为1的Button，并应用一些逻辑来在它们之间切换。在切换时，会触发一个自定义事件，该事件是在此接口上构建的。

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

我使用了drawable资源来为按钮添加样式。

最终效果如下图所示：

- the-ginger-geek

Answer 3

您可以使用带有两个RadioButton的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（右侧背景）.xml 是左侧和右侧的背景。

- Dmitry Ognev

Answer 4

不需要使用任何外部库或支持库，只需使用RadioGroup和radio buttons即可轻松完成。正如"Dimitry"在他的答案中提到的那样，我也使用了同样的方法来实现。 以下是我对问题如何自定义开关按钮？的回答的复制粘贴。

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

- Sanjeet A

Answer 5

更新答案

要做到这一点，您应该在drawable文件夹中创建一个图层列表(layer-list)

res/drawable/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=""/>

对其他状态执行相同的操作

- Mina Fawzy