【从零到一】Android UI界面（二） | 简单控件篇

---

  上一篇：Android UI界面（一） | 布局篇

  通过上篇文章对布局的介绍，我们已经对布局的使用有了基本的认识，那么有了布局，哪能没有控件呢？这篇文章就来讲讲Android中常用的简单控件，包括：

1. TextView（文本框）
2. EditView（可输入文本框）
3. AutoCompleteTextView（自动匹配内容的文本框）
4. MutiAutoCompleteTextView（支持多次自动匹配内容的文本框）
5. ImageView（图片）
6. Button（按钮）
7. ImageButton（图片按钮）
8. ToggleButton（多状态按钮）
9. CHeckBox（复选框）
10. RadioButton（单选按钮）

---

1. TextView（文本框）

  每种控件都有自己特有的属性，但也有共同的属性。在讲控件之前，我们先来讲下这3个共有属性：

• android:id：控件的ID，在其他地方可以通过ID找到该控件，格式为android:id="@+id/ 控件ID "；
• android:layout_width：控件的宽度，值可以是wrap_content（包裹控件的宽）、match_parent（充满父控件的宽）这两个常用值，也可以是自定义的值，单位为dp；
• android:layout_height：控件的高度，值同 android:layout_width；

  介绍完3个共有属性，可以开始讲 TextView 了，TextView是文本框，用来存放文本信息，我们创建布局时会默认创建一个包含“Hello World!”文本框的布局。

  “Hello World!”其实是android:text 属性中的内容，我们可以随意更改，接下来我们来看看 TextView 的常用属性：

• android:text：文本内容，我们可以直接写入文本内容，也可以将具体文本内容放到res/value/strings中，通过 @string/name 来引用（推荐使用后者）；
• android:textSize：文本内容的字体大小，单位为sp；
• android:textColor：文本内容的字体颜色，可以是 #开头+6位数字，也可以是在res/value/colors中指定的颜色，通过 @color/name 来引用；
• android:background：控件的背景色，这个属性很多控件也会有，可以用颜色也可以用图片（图片当背景时会被拉伸）；

  让我们来看一个综合案例：

    <TextView
        android:id="@+id/Tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textView"//文本内容
        android:textSize="20dp"//字体大小
        android:textColor="#ff8800"//字体颜色：橙色
        android:background="#666666"//背景色：灰色
        //以下是约束布局的一些属性，用来控制控件的位置
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

  这个控件长这样：

---

2. EditView（可输入文本框）

  EditView是可输入的文本框，属于特殊的TextView，不仅拥有TextView所有的属性，还有两个特别的属性：

• android:hint：提示文本内容，用于提示此处应输入什么内容。在用户点击文本框要输入内容时，提示文本内容会消失（android:text 属性的文本内容则不会消失）；
• android:inputType：限定输入内容的类型，保证在特定情况下输入格式的正确性；

  综合案例（在上面的TextView的基础上）：

    <EditText
        android:id="@+id/et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="提示文本内容"
        android:inputType="number"
        android:layout_marginTop="28dp"
        app:layout_constraintEnd_toEndOf="@+id/tv"
        app:layout_constraintStart_toStartOf="@+id/tv"
        app:layout_constraintTop_toBottomOf="@+id/tv" />

  这个控件长这样：

---

3. AutoCompleteTextView（自动匹配内容的文本框）

  AutoCompleteTextView是特殊的EditView，特殊下哪呢？用过搜索引擎吧，就跟搜索引擎一样，当你输入内容时，会自动提示相关内容，android:completionThreshold 指设置输入多少字符时提示内容，那么提示的内容怎么来的呢？这里我们需要用到一个 适配器（Adapter） 来绑定数据源，再把适配器给到AutoCompleteTextView控件。

  代码如下：

activity_main.xml

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:hint="自动匹配内容文本框"
        android:completionThreshold="2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.502"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et" />

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private AutoCompleteTextView autoCompleteTextView;//定义autoCompleteTextView对象
    private ArrayAdapter<String> arrayAdapter;//定义适配器

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        autoCompleteTextView = findViewById(R.id.autoCompleteTextView);//对象绑定布局控件
        String data[] = {"auto","autoComplete","autoCompleteTextView"};//定义data数据源
        arrayAdapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,data);//适配器绑定数据源
        autoCompleteTextView.setAdapter(arrayAdapter);//控件绑定适配器

    }
}

  效果如下（为了界面美观，将之前的布局做了修改）：

---

4. MutiAutoCompleteTextView（支持多次自动匹配内容的文本框）

  MutiAutoCompleteTextView的用法跟上面的AutoCompleteTextView差不多，不过通过 setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer()) 可以实现多次匹配，每次匹配之间用逗号隔开。

  代码如下（跟上面的AutoCompleteTextView共用一个适配器）：

public class MainActivity extends AppCompatActivity {

    private AutoCompleteTextView autoCompleteTextView;
	private MultiAutoCompleteTextView multiAutoCompleteTextView;//定义multiAutoCompleteTextView对象
    private ArrayAdapter<String> arrayAdapter;//定义适配器


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        autoCompleteTextView = findViewById(R.id.autoCompleteTextView);
        multiAutoCompleteTextView = findViewById(R.id.multiAutoCompleteTextView);
        String data[] = {"auto","autoComplete","autoCompleteTextView"};
        arrayAdapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,data);
        autoCompleteTextView.setAdapter(arrayAdapter);
        multiAutoCompleteTextView.setAdapter(arrayAdapter);//控件绑定适配器
        multiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());//多次匹配时以逗号分隔符隔开
        
    }
}

  效果如下：

---

5. ImageView（图片）

  ImageView是用来显示图片的，通过android:src指定需要显示的图片，也可以通过android：background指定背景图的方式指定图片。

  代码如下：

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/multiAutoCompleteTextView"
        />

  效果如下：

---

6. Button（按钮）

  Button拥有 android:text 属性，用于显示文本信息（与下一个控件ImageButton做对比）。从Button控件开始，将引入 监听器 这个概念，监听器用来捕捉用户动作并做出响应。每种控件有属于该类控件的监听器，比如Button控件的监听器为OnClickListener，如何给Button控件装上监听器呢？只需要通过setOnClickListener()方法，传入一个OnClickListener对象即可，实现方式分为3种（其他监听器同理）：

1. 匿名内部类（在括号内new一个匿名监听器对象并直接重写onClick()方法）

public class ButtonActivity extends AppCompatActivity {
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        button = findViewById(R.id.button);

        //第1种方式：匿名内部类
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //点击按钮触发的操作
            }
        });
    }
}

2. 监听接口（ 继承 View.OnClickListener 并重写 onClick() 方法 ）

public class ButtonActivity extends AppCompatActivity implements View.OnClickListener{
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        button = findViewById(R.id.button);

        //第2种方式：继承 View.OnClickListener 并重写 onClick() 方法
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.button:
                //点击按钮触发的操作
                break;
            default:
                break;
        }
    }
}

3. 独立类（在外部初始化一个监听器对象）

public class ButtonActivity extends AppCompatActivity {
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        button = findViewById(R.id.button);
        
        //第3种方式：独立类
        View.OnClickListener onClickListener = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //点击按钮触发的操作
            }
        };
        button.setOnClickListener(onClickListener);
    }
}

  实例（通过Toast展示效果）：

public class ButtonActivity extends AppCompatActivity implements View.OnClickListener{
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        
        button = findViewById(R.id.button);
        //2.继承 View.OnClickListener 并重写 onClick() 方法
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.button:
                Toast.makeText(ButtonActivity.this,"Button",Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
}

  效果：

---

7. ImageButton（图片按钮）

  ImageButton没有android:text属性，但有android:src属性，用于显示图片。此外，ImageButton的监听器跟Button相同，都是OnClickListener，用法相同。

  此处展示两种按钮的对比：

---

8. ToggleButton（多状态按钮）

  ToggleButton是开关按钮，具有两种状态，好比手机里自带的手电筒的开和关。特有的属性包括：

• android:checked：表示按钮的当前状态
• android:textOn：选中时的文本内容
• android:textOff：未选中时的文本内容

  ToggleButton的监听器是 OnCheckedChangeListener ，选中时会触发onCheckedChanged实现并返回布尔类型参数ischecked，有了这个参数就可以做更多的操作，如以下例子：

        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                //更改toggleButtonh状态
                toggleButton.setChecked(isChecked);
                //更改ImageView图片
                imageView.setBackgroundResource(isChecked?R.drawable.smile:R.drawable.sad);
            }
        });

  前后效果如下：

---

9. CheckBox（复选框）

  CheckBox有两种状态（选中和未选中），属性跟上面的ToggleButton差不多，也有 android:checked 属性，它的监听器也是 OnCheckedChangeListener 。
  简单实例：

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:checked="true"
        android:text="CheckBox1"
        app:layout_constraintBottom_toTopOf="@+id/checkBox2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleButton" />

    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="CheckBox2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkBox" />

  效果：

---

10. RadioButton（单选按钮）

  RadioButton是单选按钮，也存在两个状态（选中和未选中），一般包裹在RadioGroup控件中，监听器也是OnCheckedChangeListener。因为是单选按钮，所以同一个RadioGroup中的RadioButton不能同时被选中（注意：已选中的单选按钮不能通过再次点击来取消选中，只能通过点击其他单选按钮来取消） 。

activity_button.xml

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="20dp"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkBox2">

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton1"
            android:checked="true"
            tools:layout_editor_absoluteX="27dp"
            tools:layout_editor_absoluteY="384dp" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton2"
            tools:layout_editor_absoluteX="27dp"
            tools:layout_editor_absoluteY="384dp" />
    </RadioGroup>

    <RadioButton
        android:id="@+id/radioButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RadioButton3"
        app:layout_constraintStart_toStartOf="@+id/radioGroup"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup" />
    </RadioGroup>

ButtonActivity.java

		...
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.radioButton:
                        Toast.makeText(ButtonActivity.this,"radioButton1",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.radioButton2:
                        Toast.makeText(ButtonActivity.this,"radioButton2",Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });
        radioButton3.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked){
                    Toast.makeText(ButtonActivity.this,"radioButton3",Toast.LENGTH_SHORT).show();
                }
            }
        });
        ...

  效果：

---

  至此，我们认识了10个简单控件，接下来的文章会介绍其他高级控件，谢谢阅读。

  GitHub项目地址：SimpleWidget