UI控件之开关按钮（ToggleButton与Switch）

简介

    ToggleButton是状态开关按钮，而Switch是开关，我想说的是，看着ToggleButton的外貌就是气，也太难看了。相比较之下，我觉得Switch还是一个美男子。不说闲话了，这两者的原始外观如下：

    布局一般都是采用XML布局，减少代码冗余，干净整洁，真是极好的，它们两个布局几乎一模一样。主要在于要注意设置两个属性： android:textOn 和 android:textOff 当处于checke状态的时候，显示android:textOn=“@String/”的文字，反之处于checke状态的时候，显示android:textOff=“@String/”的文字。

XML的简单实现

ToggleButton

    <ToggleButton
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textOff="不可见"
        android:textOn="可见" />

Switch

        <Switch
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textOff="不可见"
        android:textOn="可见" />

Switch和ToggleButton自定义

     注意，我这里并没有对Switch和ToggleButton进行重写，只是对Switch和ToggleButton进行了属性的定义。但是对Switch的定义效果不理想，但是好在ToggleButton实现了预设的效果。


     在对Switch进行自定义的时候，我采用了下列两种方法。
     第一种是：google提供的android:track 和 android:thumb但是我实现的过程中，效果极其不理想，首先是两个图形的间距不好设置，大小设置也坑爹，居然使用thumb图像与文字间的距离来设置。也就是用android:thumbTextPadding进行设置。补充一下，android:track就是按钮移动的路径，android:thumb就是那个的移动按钮，难以自定义达到效果，坑爹啊！
    第二种方法是：使用Switch的background属性来设置，但是Switch自带的图像十分影响美观！
     利用ToggleButton实现的时候，效果还不错，但是有点生硬。
    后来，我看见一篇博客通过重写View的方式实现了Switch开关功能的效果，同时过度是很流畅的，不会显得生硬：http://blog.csdn.net/singwhatiwanna/article/details/9254309 ，不过存在Bug，适当改进，效果应该可以很赞！说了那么多，还没看见图片，想是哪怕我说破了嘴，也没什么用吧！
看下面的GIF图片吧！

贴代码

    由于，我没有在JAVA代码进行对按钮的控制，只是简单的使用了setcontentView进行显示而已！只贴XML代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Switch
        android:id="@+id/switcher"
        android:layout_width="330dip"
        android:layout_height="120dip"
        android:layout_gravity="center"
        android:layout_marginTop="10dip"
        android:textOff=""
        android:textOn=""
        android:textSize="45sp"
        android:thumb="@drawable/thumb"
        android:thumbTextPadding="70dip"
        android:track="@drawable/track" />


    <Switch
        android:id="@+id/switcherr"
        android:layout_width="330dip"
        android:layout_height="120dip"
        android:layout_gravity="center"
        android:layout_marginTop="10dip"
        android:background="@android:color/transparent"
        android:button="@drawable/def"
        android:textSize="45sp" />


    <ToggleButton
        android:layout_width="330dip"
        android:layout_height="120dip"
        android:layout_gravity="center"
        android:layout_marginTop="10dip"
        android:background="@android:color/transparent"
        android:button="@drawable/def"
        android:textOff=""
        android:textOn=""
        android:textSize="45sp" />



    <com.example.toggletest.SlideSwitch
        android:layout_width="330dip"
        android:layout_height="120dip"
        android:layout_gravity="center"
        android:layout_marginTop="30dip" />

LinearLayout>

点击下载源码

总结

    就效果来说，还是任玉刚博主的效果好一点，将bug去掉就很好了（有空一定研究研究），但是ToggleButton实现起来很简单。不过效果生硬了点！ 鱼与熊掌不可兼得啊！

——————————————————————————————-

欢迎转载，尊重作者劳动成果，转载请务必注明出处
技术因分享而饱含生机

——————————————————————————————-