android 快速实现 Switch 样式

需要自定义6个文件

1.滑块开启: switch_thumb_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#3171D1" />
    <size
        android:width="30dp"
        android:height="30dp" />
</shape>

2.滑块关闭: switch_thumb_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#CACACA" />
    <size
        android:width="30dp"
        android:height="30dp" />
</shape>

3.滑块selector:switch_thumb_selector.xml

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

4.滑块管道开启:switch_track_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#94D2EE" />
    <!-- 设置stroke透明可以让滑块管道变小点 -->
    <stroke
        android:width="5dp"
        android:color="@android:color/transparent" />
    <!-- 设置corners 圆角15dp对应滑块的size=30dp的一半(显示为半圆) -->
    <corners android:radius="15dp" />
</shape>

5.滑块管道关闭:switch_track_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#F5F0F0" />
    <!-- 设置stroke透明可以让滑块管道变小点 -->
    <stroke
        android:width="5dp"
        android:color="@android:color/transparent" />
    <!-- 设置corners 圆角15dp对应滑块的size=30dp的一半(显示为半圆) -->
    <corners android:radius="15dp" />
</shape>

6.滑块管道selector:

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

7.布局使用:

 <Switch
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:track="@drawable/switch_track_selector"
     android:thumb="@drawable/switch_thumb_selector"/>

相关推荐

  1. android 快速实现 Switch 样式

    2024-03-16 10:00:05       22 阅读
  2. android 快速实现 recyclerview 的所有item 都执行动画

    2024-03-16 10:00:05       21 阅读
  3. android 快速实现 图片获取并裁剪(更换头像)

    2024-03-16 10:00:05       21 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-16 10:00:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-16 10:00:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-16 10:00:05       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-16 10:00:05       20 阅读

热门阅读

  1. 完美十进制数——去年天梯校赛

    2024-03-16 10:00:05       21 阅读
  2. python面试题

    2024-03-16 10:00:05       20 阅读
  3. 独立服务器的优势

    2024-03-16 10:00:05       18 阅读
  4. 每天学习一个Linux命令之ssh

    2024-03-16 10:00:05       21 阅读
  5. 泰勒级数、海森矩阵、雅可比矩阵

    2024-03-16 10:00:05       21 阅读
  6. Docker详解:如何创建运行Memcached的Docker容器

    2024-03-16 10:00:05       18 阅读
  7. ChatGPT有身体了?

    2024-03-16 10:00:05       21 阅读
  8. C++:[NWRRC2015] Concatenation(洛谷)P7050

    2024-03-16 10:00:05       20 阅读
  9. Linux下新增有root权限的用户

    2024-03-16 10:00:05       16 阅读
  10. vue2 / vue3 路由(返回&跳转)时判断 + 取消跳转

    2024-03-16 10:00:05       19 阅读
  11. 力扣_动态规划3—地下城游戏

    2024-03-16 10:00:05       19 阅读