2.3 第2组UI组件：TextView及其子类

2024-03-16 22:01:58

2.3 第2组UI组件：TextView及其子类

2.3 第2组UI组件：TextView及其子类

TextView及其子类的类图；本节将对TextView及其子类进行系统总结

2.3.1 文本框（TextView）与编辑框（EditText）的功能和用法

​ TestView的XML属性与方法说明 android.widget.TextView

实例：不同颜色、字体、带链接的文本 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    >
    <!-- 设置字号，文本框结尾处绘制图片 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/str01"
        android:textSize="20pt"
        android:drawableRight="@drawable/res"
        android:drawableEnd="@drawable/res"
        />
    <!-- 设置中间省略，所有字母大写 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/str02"
        android:singleLine="true"
        android:ellipsize="middle"
        android:textAllCaps="true"
        />
    <!-- 对邮件电话添加连接 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="@string/str03"
        android:autoLink="email|phone"
        />
    <!-- 设置文子颜色、大小、并使用阴影 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/str04"
        android:shadowColor="#00F"
        android:shadowDx="10.0"
        android:shadowDy="8.0"
        android:shadowRadius="3.0"
        android:textColor="#f00"
        android:textSize="18pt"
        />
    <CheckedTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/str05"
        android:checkMark="@drawable/ok"
        />
</LinearLayout>

​ 2.3 第2组UI组件：TextView及其子类

实例：圆角边框、渐变背景的TextView

2.3.2 EditText的功能与用法

  • EditText与TextView最大的区别是：EditText可以接受用户输入
  • EditText组件最重要的属性是inputType，用于EditText为指定类型的输入组件
  • EditText派生了两个子类
    • AutoCompleteTextView：带有自动完成功能的EditText，通常与Adapter结合使用
    • ExtractEditText：它是EditText组件的底层服务类，负责全屏输入法支持（不是UI组件）

实例：用户友好的输入界面 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:stretchColumns="1"
    >
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/str01"
            android:textSize="16sp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/str02"
            android:selectAllOnFocus="true"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/str03"
            android:textSize="16sp"
            />
        <!-- android:inputType="numberPassword"表明只接受数字密码 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="numberPassword"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/str04"
            android:textSize="16sp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/str05"
            android:textSize="16sp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="date"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/str06"
            android:textSize="16sp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="phone"
            android:selectAllOnFocus="true"
            />
    </TableRow>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/str07"
        />
</TableLayout>

​ 2.3 第2组UI组件：TextView及其子类

android:hint，当用户没输入信息的时候，显示的内容

android:inputType，指定文本框只接受的数据类型，并且自己切换对应的输入法

android:selectAllOnFocus=“true”，自动选取该组件内的所有的文本内容

2.3.3 按钮（Button）组件的功能和用法

  • Button继承了TextView,与TextView不同的是,当用户单击按钮时，按钮会触发一个OnClick事件。

  • Button使用起来与TextView差不多，可以设置android:background与定义Drawable对象来开发出各种各样的按钮。

    Button的XML属性与方法说明

2.3.5 单选按钮(RadioButton)与复选框(CheckBox)的功能与用法

  • 单选按钮（RadioButton）和复选框（CheckBox）、状态开关按钮（ToggleButton）与开关（Switch）都继承了Button类。
  • RadioButton、CheckBox多了一个可选中的按钮，因此都可额外指定一个android:checked属性，该属性用于指定它们初始时是否被选中。
  • 它们的不同之处在于，一组RadioButton只能选中其中一个，因此RadioButton通常要与RadioGroup一起使用，用于定义一组单选按钮。
  • 单选按钮是两个状态的按钮，可以选中也可以取消选中。当单选按钮未选中时，用户可以按下或单击它来选中它。但是相反CheckBox，单选按钮一旦选中就不能被用户取消选中。单选按钮通常在 RadioGroup. 当多个单选按钮位于一个单选组中时，选中一个单选按钮会取消选中所有其他单选按钮。

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

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="性别"
            android:textSize="16sp"
            />
        <!-- 定义一组单选按钮 -->
        <RadioGroup    android:id="@+id/rg"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal">
<!--            定义两个单选按钮-->
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/male"
                android:text="男"
                android:checked="true"
                />
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/female"
                android:text="女"
                />
        </RadioGroup>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="喜欢的颜色"
            android:textSize="16sp"
            />
<!--        定义一个垂直的线性布局-->
        <LinearLayout
            android:orientation="vertical"
            android:layout_gravity="center_horizontal"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            >
<!--            定义三个复选框-->
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="红色"
                android:checked="true"
                />
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="蓝色"
                />
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="绿色"
                />
        </LinearLayout>
    </TableRow>
    <TextView
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="您的性别是男"
        />
</TableLayout>

​ 上面的界面布局中定义了一组单选按钮以及三个复选框，并默认勾选了第一个。

  • 如果在XML布局文件中默认勾选了某个单选按钮，则必须为该组单选按钮的每个按钮指定android:id属性值，否则这组单选按钮不能正常工作。

    ​添加事件监听器，监听这组单选按钮的勾选状态的改变。

public class MainActivity extends AppCompatActivity {
    RadioGroup rg;
    TextView show;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取布局文件中rg、show两个组件
        rg = (RadioGroup) findViewById(R.id.rg);
        show = (TextView) findViewById(R.id.show);
        //为RadioButton的OnCheck事件绑定事件监听器
        rg.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                String tip = i == R.id.male ? "您的性别是男" : "您的性别是女";
                show.setText(tip);
            }
        });
    }
}

​ 2.3 第2组UI组件：TextView及其子类

2.3.6 状态开关按钮(ToggleButton)与开关(Switch)的功能与用法

状态开关按钮togglebutton和开关switch是由button派生出来的，本质也是按钮，支持BUtton的各种属性，从功能上看，ToggleButton、Switch与CheckBox非常的相似，他们都可以提供两种状态，不过更常用的是切换程序中的某种状态。

​ ToggleButton的官方API

XML属性 相关方法 说明
android:checked setChecked(boolean) 设置该按钮是否被选中
android:textOff 设置该按钮的状态为关闭时的文本
android:textOn 设置该按钮的状态为打开时的文本

​ Switch的官方API

XML属性 相关方法 说明
android:checked setChecked(boolean) 设置该开关是否被选中
android:switchMinWidth setSwitchMinWidth(int) 设置该开关的最小宽度
android:switchPadding setSwitchPadding(int) 设置该开关与标题文本之间的空白
android:switchTextAppearance setSwitchTextAppearance(Context,int) 设置该开关图标上的文本样式
android:textOff setTextOff(CharSequence) 设置该开关的状态关闭时显示的文本
android:textOn setTextOn(CharSequence) 设置该开关的状态打开时显示的文本
android:textStyle setSwitchTypeface(Typeface) 文本的样式（粗体、斜体、粗体）
android:thumb setThumbResource(int) 指定使用自定义Drawable绘制该开关的开关按钮
android:track setTrackResource(int) 指定使用自定义Drawable绘制该开关的开关轨道
android:typeface setSwitchTypeface(Typeface) 文本的字体（正常、无衬线、衬线、等宽）

实例：动态控制布局

思路：在页面中增加一个ToggleButton，随着该按钮状态的改变，界面布局的LinearLayout布局的方向在水平布局、垂直布局之间切换。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    >
<!--    定义一个ToggleButton按钮-->
    <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:thumb="@drawable/check"
        android:checked="true"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/test"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试按钮1"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试按钮2"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试按钮3"
            />
    </LinearLayout>
</LinearLayout>

​ 接下来为ToggleButton与Switch按钮绑定监听器，当状态发生改变时，通过程序改变LinearLayout的布局方向。

public class MainActivity extends AppCompatActivity {
    ToggleButton toggle;
    Switch switcher;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toggle = (ToggleButton) findViewById(R.id.toggle);
        switcher = (Switch) findViewById(R.id.switcher);
        final LinearLayout test = (LinearLayout) findViewById(R.id.test);
        CompoundButton.OnCheckedChangeListener listener = new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if(b){
                    test.setOrientation(1);
                }
                else{
                    test.setOrientation(0);
                }
            }
        };
        toggle.setOnCheckedChangeListener(listener);
        switcher.setOnCheckedChangeListener(listener);
    }
}

​ 2.3 第2组UI组件：TextView及其子类

​ 2.3 第2组UI组件：TextView及其子类

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

​ 时钟UI组件是两个非常简单的组件，DigitalClock继承了TextView，只是它里面显示的内容是当前时间，因此为DigitalClock设置android:text属性没什么作用。

​ AnalogClock则继承了View，它重写了View的OnDraw方法，它会在View上绘制模拟时钟。

​ DigitalClock可以显示当前的秒数，AnalogClock不会显示当前秒数。

​ AnalogClock官方API

XML属性 说明
android:dial 设置该模拟时钟的表盘使用的图片
android:hand_hour 设置该模拟时钟的时针表盘使用的图片
android:hand_minute 设置该模拟时钟的分针使用的图片

实例：手机里的“劳力士”

​ 我们只需要对AnalogClock的表盘、时针、分针设置合适的图片即可开发手机里的劳力士，这里仅展示普通的模拟、数字时钟。

<?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"
    android:gravity="center_horizontal"
    >
    <AnalogClock
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <DigitalClock
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14pt"
        android:textColor="#f0f"
        />
</LinearLayout>

​ 2.3 第2组UI组件：TextView及其子类

2.3.8 计时器（Chronometer）

​ Chronometer与DigitalClock一样都继承与TextView，因此它们都会显示一段文字，Chronometer显示的是从某个起始时间开始，一共过去了多长时间。

​ Chronometer提供了一个android:format属性，用于指定计时器的计时格式，除此之外，还支持如下常用方法：

  • **setBase(long base)：**设置计时器的起始时间。
  • setFormat(String format)：设置显示时间的格式。
  • **start()：**开始计时。
  • **stop()：**停止计时。
  • **setOnChronometerTickListener(Chronometer.OnChronometerTickListener listener)：**为计时器绑定事件监听器，当计数器改变时触发该监听器。

实例代码

​ 布局文件中定义了一个Chronometer组件和一个Button组件。当用户单击Button时系统开始计时，当计时超过20秒时停止计时。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="center_horizontal"
    >
    <Chronometer
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/test"
        android:textSize="50sp"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="启动"
        android:textSize="70sp"
        android:id="@+id/start"
        />
</LinearLayout>

java代码：

public class MainActivity extends AppCompatActivity {
    Chronometer ch;
    Button start;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ch = (Chronometer) findViewById(R.id.test);
        start = (Button) findViewById(R.id.start);
        start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
              	//设置开始时间
                ch.setBase(SystemClock.elapsedRealtime());
              	//启动计时器
                ch.start();
              	//设置按钮不能按
                start.setEnabled(false);
            }
        });
        ch.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
            @Override
            public void onChronometerTick(Chronometer chronometer) {
              	//如果计时超过了20秒则停止
                if(SystemClock.elapsedRealtime() - ch.getBase() > 20 * 1000){
                    ch.stop();
                    start.setEnabled(true);
                }
            }
        });
    }
}

程序中用到的SystemClock类仅仅是一个获取系统时间、运行时间的工具类，用法简单。

​ SystemClock官方API android.os.SystemClock

​ 2.3 第2组UI组件：TextView及其子类

——————————————————————————————————————————————

上一篇：简单的流式布局（移动应用开发）


下一篇：Android 在代码中修改TextView的DrawableRight等方向上的图片