如何自定义切换button？

我正在寻找自定义Switchbutton成为如下：

如何做到这一点？

Answer 1

你可以使用下面的代码来改变颜色和文字 ：

 <org.jraf.android.backport.switchwidget.Switch android:id="@+id/th" android:layout_width="match_parent" android:layout_height="wrap_content" app:thumb="@drawable/apptheme_switch_inner_holo_light" app:track="@drawable/apptheme_switch_track_holo_light" app:textOn="@string/switch_yes" app:textOff="@string/switch_no" android:textColor="#000000" /> 

在res / values文件夹中创build一个名为colors.xml的xml：

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="red">#ff0000</color> <color name="green">#00ff00</color> </resources> 

在drawable文件夹中，创build一个xml文件my_btn_toggle.xml：

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

在定义切换button的xml部分中添加：

 android:background="@drawable/my_btn_toggle 

改变textOn和textOff使用的颜色

 android:switchTextAppearance="@style/Switch" 

Answer 2

然而，这可能不是最好的方式，但我采取了不同的方式来解决我所有的开关相关的问题。 这是我的代码 –

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

这里是输出 –

Answer 3

 <Switch android:layout_width="wrap_content" android:layout_height="wrap_content" android:thumb="@drawable/custom_switch_inner_holo_light" android:track="@drawable/custom_switch_track_holo_light" android:textOn="@string/yes" android:textOff="@string/no"/> 

绘制/ custom_switch_inner_holo_light.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:drawable="@drawable/custom_switch_thumb_disabled_holo_light" /> <item android:state_pressed="true" android:drawable="@drawable/custom_switch_thumb_pressed_holo_light" /> <item android:state_checked="true" android:drawable="@drawable/custom_switch_thumb_activated_holo_light" /> <item android:drawable="@drawable/custom_switch_thumb_holo_light" /> </selector> 

绘制/ custom_switch_track_holo_light.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:drawable="@drawable/custom_switch_bg_focused_holo_light" /> <item android:drawable="@drawable/custom_switch_bg_holo_light" /> </selector> 

下一个图像是9.path可绘制的，它们必须是不同的密度（mdpi，hdpi，xhdpi，xxhdpi）。 举个例子，我给xxhdpi（你可以调整它们，如果你需要的话）：

绘制/ custom_switch_thumb_disabled_holo_light

绘制/ custom_switch_thumb_pressed_holo_light

绘制/ custom_switch_thumb_activated_holo_light

绘制/ custom_switch_thumb_holo_light

绘制/ custom_switch_bg_focused_holo_light

绘制/ custom_switch_bg_holo_light

Answer 4

您可以使用常规的Switch小部件，只需调用setTextOn()和setTextOff() ，或者使用android:textOn和android:textOff属性。

Answer 5

我做到了

通过做：

1）自定义select器：

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

2）使用v7 SwitchCompat

 <android.support.v7.widget.SwitchCompat android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" android:button="@drawable/checkbox_yura" android:thumb="@null" app:track="@null"/> 

Answer 6

有关此链接的更多信息： http : //www.mokasocial.com/2011/07/sexily-styled-toggle-buttons-for-android/

 <ToggleButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/toggle_me"/> 

而drawable将会是这样的：

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/toggle_me_on" /> <!-- checked --> <item android:drawable="@drawable/toggle_me_off" /> <!-- default/unchecked --> </selector> 

Answer 7

有两种方法来创build自定义ToggleButton

1）通过定义自定义背景2）通过创build自定义button

检查自定义样式http://www.zoftino.com/android-toggle-button

切换button与自定义背景

将drawable定义为如下所示的xml资源，并将其设置为切换button的背景。 在下面的例子中，可绘制的toggle_color是一个颜色select器，你也需要定义这个。

 <?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="4dp" android:insetTop="4dp" android:insetRight="4dp" android:insetBottom="4dp"> <layer-list android:paddingMode="stack"> <item> <ripple android:color="?attr/android:colorControlHighlight"> <item> <shape android:shape="rectangle" android:tint="?attr/android:colorButtonNormal"> <corners android:radius="8dp"/> <solid android:color="@android:color/white" /> <padding android:left="8dp" android:top="6dp" android:right="8dp" android:bottom="6dp" /> </shape> </item> </ripple> </item> <item android:gravity="left|fill_vertical"> <shape android:shape="rectangle"> <corners android:radius="4dp"/> <size android:width="8dp" /> <solid android:color="@color/toggle_color" /> </shape> </item> <item android:gravity="right|fill_vertical"> <shape android:shape="rectangle"> <corners android:radius="4dp"/> <size android:width="8dp" /> <solid android:color="@color/toggle_color" /> </shape> </item> </layer-list> </inset> 

用自定义button切换button

为两种切换button创build自己的图像（确保所有尺寸的图像都存在图像），并将它们放置在可绘制的文件夹中，创buildselect器并将其设置为button。

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