UI组件：TextView及其子类

TextView的功能与用法

• TextView直接继承了View,它还是EditView,Button两个UI组件的父类。
• TextView与EditView有很多相似之处，他们之间的最大区别是EditView允许用户编辑编辑文本内容，而TextView不允许。
• TextView提供了大量的XML属性，这些属性不仅适用于TextView，TextView的子类也同时适用。

TextView的XML属性

下面列举了TextView一些常用的XML属性及相关方法的说明：

CheckedTextView的功能与用法

TextView派生出了一个CheckedTextView，CheckTextView增加了一个checked状态。

通过setChecked(boolean)和isChecked()方法来改变、访问该组件的checked状态。
通过setCheckMarkDrawable()方法来设置它的勾选图标。

TextView和 CheckedTextView的基本实例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.textviewinfo.MainActivity">

    <!--设置字体大小为20sp,文本框右边绘制图片,文本内间距为10dp-->
   <TextView
       android:id="@+id/text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:padding="10dp"
       android:textSize="20sp"
       android:drawableRight="@drawable/picture"
       android:text="文本结尾绘制一张图片"/>
    <!--设置文本行数为1，文本结尾省略显示-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lines="1"
        android:ellipsize="end"
        android:text="长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本"/>
    <!--对邮件、电话添加链接-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:autoLink="email|phone"
        android:text="邮件是kongyeeku@163.com,电话是16839323939"/>
    <!--设置文本颜色，大小，上边距为10dp,并使用阴影-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:shadowColor="#3F51B5"
        android:shadowDx="10.0"
        android:shadowDy="8.0"
        android:shadowRadius="3.0"
        android:text="带有阴影的文字"/>
    <!--测试密码框-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:inputType="textPassword"
        android:text="hello"/>
    <CheckedTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:checkMark="@drawable/ok"
        android:text="可勾选的文本"/>
</LinearLayout>

效果图如下所示：

EditText的功能与用法

EditView继承自TextView，可以使用TextView的相关XML属性。
EditText组件最重要的属性是inputType，用来为EditText指定类型的输入组件。

EditText的实例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--当文本可选择时，聚焦时所有的文本被选择-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="聚焦时所有的文本被选择"
        android:selectAllOnFocus="true"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="数字输入框"/>
    <!--只能输入数字的密码框-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="数字密码输入框"
        android:inputType="numberPassword"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="密码输入框"
        android:inputType="textPassword"/>
    <!--能输入年月日-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="日期输入框"
        android:inputType="date"/>
    <!--能输入年月日和小时分秒-->  
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="时间日期输入框"
        android:inputType="datetime"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="电话号码输入框"
        android:inputType="phone"/>
</LinearLayout>

android:hint 指定文本的提示信息。
当焦点定位到相应的输入框，系统切换到相应的输入法。如点击数字密码输入框，系统会切换到数字输入法。

Button的功能与用法

1. Button继承自TextView，它主要是在UI界面上生成一个按钮，可添加点击事件。
2. 可为Button添加android:background属性为按钮添加背景颜色或图片。
3. 可使用自定义的Drawable对象，可以使按钮背景颜色或者图片随用户动作动态改变。

Button的实例

下面设置了普通按钮和使用了Drawable对象的按钮。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
     <!--普通文字按钮-->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorGreen"
        android:textColor="#FFF0F5F5"
        android:text="普通文字按钮"/>
    <!--使用Drawable对象的按钮-->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:textColor="#FFF0F5F5"
        android:background="@drawable/button_selector"
        android:text="使用Drawable对象的按钮"/>
</LinearLayout>

第二个按钮指定android:background属性为@drawable/button_selector，该属性值应用了一个Drawable资源，该资源对应的XML文件如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--指定按钮按下的颜色-->
    <item android:state_pressed="true"
        android:drawable="@color/colorRed"/>
    <!--指定按钮松开的颜色-->
    <item android:state_pressed="false"
        android:drawable="@color/colorGreen"/>
</selector>

第一个按钮是固定的。第二个按钮点击前，按钮为绿色，按下时按钮为红色，松开后按钮又变绿色。
上面的资源文件使用selecto元素定义了一个StateListDrawable对象。

单选按钮（RadioButton）和复选按钮（CheckBox）的功能与用法

• 单选按钮（RadioButton）和复选按钮（CheckBox）、状态开关按钮（ToggleButton）和开关（Switch）都继承自Button。
• 单选按钮（RadioButton）和复选按钮（CheckBox）与普通按钮的区别在于它们多了一个可供选择的功能。
• RadioButton和CheckBox的区别在于前者为单选按钮，后者为多选按钮。
• RadioButton通常要与RadioGroup一起使用，用于定义一组单选按钮。

利用单选按钮、复选框获取用户信息的实例

布局文件如下所示：

<?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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:textSize="16sp"
            android:padding="8dp"
            android:text="性别:"/>
        <!--定义一组单选按钮-->
        <RadioGroup
            android:id="@+id/sex"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal">
            <RadioButton
                android:id="@+id/male"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:checked="true"
                android:text="男"/>
            <RadioButton
                android:id="@+id/female"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:layout_marginLeft="20dp"
                android:text="女"/>
        </RadioGroup>
    </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="你喜欢的颜色是："/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <CheckBox
            android:id="@+id/red"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="红色"/>
        <CheckBox
            android:id="@+id/green"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="绿色"/>
        <CheckBox
            android:id="@+id/yellow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="黄色"/>
        <CheckBox
            android:id="@+id/blue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="蓝色"/>
    </LinearLayout>
    <TextView
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:padding="10dp"/>
</LinearLayout>

上面的界面定义了一组单选按钮，并默认勾选了第一个单选按钮，可供用户选择性别。接下来定义了四个复选框，默认勾选了第一个复选框。
接着在Activity中为单选按钮添加事件监听。

package com.example.textviewinfo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private RadioGroup sex;
    private TextView show;

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

        sex = (RadioGroup) findViewById(R.id.sex);
        show = (TextView) findViewById(R.id.show);
        //为RadioGroup组件绑定OnCheck事件绑定事件监听
        sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //根据用户勾选的单选按钮来改变sexStr的值
                String sexStr = checkedId == R.id.male ? "您的性别是男":"您的性别是女";
                //修改show组件中的文本
                show.setText(sexStr);
            }
        });
    }
}

选择相应用户信息后，界面如下所示：

上面代码添加事件监听器的方式采用了“委托式”事件处理机制，委托式事件处理机制的原理是：当事件源上发生事件时，该事件将会激发该事件源上的监听事件器的特定方法。

状态开关按钮（ToggleButton）和开关（Switch）的功能与用法

ToggleButton，Switch和CheckBox非常相似，只是ToggleButton和Switch通常用于切换程序当中的某种状态。
ToggleButton支持的XML属性及相关得方法如下表所示：

Switch支持的XML属性及相关得方法如下表所示：

动态控制布局的实例

界面布局文件代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.textviewinfo.StateButtonActivity">

    <ToggleButton
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="横向排列"
        android:textOn="纵向排列"
        android:checked="true"/>
    <Switch
        android:id="@+id/switcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="横向排列"
        android:textOn="纵向排列"
        android:checked="true" />
    <LinearLayout
        android:id="@+id/test"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"/>
    </LinearLayout>
</LinearLayout>

用ToggleButton和Switch按钮控制三个Button按钮的排列方式。
接下来为ToggleButton和Switch按钮添加绑定事件，代码如下所示：

package com.example.textviewinfo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.LinearLayout;
import android.widget.Switch;
import android.widget.ToggleButton;

public class StateButtonActivity extends AppCompatActivity {

    private ToggleButton toggleButton;
    private Switch switcher;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_state_button);
        toggleButton = (ToggleButton) findViewById(R.id.toggle);
        switcher = (Switch) findViewById(R.id.switcher);
        final LinearLayout linearLayout = (LinearLayout) findViewById(R.id.test);
        CompoundButton.OnCheckedChangeListener listener = new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked){
                    //设置 LinearLayout垂直布局
                    linearLayout.setOrientation(LinearLayout.VERTICAL);
                }else {
                    //设置 LinearLayout纵向布局
                    linearLayout.setOrientation(LinearLayout.HORIZONTAL);
                }
            }
        };
        toggleButton.setOnCheckedChangeListener(listener);
        switcher.setOnCheckedChangeListener(listener);
    }
}

随着用户改变ToggleButton和Switch按钮的状态，三个按钮的排列方式发生改变，界面效果如下所示：

时钟（AnalogClock和DigitalClock)的功能与用法

• DigitalClock继承自TextView，它里面显示的内容总是当前时间，设置android:text是对其没有作用。
• AnalogClock则继承了View组件，它重写View的Ondraw方法，会在View上绘制模拟时钟。
• AnalogClock和DigitalClock目前都已经过时了。

AnalogClock支持的XML属性及相关得方法如下表所示：

计时器（Chronometer）的功能与用法

Chronometer继承自TextView，它的功能是从某个起始时间开始计时。
它只提供了一个android：format属性，用于指定计时器的计时格式。
Chronometer还支持如下常用方法：

• setBase(long base) : 设置定时器的起始时间。
• setFormat(String format) : 设置显示时间的格式。
• start() : 开始计时。
• stop() : 停止计时。
• setOnChronomenterTickListener(Chronometer.OnChronomenterTickListener listener) : 为计时器绑定事件监听器，当计时器改变时触发该监听器。
  下面程序示范了Chronometer的用法。在布局文件中定义一个Chronometer组件和一个Button组件。当用户单机按钮定时器开始计时，当计时超过20s时停止计时。程序代码如下所示：

package com.example.textviewinfo;

import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Chronometer;

public class ChronometerActivity extends AppCompatActivity {

    private Button start;
    private Chronometer chronometer;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chronometer);
        start = (Button) findViewById(R.id.start);
        chronometer = (Chronometer) findViewById(R.id.chronometer_test);
        start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //设置开始计时时间，SystemClock.elapsedRealtime()是获取自启动起来的毫秒数，包括睡眠时间。
                chronometer.setBase(SystemClock.elapsedRealtime());
                //启动计时器
                chronometer.start();
                //将按钮设置成不可用
                start.setEnabled(false);
            }
        });
        //为Chronometer绑定事件监听器
        chronometer.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
            @Override
            public void onChronometerTick(Chronometer chronometer) {
                if (SystemClock.elapsedRealtime()-chronometer.getBase()>20*1000){
                    chronometer.stop();
                    start.setEnabled(true);
                }
            }
        });
    }
}

单击按钮后，界面如下图所示：