从0系统学Android--3.2四种基本布局

从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) {
                // 你自己想做的事情
            }
        });
    }
}

好了这样一个标题栏自定义控件就完成了。