美文网首页
android switch样式

android switch样式

作者: happyhou | 来源:发表于2020-09-08 15:45 被阅读0次
    WechatIMG1462.png

    中间白色的原点是thumb,黄色的背景是track。


                <Switch
                        android:id="@+id/ai_setting_camera_switch"
                        android:layout_width="50dp"
                        android:layout_height="wrap_content"
                        android:background="@null"
                        android:checked="true"
                        android:showText="false"
                        android:thumb="@drawable/ai_thumb_selector"
                        android:track="@drawable/ai_track_selector"
                        />
    

    ai_thumb_selector:

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

    ai_thumb_on:

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

    ai_thumb_off:

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

    ai_track_selector:

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

    ai_track_blue:

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

    ai_track_gray:

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

    相关文章

      网友评论

          本文标题:android switch样式

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