Android基础学习笔记16：标签学习目标一继承关系图二标签常用属性三教学案例：标签演示

115 阅读 0 评论 76 点赞

我是靠谱客的博主傲娇吐司，这篇文章主要介绍Android基础学习笔记16：标签学习目标一继承关系图二标签常用属性三教学案例：标签演示，现在分享给大家，希望可以做个参考。

学习目标

熟悉标签常用属性
能在应用中正确使用标签
安卓应用里需要显示不变的信息，一般采用标签（TextView）。

一继承关系图

TextView是View的子类
在这里插入图片描述

Button和EditText都是TextView的子类

二标签常用属性

属性作用
text 标签文本内容（@string/username）
textColor 标签文本颜色（#ff00ff、@color/red）
textSize 标签文本字号（单位用sp）
textStyle 标签文本样式（normal | bold | italic）
autoLink 自动链接（none、web、email、phone、map）
background 背景（背景色、背景图片、背景图形）
textAllCaps 字母全大写
drawableTop 图片在上
drawableBottom 图片在下
drawableLeft 图片在左
drawableRight 图片在右

三教学案例：标签演示

1、创建安卓应用

基于Empty Activity模板创建安卓应用 - TextViewDemo

单击【Finish】按钮

2、字符串资源文件

字符串资源文件strings.xml

标签演示常规：Welcome to Android World 粗体：Welcome to Android World 斜体：Welcome to Android World 粗斜：Welcome to Android World 全大写：Welcome to Android World 勾股定理：化学方程式：安卓

3、自定义边框配置文件

在drawable目录里创建自定义边框配置文件custom_border.xml
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<corners android:radius="5dp" /> <!--圆角-->
<solid android:color="#dddddd" /> <!--填充色-->
<stroke
    android:width="1dp"
    android:color="#555555" /> <!--边界宽度及颜色-->

<padding
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp" /> <!--内边距-->

<gradient
    android:centerColor="#ffff00"
    android:endColor="#00ff00"
    android:startColor="#aaaaaa" /> <!--渐变色-->

4、主布局资源文件

主布局资源文件 - activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

复制代码

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="#aaaaaa" ></View>

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="#aaaaaa" ></View>

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="@string/android"
        android:layout_marginRight="10dp"
        android:textColor="#ffffff"
        android:textSize="18sp" ></TextView>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<TextView
    android:id="@+id/tv_normal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/normal"
    android:textColor="@android:color/holo_blue_bright"
    android:textSize="15sp"
    android:textStyle="normal" />

<TextView
    android:id="@+id/tv_bold"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bold"
    android:textColor="@android:color/holo_green_light"
    android:textSize="15sp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/tv_italic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/italic"
    android:textColor="@android:color/holo_orange_light"
    android:textSize="15sp"
    android:textStyle="italic" />

<TextView
    android:id="@+id/tv_bold_italic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bold_italic"
    android:textColor="@android:color/holo_purple"
    android:textSize="15sp"
    android:textStyle="bold|italic" />

<!--分割线-->
<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="#aaaaaa" />

<TextView
    android:id="@+id/tv_all_caps"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/all_caps"
    android:textAllCaps="true"
    android:textColor="#ffffff"
    android:textSize="15sp"
    android:textStyle="normal" />

<TextView
    android:id="@+id/tv_theorem"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginTop="10dp"
    android:gravity="center_vertical"
    android:text="@string/theorem"
    android:textColor="@android:color/holo_red_light"
    android:textSize="20sp" />

<TextView
    android:id="@+id/tv_equation"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginTop="10dp"
    android:gravity="center_vertical"
    android:text="@string/equation"
    android:textColor="@android:color/holo_green_dark"
    android:textSize="20sp" />

<!-- 分隔线 -->
<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="#aaaaaa" />

<TextView
    android:id="@+id/tv_web"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:autoLink="web"
    android:text="网址：http://www.baidu.com"
    android:textColor="@android:color/holo_orange_light"
    android:textSize="15sp" />

<TextView
    android:id="@+id/tv_email"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:autoLink="email"
    android:text="邮箱：maths007@163.com"
    android:textColor="@android:color/holo_green_light"
    android:textSize="15sp" />

<TextView
    android:id="@+id/tv_phone"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:autoLink="phone"
    android:text="电话：15892921170"
    android:textColor="@android:color/holo_red_light"
    android:textSize="15sp" />

<!-- 分隔线 -->
<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="#aaaaaa" />

<TextView
    android:id="@+id/tv_bordered_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:background="@drawable/custom_border"
    android:text="带边框的文本：永不放弃的梦想"
    android:textColor="#ff0000"
    android:textSize="15sp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:gravity="center"
    android:orientation="horizontal">

    <!--图片标签-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="@string/android"
        android:layout_marginRight="10dp"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="@string/android"
        android:layout_marginRight="10dp"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableBottom="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="@string/android"
        android:layout_marginRight="10dp"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableRight="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="@string/android"            
        android:textColor="#ffffff"
        android:textSize="18sp" />
</LinearLayout>

查看预览效果
在这里插入图片描述

5、主界面类实现功能

主界面类 - MainActivity
在这里插入图片描述

先看看网页里怎么实现上下标
在这里插入图片描述

声明变量
在这里插入图片描述

通过资源标识符获取控件实例
在这里插入图片描述

显示勾股定理
在这里插入图片描述

显示化学方程式
在这里插入图片描述

查看完整代码
package net.hw.textview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.Html;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private TextView tvTheorem;
private TextView tvEquation;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 利用布局资源文件设置用户界面
    setContentView(R.layout.activity_main);
    // 通过资源标识符获取控件实例
    tvTheorem = findViewById(R.id.tv_theorem);
    tvEquation = findViewById(R.id.tv_equation);
    // 显示勾股定理（毕达哥拉斯定理）
    tvTheorem.setText(Html.fromHtml("勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>"));
    // 显示化学方程式
    tvEquation.setText(Html.fromHtml("化学方程式：2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O"));
}