Android UI 常用控件讲解

前言

Android系统提供了种类繁多的控件，很多的用法都很简单。但是由于控件的多样性，偶尔也容易忘记控件的一些细节问题。因此，本文将总结、讲解一些常用控件的用法和技巧。本文的内容包括：CheckBox、RadioButton、ToggleButton、Switch、ProgressBar、SeekBar、RatingBar、Spinner、ImageButton。

CheckBox

基本用法

XML代码：

<CheckBox
    android:id="@+id/checkbox_normal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="是否选中"/>

设置监听器：

normalCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked){
            Toast.makeText(getActivity(),"选中："+buttonView.getText().toString(),
                    Toast.LENGTH_SHORT).show();
        }else{
            Toast.makeText(getActivity(),"取消选中",Toast.LENGTH_SHORT).show();
        }
    }
});

自定义样式

首先，我们应该准备两张图片，并放入相应的drawable文件夹中。这两张图片分别对应CheckBox未选中时和选中时的外观。在本例中，分别是ic_check_box.png和ic_check_box_outline_blank.png。

然后，在drawable文件夹下新建一个selector资源，本例中命名为check_box_drawable.xml，XML代码如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态 -->
    <item android:state_checked="true"
        android:drawable="@drawable/ic_check_box"/>
    <!-- 未选中状态 -->
    <item android:state_checked="false"
        android:drawable="@drawable/ic_check_box_outline_blank"/>
    <!--默认状态-->
    <item android:drawable="@drawable/ic_check_box_outline_blank"/>
</selector>

接着，在styles.xml文件中增加一个style，代码如下：

<!-- 自定义CheckBox的样式 -->
<style name="MyCheckBoxStyle" parent="@android:style/Widget.CompoundButton.CheckBox">
    <item name="android:button">@drawable/check_box_drawable</item>
</style>

最后，设置CheckBox的style属性，就可以成功应用自定义风格了，代码如下：

<CheckBox
    android:id="@+id/checkbox_style"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/MyCheckBoxStyle"
    android:text="是否选中"/>

效果截图：

RadioButton

一般而言，RadioButton需要配合RadioGroup共同使用。同一个RadioGroup中的RadioButton只能被选中一个，这也就实现了单选的功能。

基本用法

XML代码：

<RadioGroup
    android:id="@+id/radio_group_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:checkedButton="@id/radio_button_apple">
    <RadioButton
        android:id="@+id/radio_button_apple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="苹果"/>
    <RadioButton
        android:id="@+id/radio_button_banana"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="香蕉"/>
</RadioGroup>

RadioGroup继承自LinearLayout，因此可以通过orientation属性设置布局方式（横向/纵向）。此外，通过RadioGroup的checkedButton属性可以设置默认选中的RadioButton。

设置监听：

normalRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId){
  //checkedId是触发这一方法的RadioButton的Id属性
            case R.id.radio_button_apple:
                //do something
                break;
            case R.id.radio_button_banana:
                //do something
                break;
                default:break;
        }
    }
});

注意，应该为RadioGroup设置监听，而不是为RadioButton设置监听。

RadioGroup的常用方法

//获取被选中的RadioButton的Id属性
public int getCheckedRadioButtonId();

//清除RadioButton的选中状态
public void clearCheck();

//选中指定Id的RadioButton
public void check(int id)；

注意，clearCheck也会触发OnCheckedChangeListener#onCheckedChanged方法，因此执行相关逻辑的时候应该判断相应Id的RadioButton是否是选中状态。

自定义样式

RadioButton自定义样式的方法和CheckBox相同，同样遵循以下4步：

1. 准备两张图片分别作为RadioButton选中/未选中时的外观，并放入相应drawable文件夹中。
2. 在drawable文件下新建selector资源，并为选中/未选中状态配置相应的图片。
3. 在styles.xml文件中新增style，并使用第二步中新建的selector资源作为android:button属性的值。
4. 在XML文件中设置RadioButton的style属性，使用第三步中新增的自定义风格。

效果截图：

ToggleButton

ToggleButton是多状态按钮，具有开/关两个状态，可以在任意API版本中使用，和Switch相比外观要丑一点。

基本用法

XML代码：

<ToggleButton
    android:id="@+id/toggle_button_normal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOn="开启状态"
    android:textOff="关闭状态"
    android:checked="true"/>

关键属性：

android:textOn：处于开启状态时显示的文字
android:textOff：处于关闭状态时显示的文字
android:checked：是否处于开启状态
android:disabledAlpha：控件不可用时的透明度

设置监听：

normalToggleBtn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked){
            Toast.makeText(getActivity(),"当前为开启状态",Toast.LENGTH_SHORT).show();
        }else{
            Toast.makeText(getActivity(),"当前为关闭状态",Toast.LENGTH_SHORT).show();
        }
    }
});

自定义样式

首先，我们应该准备两张图片，并放入相应的drawable文件夹中。这两张图片分别对应ToggleButton开启时和未开启时的外观。在本例中，分别是ic_toggle_on.png和ic_toggle_off.png。

然后，在drawable文件夹下新建一个selector资源，本例中命名为toggle_button_drawable.xml，XML代码如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 开启状态 -->
    <item android:state_checked="true"
        android:drawable="@drawable/ic_toggle_on"/>
    <!-- 关闭状态 -->
    <item android:state_checked="false"
        android:drawable="@drawable/ic_toggle_off"/>
    <!-- 默认状态 -->
    <item android:drawable="@drawable/ic_toggle_off"/>
</selector>

最后，设置ToggleButton的button、background、textOn和textOff属性，代码如下：