我期待自定义Switch按钮变成如下：
如何做到这一点？
问问题
146764 次
14 回答
159
但是，我可能没有采用最好的方法，但这就是我Switch在几个应用程序中创建一些类似 UI 的方式。这是代码 -
<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>
这是输出 -
于 2015-10-20T08:46:30.420 回答
38
它是一个简单的 xml 设计。它看起来像 iOS 开关，请检查下图
您需要创建 custom_thumb.xml 和 custom_track.xml
这是我的开关，我需要一个很大的开关，所以添加了 layout_width/layout_height 参数
<androidx.appcompat.widget.SwitchCompat
android:id="@+id/swOnOff"
android:layout_width="@dimen/_200sdp"
android:layout_marginStart="@dimen/_50sdp"
android:layout_marginEnd="@dimen/_50sdp"
android:layout_marginTop="@dimen/_30sdp"
android:layout_gravity="center"
app:showText="true"
android:textSize="@dimen/_20ssp"
android:fontFamily="@font/opensans_bold"
app:track="@drawable/custom_track"
android:thumb="@drawable/custom_thumb"
android:layout_height="@dimen/_120sdp"/>
现在创建 custom_thumb.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:shape="oval">
<solid android:color="#ffffff"/>
<size android:width="@dimen/_100sdp"
android:height="@dimen/_100sdp"/>
<stroke android:width="1dp"
android:color="#8c8c8c"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="oval">
<solid android:color="#ffffff"/>
<size android:width="@dimen/_100sdp"
android:height="@dimen/_100sdp"/>
<stroke android:width="1dp"
android:color="#34c759"/>
</shape>
</item>
</selector>
现在创建 custom_track.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:shape="rectangle">
<corners android:radius="@dimen/_100sdp" />
<solid android:color="#ffffff" />
<stroke android:color="#8c8c8c" android:width="1dp"/>
<size android:height="20dp" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<corners android:radius="@dimen/_100sdp" />
<solid android:color="#34c759" />
<stroke android:color="#8c8c8c" android:width="1dp"/>
<size android:height="20dp" />
</shape>
</item>
</selector>
于 2019-11-16T11:26:02.350 回答
25
您可以使用以下代码更改颜色和文本：
<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 文件夹中创建一个名为 colors.xml 的 xml：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="red">#ff0000</color>
<color name="green">#00ff00</color>
</resources>
在 drawable 文件夹中，创建一个 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>
并在定义切换按钮的 xml 部分中添加：
android:background="@drawable/my_btn_toggle
改变颜色textOn和textOff使用
android:switchTextAppearance="@style/Switch"
于 2014-04-29T08:23:51.093 回答
21
<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.paths 可绘制对象，它们必须具有不同的密度（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
于 2014-08-20T16:15:31.580 回答
16
我做到了
通过做：
1）自定义选择器：
<?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"/>
于 2017-09-27T08:03:12.563 回答
15
我使用这种方法使用RadioGroupand创建自定义开关RadioButton；
预习
颜色资源
<color name="blue">#FF005a9c</color>
<color name="lightBlue">#ff6691c4</color>
<color name="lighterBlue">#ffcdd8ec</color>
<color name="controlBackground">#ffffffff</color>
control_switch_color_selector（在 res/color 文件夹中）
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:color="@color/controlBackground"
/>
<item
android:state_pressed="true"
android:color="@color/controlBackground"
/>
<item
android:color="@color/blue"
/>
</selector>
可绘制对象
control_switch_background_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="@android:color/transparent" />
<stroke
android:width="3dp"
android:color="@color/blue" />
</shape>
control_switch_background_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape>
<solid android:color="@color/blue"></solid>
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="@color/lighterBlue"></solid>
</shape>
</item>
<item>
<shape>
<solid android:color="@android:color/transparent"></solid>
</shape>
</item>
</selector>
control_switch_background_selector_middle.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape>
<solid android:color="@color/blue"></solid>
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="@color/lighterBlue"></solid>
</shape>
</item>
<item>
<layer-list>
<item android:top="-1dp" android:bottom="-1dp" android:left="-1dp">
<shape>
<solid android:color="@android:color/transparent"></solid>
<stroke android:width="1dp" android:color="@color/blue"></stroke>
</shape>
</item>
</layer-list>
</item>
</selector>
布局
<RadioGroup
android:checkedButton="@+id/calm"
android:id="@+id/toggle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp"
android:layout_marginTop="24dp"
android:background="@drawable/control_switch_background_border"
android:orientation="horizontal">
<RadioButton
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:id="@+id/calm"
android:background="@drawable/control_switch_background_selector_middle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="Calm"
android:fontFamily="sans-serif-medium"
android:textColor="@color/control_switch_color_selector"/>
<RadioButton
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:id="@+id/rumor"
android:background="@drawable/control_switch_background_selector_middle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="Rumor"
android:fontFamily="sans-serif-medium"
android:textColor="@color/control_switch_color_selector"/>
<RadioButton
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:id="@+id/outbreak"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/control_switch_background_selector"
android:button="@null"
android:gravity="center"
android:text="Outbreak"
android:fontFamily="sans-serif-medium"
android:textColor="@color/control_switch_color_selector" />
</RadioGroup>
于 2018-02-06T10:11:19.783 回答
6
您可以使用 Android 材质组件。
构建.gradle：
implementation 'com.google.android.material:material:1.0.0'
布局.xml：
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:checkedButton="@id/btn_one_way"
app:singleSelection="true">
<Button
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:id="@+id/btn_one_way"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="One way trip" />
<Button
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:id="@+id/btn_round"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Round trip" />
</com.google.android.material.button.MaterialButtonToggleGroup>
于 2020-04-06T08:13:00.797 回答
5
您可以使用常规的 Switch 小部件，只需调用setTextOn()and setTextOff()，或使用android:textOnandandroid:textOff属性。
于 2014-04-29T07:57:50.367 回答
1
有两种方法可以创建自定义 ToggleButton
1) 通过定义自定义背景 2) 通过创建自定义按钮
检查http://www.zoftino.com/android-toggle-button以获取自定义样式
具有自定义背景的切换按钮
将drawable定义为如下的xml资源并将其设置为切换按钮的背景。在下面的示例中，drawable toggle_color 是一个颜色选择器，您还需要定义它。
<?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>
带有自定义按钮的切换按钮
为切换按钮的两种状态创建自己的图像（确保所有尺寸的屏幕都存在图像）并将它们放在可绘制文件夹中，创建选择器并将其设置为按钮。
<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>
于 2017-09-17T04:38:39.203 回答
1
有关此链接的更多信息：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>
于 2017-07-05T11:10:55.357 回答
1
转变
<androidx.appcompat.widget.SwitchCompat
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
app:track="@drawable/track"
android:thumb="@drawable/thumb"
android:id="@+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
拇指.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="@drawable/switch_thumb_false"/>
<item android:state_checked="true"
android:drawable="@drawable/switch_thumb_true"/>
</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:shape="rectangle">
<size android:width="24dp" android:height="12dp" />
<solid android:color="#EFE0BB" />
<corners android:radius="6dp" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<size android:width="24dp" android:height="12dp" />
<solid android:color="@color/colorPrimary" />
<corners android:radius="6dp" />
</shape>
</item>
</selector>
switch_thumb_true.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#EFE0BB" />
<size
android:width="10dp"
android:height="10dp" />
<stroke
android:width="2dp"
android:color="@color/colorPrimary" />
</shape>
</item>
</layer-list>
switch_thumb_false.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="oval">
<solid android:color="@color/colorPrimary"/>
<size android:height="12dp"
android:width="12dp"/>
<stroke android:color="#EFE0BB"
android:width="2dp"/>
</shape>
</item>
</layer-list>
于 2020-10-16T12:25:36.967 回答
0
使用材料组件库，您可以使用MaterialButtonToggleGroup：
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:checkedButton="@id/b1"
app:selectionRequired="true"
app:singleSelection="true">
<Button
style="?attr/materialButtonOutlinedStyle"
android:id="@+id/b1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="OPT1" />
<Button
style="?attr/materialButtonOutlinedStyle"
android:id="@+id/b2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="OPT2" />
</com.google.android.material.button.MaterialButtonToggleGroup>
于 2020-10-10T12:02:04.617 回答
0
使用下面的代码创建一个自定义开关按钮，如下所示。
<androidx.appcompat.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/customSwitch"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:checked="false"
app:track="@drawable/track"
android:thumb="@drawable/thumb"
android:text="" />
@drawable/轨道
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#FF3333"/>
<corners android:radius="100sp"/>
<stroke android:color="#8e8e8e"
android:width="1dp"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="@color/color_green"/> <!--color name="color_green">#3bd391</color-->
<corners android:radius="100sp"/>
</shape>
</item>
</selector>
@drawable/拇指
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="@drawable/switch_thumb_false"/>
<item android:state_checked="true"
android:drawable="@drawable/switch_thumb_true"/>
</selector>
@drawable/switch_thumb_false
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="4dp"
android:top="4dp"
android:left="4dp"
android:right="4dp">
<shape android:shape="oval">
<solid android:color="#FFFFFF"/>
<size android:height="3dp"
android:width="3dp"/>
</shape>
</item>
<item android:drawable="@drawable/ic_baseline_close_16"
android:bottom="8dp"
android:top="8dp"
android:left="8dp"
android:right="8dp"/>
</layer-list>
@drawable/switch_thumb_true
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="4dp"
android:top="4dp"
android:left="4dp"
android:right="4dp">
<shape android:shape="oval">
<solid android:color="#FFFFFF"/>
<size android:height="3dp"
android:width="3dp"/>
<stroke android:width="1sp"
android:color="#8e8e8e" />
</shape>
</item>
<item android:drawable="@drawable/ic_baseline_correct_16"
android:bottom="8dp"
android:top="8dp"
android:left="8dp"
android:right="8dp"
/>
</layer-list>
@drawable/ic_baseline_correct_16
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="#008F28"
android:alpha="0.9">
<path
android:fillColor="#FF000000"
android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z"/>
</vector>
@drawable/ic_baseline_close_16
<vector
android:height="16dp"
android:tint="#FF0000"
android:viewportHeight="24"
android:viewportWidth="24"
android:width="16dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
</vector>
于 2022-02-27T05:56:25.140 回答
0
<Switch
android:thumb="@drawable/thumb"
android:track="@drawable/track"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
于 2019-03-28T11:36:58.653 回答