美文网首页
Android中的Switch控件样式设置

Android中的Switch控件样式设置

作者: townof1997 | 来源:发表于2020-01-19 15:27 被阅读0次

    首先添加控件:

    <Switch
        android:id="@+id/sw_sfktmmzf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="15dp"
        android:showText="false"
        android:switchMinWidth="50dp"
        android:thumb="@drawable/thumb"
        android:track="@drawable/track" />
    

    以下是该控件的常用属性:
    textOn:控件打开时显示的文字
    textOff:控件关闭时显示的文字
    thumb:控件开关的图片(设置小圆圈颜色)
    track:控件开关的轨迹图片(设置小圆圈背景颜色)
    typeface:设置字体类型
    switchMinWidth:开关最小宽
    switchPadding:设置开关 与文字的空白距离
    switchTextAppearance:设置文本的风格
    checked:设置初始选中状态
    splitTrack:是否设置一个间隙,让滑块与底部图片分隔(API 21及以上)
    showText:设置是否显示开关上的文字(API 21及以上)
    创建北京控制文件在drawable文件下
    1、thumb.xml
    <?xml version="1.0" encoding="utf-8"?>

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

    颜色文件:
    green_thumb.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <!-- 高度40 -->
        <size android:height="@dimen/switch_height" android:width="@dimen/switch_height"/>
        <!-- 圆角弧度 20 -->
    <corners android:radius="20dp"/>
    <!-- 变化率 -->
        <gradient
            android:endColor="#eeeeee"
            android:startColor="#eeeeee" />
    <stroke android:width="1dp"
            android:color="@color/home_text1"/>
    </shape>
    

    gray_thumb.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <!-- 高度40 -->
        <size android:height="@dimen/switch_height" android:width="@dimen/switch_height"/>
        <!-- 圆角弧度 20 -->
    <corners android:radius="20dp"/>
    <!-- 变化率 -->
        <gradient
            android:endColor="#eeeeee"
            android:startColor="#eeeeee" />
        <stroke android:width="1dp"
            android:color="@color/text_color03"/>
    </shape>
    

    2、track.xml
    <?xml version="1.0" encoding="utf-8"?>

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

    颜色文件:green_track.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <!-- 高度40 -->
        <size android:height="@dimen/switch_height"/>
        <!-- 圆角弧度 20 -->
        <corners android:radius="15dp"/>
        <!-- 变化率 -->
        <gradient
            android:endColor="@color/home_text1"
            android:startColor="@color/home_text1" />
    </shape>
    

    gray_track.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <!-- 高度30  此处设置宽度无效-->
        <size android:height="@dimen/switch_height" />
        <!-- 圆角弧度 15 -->
        <corners android:radius="15dp" />
        <!-- 变化率  定义从左到右的颜色不变 -->
        <gradient
            android:endColor="@color/text_color03"
            android:startColor="@color/text_color03" />
    </shape>
    

    switch 控件监听事件:

     aSwitch.setOnCheckedChangeListener(newCompoundButton.OnCheckedChangeListener() {
          @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            //控制开关字体颜色
            if(isChecked) {
             //打开
            }else{
             //关闭
            }
          }
        });
    

    相关文章

      网友评论

          本文标题:Android中的Switch控件样式设置

          本文链接:https://www.haomeiwen.com/subject/obmrzctx.html