这是我参与「第四届青训营 」笔记创作活动的的第4天
一、前言
前面我也发了三篇文章，两篇是理论知识，一篇是图库App实战，估计很多同学对界面还是懵懵懂懂，这节课我们开始踏入UI编程吧，这里我按照我的理解，梳理了一下知识点。
- UI组件
- 什么是UI组件
- UI组件分类
- 通用属性
- 常用控件
- TextView
- ImageView
- Button
- EditText
- ProgressBar
- 常用布局
- LinearLayout
- RelativeLayout
- FrameLayout
- ConstraintLayout
二、UI组件
什么是UI？
- UI是User Interface的缩写，是对软件的人机交互、操作逻辑、界面美观的整体设计。
- UI界面由多个不同功能的UI组件构成
- Android SDK提供了大量的UI组件
UI组件分类
Android中把UI组件分为两种：视图（控件）、布局，分别对应两个基类：View、ViewGroup。其中所有控件都是直接或者间接继承于View的，所有布局都是直接或者间接继承于ViewGroup的。
View可以在屏幕上绘制出各种各样的形状、内容，因此一般所有的控件都是有一定的内容，例如我们手机上看到的文字、图片都是由控件来展示出来的。
而ViewGroup本质上也是View的子类，它是一种特殊的View，它可以包含子View和子ViewGroup，用于放置UI组件以及管理排版的，当然ViewGroup的子类布局也是有这些特点的。
通用属性
每个UI组件都有它的属性，当然这其中也有很多通用的属性，我们来了解一下吧。
| 属性名 | 描述 |
|---|---|
| id | 控件的唯一标识符 |
| layout_width | 指定UI组件的宽度 |
| layout_hegiht | 指定UI组件的高度 |
| margin、margin_left、margin_right、margin_top、margin_bottom | 指定UI组件的外边距 |
| padding、padding_left、padding_right、padding_top、padding_bottom | 指定UI组件的内边距 |
| visibility | 指定UI组件的可见性 |
| background | 设置UI组件的背景 |
| gravity | 指定UI组件内部的对齐性 |
| layout_gravity | 指定UI组件本身对于父组件的对齐线 |
| ... | ... |
了解了UI组件的分类及通用属性，接下来我们来看一下常用的控件以及布局吧。
三、常用控件
（1）TextView
TextView译为文本视图，用于显示文本，在我们日常使用的App中就有大量的TextView。
效果图
特殊属性
android:text="字节跳动青训营"
android:textColor="@color/colorPrimary"
android:textSize="25sp"
| 属性名 | 描述 |
|---|---|
| text | 指定显示的文字 |
| textColor | 文字颜色 |
| textSize | 文字大小 |
| ... | ... |
（2）ImageView
ImageView译为图像视图，用于显示图像。
效果图
特殊属性
android:src="@drawable/ic_home"
android:scaleType="fitCenter"
| 属性名 | 描述 |
|---|---|
| src | 用于设置图像资源 |
| scaleType | 图像比例类型 |
| ... | ... |
（3）Button
Button译为按钮，是用于与用户交互很重要的控件。
效果图
特殊属性
Button是TextView的子类，因此特殊属性与TextView是差不多的。
（4）EditText
EditText译为编辑文本，用于用户输入与编辑内容。
效果图
特殊属性
android:hint="请输入用户名"
android:inputType="number"
android:maxLines="2"
EditText也是TextView的子类，因此具有TextView的特殊属性，除此之外，还有以下的特殊属性。
| 属性名 | 描述 |
|---|---|
| hint | 当text为空时，EditText显示的提示信息 |
| inputType | EditText允许输入的文本类型 |
| maxLines | EditText支持显示的最多行数 |
| ... | ... |
（5）ProgressBar
ProgressBar译为进度条，用于在界面上显示一个进度条。
效果图
特殊属性
ProgressBar默认是一个圆形进度条，可以通过设置它的style为@style/Widget.AppCompat.ProgressBar.Horizontal变成一个水平的进度条。
| 属性名 | 描述 |
|---|---|
| style | 设置控件的样式 |
| max | 设置进度条的最大值 |
| progress | 设置进度条的当前进度 |
| ... | ... |
四、常用控件
（1）LinearLayout
LinearLayout译为线性布局，可以让子控件按照垂直或者水平方向进行线性排列。
效果图
垂直排列
水平排列
按钮1的layout_weight为1，按钮2的layout_weight为2.
特殊属性
| 属性名 | 描述 |
|---|---|
| orientation | 指定排列方式(vertical 垂直排列 horizontal 水平排列) |
| layout_weight | 权重（可在子控件中指定） |
| ... | ... |
（2）RelativeLayout
RelativeLayout译为相对布局，可以让子控件根据父容器进行定位或者根据兄弟组件进行定位。
效果图
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮2"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮3"/>
</RelativeLayout>
特殊属性
| 属性名 | 描述 |
|---|---|
| layout_centerInParent | 组件位于父容器中央位置 |
| layout_centerHorizontal | 组件位于父容器水平中央位置 |
| layout_centerVertical | 组件位于父容器垂直中央位置 |
| layout_alignParentTop | 组件与父容器顶部对齐 |
| ... | ... |
（3）FrameLayout
FrameLayout译为帧布局，所有的子控件默认显示在布局的左上角。
效果图
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="400dp"
android:layout_height="400dp"
android:layout_gravity="center"
android:background="@android:color/holo_red_dark"/>
<View
android:layout_width="350dp"
android:layout_height="350dp"
android:layout_gravity="center"
android:background="@android:color/holo_green_dark"/>
<View
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="@android:color/holo_blue_dark"/>
<View
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_gravity="center"
android:background="@android:color/white"/>
</FrameLayout>
特殊属性
| 属性名 | 描述 |
|---|---|
| foreground | 指定前景图像 |
| foregroundGravity | 指定前景图像Gravity |
| ... | ... |
（4）ConstraintLayout
ConstraintLayout译为约束布局，与RelativeLayout有相似点，通过约束组件位置排列组件。
效果图
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
app:layout_constraintBottom_toTopOf="@+id/button2"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
特殊属性
| 属性名 | 描述 |
|---|---|
| layout_constraintLeft_toLeftOf | 组件左部与某组件左部对齐 |
| layout_constraintLeft_toRightOf | 组件左部与某组件右部对齐 |
| layout_constraintRight_toLeftOf | 组件右部与某组件左部对齐 |
| layout_constraintRight_toRightOf | 组件右部与某组件右部对齐 |
| ... | ... |
五、总结
为大家介绍了UI组件、常用的UI控件、常用的UI布局。
虽然每一个组件的使用都不难，但是每一个复杂的UI界面都是由简单的UI组件构成的。
通过这一小节，我们能够踏入了Android的UI编程之路，但是除了这些简单UI组件，还有很多高级的UI组件是必学的，比如ListView（RecylerView）、ScrollView、ViewPager等。
除此之外，我们不仅只是要学会UI组件的使用，还要了解它的渲染、交互以及自定义一个View，这些我们留到下一篇文章。
六、结语
如果喜欢或有所帮助的话，希望能点赞关注，鼓励一下作者。
如果文章有不正确或存疑的地方，欢迎评论指出。
