Android Switch开关自定义

先不废话,上图

可以自定义滑块 和背景哦~

 

未选中

已选中

2、开始进入代码环节

Java部分,监听和调用

 

mToolSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(isChecked){
                   showShortToast("选中");
                }else {
                    showShortToast("没选中");
                }
            }
        });

3、switch控件属性介绍

 

android:showText:设置on/off的时候是否显示文字,boolean
android:splitTrack:是否设置一个间隙,让滑块与底部图片分隔,boolean
android:switchMinWidth:设置开关的最小宽度
android:switchPadding:设置滑块内文字的间隔
android:switchTextAppearance:设置开关的文字外观,暂时没发现有什么用...
android:textOff:按钮没有被选中时显示的文字
android:textOn:按钮被选中时显示的文字
android:textStyle:文字风格,粗体,斜体写划线那些
android:track:底部的图片
android:thumb:滑块的图片
android:typeface:设置字体

4、进入正题 xml部分代码编写如下

 

<Switch
                    android:id="@+id/tool_switch"
                    android:textColor="@color/fsk_subtitle_black"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:track="@drawable/switch_selector_green"
                    android:thumb="@drawable/switch_white_circle_selector"
                    android:text="开关"
                    />

5、样式编写代码如下

 

switch_selector_green 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/switch_bg_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/switch_bg_normal" android:state_checked="false"/>

</selector>


switch_bg_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <solid android:color="@color/fsk_green"/>
    <size  android:width="40dp"
           android:height="24dp"/>
    <corners android:radius="20dp"/>

</shape>

switch_bg_normal
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <solid android:color="@color/fsk_base_bg"/>
    <size  android:width="40dp"
           android:height="24dp"/>
    <corners android:radius="20dp"/>

</shape>

switch_white_circle_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/switch_white_circle_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/switch_white_circle_normal" android:state_checked="false"/>

</selector>

switch_white_circle_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <stroke android:width="1dp" android:color="@color/fsk_green"/>
    <solid android:color="@color/white"/>
    <size  android:width="24dp"
           android:height="24dp"/>

</shape>

switch_white_circle_normal
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <stroke android:width="1dp" android:color="@color/fsk_base_bg"/>
    <solid android:color="@color/white"/>
    <size  android:width="24dp"
           android:height="24dp"/>

</shape>

样式搞定 ,当然了 要是shape实现不了,就用图片咯!



作者:CharlesCheng
链接:https://www.jianshu.com/p/d00c995f8f8e
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值