Android 滑动按钮(开关) SwitchCompat 自定义风格

原生的SwitchCompat控件如下图，不说不堪入目，也算是不敢恭维了。开个打趣...

所以我们就必要对SwitchCompat进行自定义风格，效果如下图

代码如下

1.     <androidx.appcompat.widget.SwitchCompat
2.         android:id="@+id/switch_compat"
3.         android:layout_width="wrap_content"
4.         android:layout_height="wrap_content"
5.         android:thumb="@drawable/switch_thumb"
6.         app:switchMinWidth="60dp"
7.         app:track="@drawable/switch_track_style" />

复制代码

从上面的xml代码来看其实只必要定制两个东西一个是thumb，另一个是track
switch_thumb

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:shape="oval">
4.     <solid android:color="@color/white" />
5.     <size
6.         android:width="50dp"
7.         android:height="50dp" />
8.     <!-- 这里的5dp边距的作用是，圆点在轨道里面的边距，这样的效果感觉更好 -->
9.     <stroke
10.         android:width="5dp"
11.         android:color="#00000000" />
12.     <corners android:radius="15dp" />
13. </shape>

复制代码

switch_track_style

1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3.     <item android:drawable="@drawable/switch_common_track_selected" android:state_checked="true" />
4.     <item android:drawable="@drawable/switch_common_track_unselected" android:state_checked="false" />
5. </selector>

复制代码

switch_track_style内里有两个背景如下
switch_common_track_selected

1. <?xml version="1.0" encoding="utf-8"?>
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3.     <item >
4.         <shape android:shape="rectangle">
5.             <solid android:color="#23c3ff" />
6.             <size android:height="30dp" />
7.             <stroke
8.                 android:color="#00000000" />
9.             <corners android:radius="30dp" />
10.         </shape>
11.     </item>
12. </layer-list>

复制代码

switch_common_track_unselected

1. <?xml version="1.0" encoding="utf-8"?>
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3.     <item>
4.         <shape android:shape="rectangle">
5.             <solid android:color="#4D8E8E8E" />
6.             <size android:height="30dp" />
7.             <stroke
8.                 android:color="#00000000" />
9.             <corners android:radius="30dp" />
10.         </shape>
11.     </item>
12. </layer-list>

复制代码

完活了！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。