从0系统学Android--3.2四种基本布局
本系列文章目录：更多精品文章分类
本系列持续更新中....
一个界面总是要由许多的控件来组成的，如何让这些控件可以在界面上有条不絮的摆放呢？这就需要布局来实现了。布局是一种可以放置很多控件的容器，可以让这些控件按照一定的规律来排列。
布局内即可以放置普通控件也可以放置布局，可以有多层嵌套。关系图
接下来介绍 Android 中 4 中常用的基本布局
3.3.1 线性布局
Linerlayout 又称为线性布局，是一种非常常用的布局，这个布局会将它所包含的所有控件在线性方向上排列。
既然是线性那么肯定就不止一个方向了，通过 android:orientation 属性来指定排列的方向。vertical 代表垂直排列，horizontal 是水平排列。
代码：
<?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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"/>
</LinearLayout>
上面是垂直排列，然后我们把 android:orientation="vertical" 修改为 android:orientation="horizontal"
效果：
注意如果把排列设置为 vertical 则内部控件的高度就不能设置成 match_parent 因为如果你这样设置的话，其他控件就没有空间了。同样的如果排列为 horizontal 的话内部控件的宽度就不能指定为 match_parent
android:gravity 用于指定文字在本控件中的对齐方式。
android:layout_gravity 用于指定本控件在布局中的对齐方式。
注意如果排列方向是 horizontal 的话，则 layout_gravity 只有垂直方向上的对齐方式才会生效，因为此时水平方向上的长度是不固定的，每添加一个控件水平方向上的长度都会改变。同样道理，排列方向是 vertical 的时候，layout_gravity 只有在水平方向上对齐方式才会有效。
android:layout_weight 属性允许我使用比例的方式来指定控件的大小，在屏幕适配方面有非常重要的作用。
3.3.2 相对布局
RelativeLayout 称作相对布局，它是通过相对定位的方式让控件出现在布局的任何位置。
重要属性：
android:layout_alignParentLeft android:layout_alignParentRight android:layout_alignParentTop android:layout_alignParentBottom android:layout_centerInParent 这几个属性都是内部控件相对于父控件的排列位置。
同样也有相对于控件进行定位的 layout_above layout_below layout_toLeftOf layout_toRightOf
alignLeft 表示让一个控件的左边和另一个控件的左边对齐
alignRight 表示一个控件的右边和另一个控件的右边对齐
alignTop alignBottom 道理也是一样
3.3.3 帧布局
FrameLayout 称作帧布局。应用场景较少，所有控件都默认摆放在布局的左上角。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="@string/app_name"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
</FrameLayout>
效果
可以看到后面添加的 ImageView 被遮挡了。
layout_gravity 属性在控件中还是生效的。
3.3.4 百分比布局
前面三种布局都是在 Android 1.0 版本中就支持了。一直沿用到现在。在 LinearLayout 中支持使用 layout_weight 属性来实现按照比例来控制控件的大小，其他两种布局就不支持了。为此 Android 引入了全新的布局方式来解决此问题-----百分比布局。在 API 24.1.0 新添加的，不过在 API 26 中就不推荐使用了。
由于 LinearLayout 本身已经支持按照比例指定控件大小了，因此百分比布局只是为了 FrameLayout 和 RelativeLayout 进行了功能扩展，提供了 PercentFrameLayout 和 PercentRelativeLayout 两个全新的布局。
由于百分比布局是在后来添加的，所以为了兼容之前版本，Android 团队将百分比布局定义在了 support 库 中（如果你现在使用了 androidx 就没有这些问题了，这些支持库都统一放在了 androidx 中）。因此我们需要先引入一下（如果你使用的是 androidx 就不用引用了）
// 在 app/build.gradle文件中
dependencies{
// 添加
compile 'com.android.support:percent:24.2.1'
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:layout_gravity="left"
app:layout_widthPercent = "50%"
app:layout_heightPercent = "50%"
android:layout_height="wrap_content"
android:text="@string/app_name" />
<Button
app:layout_widthPercent = "50%"
app:layout_heightPercent = "50%"
android:layout_gravity="right"/>
<Button
app:layout_widthPercent = "50%"
app:layout_heightPercent = "50%"
android:layout_gravity="left|bottom"/>
<Button
app:layout_widthPercent = "50%"
app:layout_heightPercent = "50%"
android:layout_gravity="right|bottom"/>
</androidx.percentlayout.widget.PercentFrameLayout>
效果图：
由于 PercentFrameLayout 不是系统 SDK 中的，因此有些属性还要用 app 这种命名空间。我们之所以能够使用 app 前缀的属性就是因为我们在开头加入了定义 app 的命名空间，当然我们一直使用 android 前缀的属性也是同样的道理，只不过是系统帮我们自动添加了。
使用百分比布局主要就是这两个属性 app:widthPercent 和 app:heightPercent 使用的时候 Android Studio 的布局编辑页面可以会有红色下划线提醒，这是因为我们没有使用 android:layout_width 和 android:layout_height 。不过这不影响运行程序。
PercentRelativeLayout 的用法也是类似，继承了 RelativeLayout 的所有属性。
这样几种常用的布局就讲完了，还有 AbsoluteLayout TableLayout 等布局不常使用就不讲解了。
3.4 系统控件不够用？创建自定义控件
上一节我们学习了 Android 中的一些常用的控件和布局的用法。这里我们来看一下他们的关系图
可以看到说有的控件都是直接或者间接继承 View ，所有的布局都是直接或者间接继承 ViewGroup 。
View 是 Android 中最基本的一种 UI 组件，它可以在屏幕上绘制一块矩形区域，并且能够响应这块区域的各种事件，因此，我们使用的各种控件其实就是在 View 的基础的又添加了一些特有的功能。而 ViewGroup 是一种特殊的 View ，它可以包含很多子 View 和 子 ViewGroup，是一个用于放置控件和布局的容器。
那么当系统给我提供的控件不能满足我们的需要的时候，我们也可以自己创建符合我们自己需求的控件。
3.4.1 引入布局
我们知道现在的应用程序几乎在界面顶部都有一个标题栏，虽然 Android 系统已经给我们提供了，但是这里我们不用它，我们自己创建一个。
我们自己创建一个布局
<?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="wrap_content"
android:background="@color/colorPrimary"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/title_back"
android:background="@color/colorAccent"
android:layout_gravity="center"
android:text="back"
android:textAllCaps="false"
android:textColor="#FFFFFF"/>
<TextView
android:layout_gravity="center"
android:layout_width="0dp"
android:layout_weight="1"
android:textSize="24sp"
android:layout_height="wrap_content"
android:text="Text Title"
android:id="@+id/title_text"
android:gravity="center"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:background="@color/colorPrimaryDark"
android:text="Edit"
android:textAllCaps="false"/>
</LinearLayout>
就这样这个简单的标题栏布局就写好了，那么如何使用呢？很简单，在需要使用的布局中。
<include layout="@layout/title"/>
就添加上面一句话就把刚刚的布局引入了。
使用的时候不要忘了隐藏自带的标题栏
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ui);
ActionBar actionBar = getSupportActionBar();
if (actionBar !=null){
actionBar.hide();
}
initView();
}
3.4.2 创建自定义控件
引入布局的技巧确实解决了重复编写布局代码的问题，但是布局中有一些控件还需要响应事件，这种情况就需要我们来自定义控件了。
新建 TitleLayout 继承自 LinearLayout，让它作为我们自定义标题栏的控件。
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title,this);
Button btBack = findViewById(R.id.title_back);
Button btEdit = findViewById(R.id.bt_edit);
btBack.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((Activity)getContext()).finish();
}
});
btEdit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 你自己想做的事情
}
});
}
}
好了这样一个标题栏自定义控件就完成了。