Switch与ToggleButton

来源：互联网发布：2016淘宝助理手机版编辑：程序博客网时间：2024/06/07 06:25

1 基本用法

   final Switch switch_ = (Switch) findViewById(R.id.switch_);        //设置开关图标上文本的样式        switch_.setSwitchTextAppearance(this,R.style.switch_style);        //设置开关的最小宽度        switch_.setSwitchMinWidth(50);        //设置标题与文本之间的空白        switch_.setSwitchPadding(10);        switch_.setText("off");     //        switch_.setTextOn("");                //设置监听        switch_.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {                if (isChecked){                    switch_.setText("open");                    Toast.makeText(ToggleSwitchActivity.this, "open", Toast.LENGTH_SHORT).show();                }else {                    switch_.setText("off");                    Toast.makeText(ToggleSwitchActivity.this, "off", Toast.LENGTH_SHORT).show();                }            }        });

2 样式修改

（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" >        <!-- 高度30   此处设置宽度无效-->      <size android:height="30dp"/>      <!-- 圆角弧度 15 -->      <corners android:radius="15dp"/>          <!-- 变化率  定义从左到右的颜色不变 -->      <gradient          android:endColor="#888888"          android:startColor="#888888" />    </shape>

green_track.xml：打开状态下，绿色的底图。

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

选择器 track.xml 用于控制Switch不同状态下，滑动条的底图

<?xml version="1.0" encoding="utf-8"?>  <!-- 底层下滑条的样式选择器，可控制Switch在不同状态下，底下下滑条的颜色 -->  <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" >      <!-- 高度40 -->      <size android:height="40dp" android:width="40dp"/>      <!-- 圆角弧度 20 -->      <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" >        <!-- 高度40 -->      <size android:height="40dp" android:width="40dp"/>      <!-- 圆角弧度 20 -->      <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 -->      <Switch           android:layout_width="wrap_content"          android:layout_height="wrap_content"          />    </LinearLayout>

当然也可以动态设置：

 //使用自定义Drawable绘制开关按钮        switch_.setThumbDrawable(getResources().getDrawable(R.drawable.thumb));        //使用自定义Drawable绘制开关轨道        switch_.setTrackDrawable(getResources().getDrawable(R.drawable.track));

3 高度，宽度的设置

细心的同学会发现，修改 android:layout_width ， android:layout_height 这两个属性，并不会实际修改Switch的大小

设置大了，边上会出现空白部分，设置小了，Switch显示不全。

实际设置高度方法：

上面定义滑动条和按钮底图的地方相信大家都注意到， <size android:height="30dp"/> 这行代码，

修改 green_track.xml,gray_track.xml 中的高度，即可修改高度（修改green_thumb.xml gray_thumb.xml 中的高度貌似无效）。

实际修改宽度的方法：

（1）修改滑动按钮的宽度：滑动按钮的宽度和按钮上的文字有关，

想要按钮变长，在按钮显示的文字上添加几个空字符串即可，想要按钮变短的话，减少按钮上显示的字即可（修改按钮上字体大小也可以试试）

Switch的属性

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

（2）修改按钮打开，关闭两种状态之间滑动距离（貌似小到一定程度，再改小就无效了）

Switch的属性

android:switchMinWidth="20dp"

完整示例源码点击查看。

参考：http://blog.csdn.net/qq_34763699/article/details/54954394

阅读全文

0 0