Android UI组件合集（一）
我们将学习Android UI组件容器
学习Android UI组件可以经过大概以下三个过程：
- 学会使用
- 学会自定义
- 了解底层代码如何渲染UI
以下是UI组件关系图
此图会保持更新：
一、首先介绍LinearLayout
ViewGroup继承自View，是可以包含View组件的容器。
LinearLayout继承自ViewGroup，是可以进行水平线性排列和垂直线性排列的容器
1. 线性布局代码：
水平线性排列：
activity_main.xml文件如下：
展开查看
<?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="horizontal">
<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>
其中
android:layout_width="match_parent"
android:layout_height="match_parent"
表示的是匹配父容器的宽度或高度，父容器多大，此组件就多大。
而
android:layout_width="wrap_content"
android:layout_height="wrap_content"
表示的是正好包裹内容，此组件包裹的内容多大，此组件就多大。
效果如下所示：
垂直线性排列：
只需要将上述代码中的第6行改为
android:orientation="vertical"
效果图如图所示：
2. 填充(padding)
填充就是容器自己给自己添加空白。
activity_main.xml文件如下：
展开查看
<?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="horizontal"
android:paddingStart="20dp">
<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>
效果图如图所示：
3. 间距代码
间距是相对于View与View之间的，是一种相对关系。
设置Button与Parent间距20dp。
activity_main.xml文件如下：
展开查看
<?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="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1"
android:layout_marginStart="20dp"/>
<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>
说明：这里第7行
*start/*end一般情况下和*left/*right是一样的效果，主要是为了做国际化适配，方便从右往左读的语言文字（如阿拉伯文）。
效果图如图所示：
LinearLayout就学习完成了，还有一些其他属性，我们在实践中慢慢学习。但是我十分不推荐使用LinearLayout，它最大的缺点就是不会自动适配不同分辨率的手机。以后谁滥用LinearLayout，直接板砖伺候😡。
二、RelativeLayout
RelativeLayout是相对布局，可以将父容器或者兄弟容器作为参考系来放置组件。
我们来实现一个案例，案例如下图所示：
activity_main.xml文件如下：
展开查看
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- 组件默认位置是左上角 -->
<!--
下面四个组件是相对于父容器
-->
<Button
android:id="@+id/center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="中间"
android:layout_centerInParent="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="上"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="下"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="左"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:text="右"/>
<!-- ================================= -->
<!--
必需形成一个椭圆
所以下面的一中间的按钮作为参考系
下面四个组件是相对于兄弟组件
-->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@id/center"
android:layout_marginEnd="100dp"
android:layout_alignBottom="@id/center"
android:layout_marginBottom="180dp"
android:text="左上"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="@id/center"
android:layout_marginStart="100dp"
android:layout_alignBottom="@id/center"
android:layout_marginBottom="180dp"
android:text="右上"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@id/center"
android:layout_marginEnd="100dp"
android:layout_alignTop="@id/center"
android:layout_marginTop="180dp"
android:text="左下"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="@id/center"
android:layout_marginStart="100dp"
android:layout_alignTop="@id/center"
android:layout_marginTop="180dp"
android:text="右下"/>
</RelativeLayout>
效果图如图所示：
三、ConstraintLayout
ConstraintLayout可以减少布局的层级，优化渲染性能。当然Google提供了图形用户界面进行绘制。请参考如下链接：
ConstraintLayout图像用户界面操作 图形用户界面
1. 普通的相对布局
activity_main.xml代码如下所示:
展开查看
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="中心"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
app:layout_constraintBottom_toBottomOf="parent"：第一个Bottom代表的是本组件下面基线，第二个Bottom代表的是等号后面parent的下面基线，其余同理。
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
看如上代码其对应位置Top与Bottom相反，且等号后面同一View所以其便会实现居中效果。
效果如图所示：
