Android Switch 控件修改样式
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:height="30dp"/>
<corners android:radius="15dp"/>
<gradient
android:endColor="#33da33"
android:startColor="#33da33" />
</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/green_track" />
<item ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? android:drawable="@drawable/gray_track" />
</selector>
2. 滑动按钮:底色我用的接近白色的淡灰色,打开时,边上的一圈线条为灰色,关闭时,边上的一圈线条为绿色
实现方式和底部滑动一致
gray_thumb.xml ?:关闭状态,按钮边上一圈颜色为深灰色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size android:height="40dp" android:width="40dp"/>
<corners android:radius="20dp"/>
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="#666666"/>
</shape>
green_thumb.xml : 打开状态,按钮边上一圈的颜色为绿色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size android:height="40dp" android:width="40dp"/>
<corners android:radius="20dp"/>
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="#33da33"/>
</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/green_thumb" />
<item ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? android:drawable="@drawable/gray_thumb" />
</selector>
3. 将以上选择器设置给 Switch,就好了
界面 ?activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Switch
android:layout_width="wrap_content"
android:layout_height="
wrap_content"
android:switchMinWidth="20dp"
android:textOn=" ?"
android:textOff=" ?"
android:thumb="@drawable/thumb"
android:track="@drawable/track" />
<Switch?
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
4.高度,宽度的设置
细心的同学会发现,修改 ?android:layout_width ?,?android:layout_height ?这两个属性,并不会实际修改 Switch 的大小
设置大了,边上会出现空白部分,设置小了,Switch 显示不全。
实际设置高度方法:
上面定义滑动条和按钮底图的地方相信大家都注意到, ??<size android:height="30dp"/> ?这行代码,
修改 ?green_track.xml,gray_track.xml ?中的高度,即可修改高度(修改 green_thumb.xml ?gray_thumb.xml ?中的高度貌似无效)。
实际修改宽度的方法:
评论