[Android UI]基础组件的学习——ToggleButton的使用及样式修改

前阵子忙着校招面试什么的，就放下了学习，罪过罪过。国庆前找到了一份实习，本来想着自己应该可以从UI跳到逻辑了，结果发现大佬问了我一下UI组件，我发现原来有这么多都没用过的，乖乖继续学习好了（给大佬们拖后腿真是很愧疚啊啊啊啊）。

****************************************************************

ToggleButton（切换按钮）是一个用来“开关”的组件，可以设置初始状态，也可以自定义样式。这里先看看这个组件的初始样子（我用的是genymotion模拟器）：

ToggleButton是由Button下的CompoundButton派生出来的，因此很多属性都和Button一致。它自己的属性主要是下面这几个：

android:disabledAlpha：""	//设置按钮在禁用时的透明度
android:textOff：""		//按钮没有被选中时显示的文字
android:textOn：""		//按钮被选中时显示的文字

disabledAlpha目前我还没有用到，但这个属性的取值范围为0到1，默认值为0.5。

textOff和textOn则是按钮上不同状态的文字。当checked属性为true（选中状态）时，togglebutton会显示textOn的文字；当checked属性为false（未选中状态）时，togglebutton会显示textOff的文字。如果不设置textOn和textOff，这两个属性的属性值则默认为On和Off。

另外，ToggleButton还有checked属性设置初始状态是选中还是未选中状态。如果不添加checked属性，则checked默认是false，即未选中状态。

相对应Button的点击事件，ToggleButton也有它的选中事件。以下代码是ToggleButton用来响应监听器，弹出Toast的：

xml布局：

    android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOn="打开"
    android:textOff="关闭"

MainActivity：

public class MainActivity extends AppCompatActivity{
    private ToggleButton tb;
    @Override
    protected void OnCreat(Bundle savedInstanceState){
        super.OnCreat(savedInstanceState);
        setContentView(R.layout.activity_main);
        tb = (ToggleButton)findViewById(R.id.togglebutton);
        tb.setOnCheckedChangeListener(new CompoundButton.OnCheckedListener(){
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){
                if(isChecked){
                    Toast.makeText(MainActivity.this, "it's on now", Toast.LENGTH_SHORT).show();
                }else{
                    Toast.makeText(MainActivity.this, "it's off now", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

来看看这段代码的效果：

当然这个样子的切换状态开关按钮我们看的比较少，一般来说手机上看见的都是这个样子的：

通过自定义样式，我们也可以将ToggleButton变成这个样子。

1.使用图片切换

使用图片切换，通过selector根据状态切换图片，这个不用多说，非常简单。

toggle_drawable_selector：

xml：

来看看效果（第一个togglebutton）：

为了隐藏文字，我用了@null作为属性值设置了textOn和textOff。

这里能看到的是，如果使用图片的话，wrap_content会让这个图片放大失真，而第二个togglebutton则是图片原有大小（使用了图片原有大小设置width和height）。

另外，使用图片只支持切换，而不支持按钮的滑动（毕竟是一体的图片嘛）。

2.自定义可拖动的ToggleButton

可拖动的ToggleButton需要自定义类，重写方法，主要是依靠触碰事件手指滑动的距离进行判断切换。这部分先马克一下，因为Android里可以直接使用switch进行自定义样式完成一个可拖动的切换开关，简单便捷。ToggleButton参考的是这篇博文：

Android UI（ToggleButton）详解

****************************************