Android 切换自定义左右可绘制对象
Android switch custom left-right drawables
我正在尝试创建这样的自定义开关：
我觉得我需要的是一个 left/right 可绘制对象，每个都处于 green/white 状态，或者一个带有可绘制对象的绿色轮廓，以便在选择时使用。
我在 this 等帖子中不明白的是，所有示例可绘制对象如何向右倾斜，而 'on' 按钮却向左倾斜。
我正在尝试使用以下 'thumb' 可绘制对象。
<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>
然后我得到的只是一条细线。所以，我不确定接下来要尝试什么。
这不能单独使用样式，这需要自定义视图实现。那是很多代码，所以我对你的建议是使用 3rd 方库，比如
https://github.com/hoang8f/android-segmented-control
这个库已经过试用和测试，因此可以安全地使用它而不是重写它。
更新答案
为此，您应该在可绘制文件夹中创建图层列表
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>
使用此选择器作为背景，但确保在 on/off 状态
中清空文本
由集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=""/>
对其他州做同样的事情
您可以将 RadioGroup 与两个 RadioButton 一起使用：
<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(right bg).xml是左右两侧的背景
我已经创建了一个示例应用程序，您可以找到 here that should solve your problem. You can have a look at this 库，该库具有正确的段控制实现。
基本上我创建了一个扩展 LinearLayout 的自定义控件，默认 weightSum 为 2。两个 Buttons 添加了一个 weight 1，一些逻辑是应用于它们之间的切换。切换时会触发一个基于此界面构建的自定义事件。
public interface SwitchToggleListener {
void onSwitchToggle(SwitchToggleState switchToggleState);
}
我使用 drawable 资源来设置按钮的样式。
最终结果是这样的
这可以通过使用 RadioGroup 和单选按钮轻松完成，而不是使用任何外部 libaray 或支持库。正如 "Dimitry " 在他的回答中提到的那样，我也使用了同样的方法来实现。
这是我对问题 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>
我正在尝试创建这样的自定义开关：
我觉得我需要的是一个 left/right 可绘制对象，每个都处于 green/white 状态，或者一个带有可绘制对象的绿色轮廓，以便在选择时使用。
我在 this 等帖子中不明白的是，所有示例可绘制对象如何向右倾斜，而 'on' 按钮却向左倾斜。
我正在尝试使用以下 'thumb' 可绘制对象。
<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>
然后我得到的只是一条细线。所以，我不确定接下来要尝试什么。
这不能单独使用样式，这需要自定义视图实现。那是很多代码，所以我对你的建议是使用 3rd 方库，比如 https://github.com/hoang8f/android-segmented-control 这个库已经过试用和测试，因此可以安全地使用它而不是重写它。
更新答案
为此，您应该在可绘制文件夹中创建图层列表
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>
使用此选择器作为背景，但确保在 on/off 状态
中清空文本由集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=""/>
对其他州做同样的事情
您可以将 RadioGroup 与两个 RadioButton 一起使用：
<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(right bg).xml是左右两侧的背景
我已经创建了一个示例应用程序，您可以找到 here that should solve your problem. You can have a look at this 库，该库具有正确的段控制实现。
基本上我创建了一个扩展 LinearLayout 的自定义控件，默认 weightSum 为 2。两个 Buttons 添加了一个 weight 1，一些逻辑是应用于它们之间的切换。切换时会触发一个基于此界面构建的自定义事件。
public interface SwitchToggleListener {
void onSwitchToggle(SwitchToggleState switchToggleState);
}
我使用 drawable 资源来设置按钮的样式。
最终结果是这样的
这可以通过使用 RadioGroup 和单选按钮轻松完成，而不是使用任何外部 libaray 或支持库。正如 "Dimitry " 在他的回答中提到的那样，我也使用了同样的方法来实现。 这是我对问题 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>