美文网首页UIAndroid开发牛叉的demo
Android Switch控件模仿ios修改样式 xml

Android Switch控件模仿ios修改样式 xml

作者: kecai | 来源:发表于2017-06-27 14:57 被阅读246次

    安卓中自带的Switch控件在很多时候总觉得和整体系统风格不符,很多时候,自定义Switch是一种方法。但其实不用这么麻烦,安卓自带的Switch通过修改一些属性,也可以达到和自定义Switch差不多的一个效果。个人感觉,Switch的属性设置和其他控件还是有挺大区别的。因此,写下此文,方便有需要的同学参考。
    如图:


    关闭.png 开.png

    实现以上的效果主要分两个步骤:
    第一个就是底部颜色的变化:
    1.关闭时候为白色。
    在 res/drawable 文件夹下面,写两个滑动条的底图 ,通过一个选择器selector进行控制。
    gray_track.xml :非打开状态,白色的底图

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

    <size android:height="30dp" android:width="30dp"/>

    <corners android:radius="20dp"/>
    <gradient
    android:endColor="#ffffff"
    android:startColor="#ffffff" />

    <stroke android:width="2dp"
        android:color="#e3e3e3"/>
    

    </shape>

    打开状态下,灰色的底图。

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

    <size android:height="30dp" android:width="30dp" />

    <corners android:radius="20dp"/>

    <!-- 变化率 -->
    <gradient
        android:endColor="#e3e3e3"
        android:startColor="#e3e3e3" />
    
    <stroke android:width="2dp"
        android:color="#e3e3e3"/>
    

    </shape>
    选择器 track.xml 用于控制Switch不同状态下,滑动条的底图

    <?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/white_track" />
    <item                               android:drawable="@drawable/gray_track" />
    

    </selector>

    第二步:滑动按钮:底色我用的接近白色,关闭,打开时,白色外面夹带灰色,代码是一样。
    白色按钮边上一圈颜色为深灰色:
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <size android:height="30dp" android:width="30dp"/>

    <corners android:radius="20dp"/>

    <gradient
    android:endColor="#ffffff"
    android:startColor="#ffffff" />

    <stroke android:width="2dp"
        android:color="#e3e3e3"/>
    

    </shape>

    选择器 thumb.xml 用于控制Switch不同状态下,按钮的显示状态
    <?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/gray_thumb" />
    <item                               android:drawable="@drawable/white_thumb" />
    

    </selector>

    最后 将以上选择器设置给Switch,就好了

    <Switch
    android:id="@+id/switch_service_chat_info_top"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:track="@drawable/track"
    android:thumb="@drawable/thumb"
    android:checked="false" />

    补充:
    大家在运用时候会发现修改 android:layout_width , android:layout_height 这两个属性,并不会实际修改Switch的大小设置大了,边上会出现空白部分,设置小了,Switch显示不全。

    实际设置高度方法:
    上面定义滑动条和按钮底图的地方相信大家都注意到,
    <size android:height="30dp"/> 这行代码,修改 green_track.xml,gray_track.xml 中的高度,即可修改高度(修改green_thumb.xml gray_thumb.xml 中的高度貌似无效)。

    假如:按钮上有文字的话,修改滑动按钮的宽度:滑动按钮的宽度和按钮上的文字有关,想要按钮变长,在按钮显示的文字上添加几个空字符串即可,想要按钮变短的话,减少按钮上显示的字即可(修改按钮上字体大小也可以试试)

    Switch的属性

        android:textOn="  "
        android:textOff="  "
    

    总结到此结束。。

    相关文章

      网友评论

        本文标题: Android Switch控件模仿ios修改样式 xml

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