【Android开发】安卓四大布局方式详解

心得感悟

刚开始觉得内容很多，感觉有点记不住，但后面理解起来还是比较容易的。这几天学的内容都有点多，目前还有些吃不消，后面自己慢慢消化吧。下午还一起写了密码解锁Demo，通过这个Demo，真的可以加深对本章内容的印象。

内容简概

一、安卓布局方式总览
二、FrameLayout（框架布局/帧布局）
三、 LinearLayout（线性布局）
四、 RelativeLayout（相对布局）
五、ConstraintLayout（约束布局）

具体内容

一、安卓布局方式总览

①AbsoluteLayout（绝对布局）
②FrameLayout（框架布局/帧布局）
③LinearLayout（线性布局）
④RelativeLayout（相对布局）
⑤TableLayout（表格布局）
⑥ConstraintLayout（约束布局）
在这里暂不介绍(1)和(5)

二、FrameLayout（框架布局/帧布局）

据说这种布局方式在六大布局中最为简单，这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候，会默认把他们放到这块区域的左上角，而这种布局方式却没有任何的定位方式，所以它应用的场景并不多。

属性	作用
android:foreground	设置改帧布局容器的前景图像
android:foregroundGravity	设置前景图像显示的位置

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity"
    android:foreground="@drawable/test"   // 前景图片
    android:foregroundGravity="right|bottom">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@color/colorPrimaryDark"/>

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"/>

</FrameLayout>

三个ImageView设置不同大小与背景色,依次覆盖,接着右下角的是前景图像,通过 android:foreground="@drawable/logo"设置前景图像的图片
android:foregroundGravity="right|bottom"设置前景图像的位置在右下角。

三、 LinearLayout（线性布局）

顾名思义,指的是整个Android布局中的控件摆放方式是以线性的方式摆放的。

1. 排列方式

纵向：android:orientation="vertical"
横向：android:orientation="horizontal"
系统默认采用横向布局

代码只需要修改android:orientation="horizontal"即可。下面为对比代码和对比图：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal"> 
    <!--横向布局-->

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorAccent"/>
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"/>

</LinearLayout>

2. 对齐方式

线性布局里有两种设置边距的方式，分别是padding()和margin()。前者规定内边距，后者规定外边距。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <!--横向布局-->

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@color/colorAccent"
        android:paddingStart="150dp"  //和左侧的边距
        android:paddingTop="50dp"   //和顶部的边距
        android:text="这是一个子控件"

        ></TextView>
    
</LinearLayout>

黑色箭头为margin()，白色箭头为padding()，可以看到文字可以和其背景对齐，这一整个文本控件又和界面对齐。线性布局中，各个控件不能重叠。

3. 权重

线性布局中可以规定控件的权重，通过android:layout_weight=""实现。下面我们来看一起权重的经典问题。我们先不设置总权重，设置子元素的宽度为0dp。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal">
    <!--横向布局-->


    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"//果绿色
        android:layout_weight="1"/>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"//玫红色
        android:layout_weight="2"/>

</LinearLayout>

可以看到界面控件的比例与权重相符，再看一下权重超过设定的情况。下面规定总权重为3，子元素宽度都设置为0dp，看看会发生什么？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    android:weightSum="3"> // 规定总权重为3


    <ImageView
        android:layout_width="0dp" // 设置宽度
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:layout_weight="1"/>

    <ImageView
        android:layout_width="0dp" // 设置宽度
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:layout_weight="2"/>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark"
        android:layout_weight="3"/>
    
</LinearLayout>

明明我们设置了1:2:3，为什么显示的却是1:2呢？这是因为系统中规定，子权重不能大于总权重，如果大于了，则“先到先得”。这里我们用了横向排列方式，故第一个控件（果绿色）实际权重为1 * (1+2+3) = 1/6，第二个控件（玫红色）的实际权重为2 * (1+2+3) = 2/6超过总权重的控件将不被显示，那么显示的比例就是(1/6) : (2/6)即1 : 2

注意：使用权重时，尽量将控件宽度设置为0dp，否则其比例并不会按其权重显示，那么如何显示呢？这里有一篇文章我觉得讲得挺好的，可以直接看其文字部分。戳我查看

四、 RelativeLayout（相对布局）

在相对布局中，可以方便地设置控件间的间距等。它在MarginLayout的基础上，添加了对齐方法——layout_alignBottom="@+id/iv"。对齐指的是和其他控件对齐。

下面是一些简单的属性：

属性	作用
layout_marginRight	控件与界面右侧距离
layout_toRightOf	将该控件的右边缘与给定ID的控件左边缘对齐;
layout_alignRight	将该控件的右边缘与给定ID的右边缘对齐;
layout_alignParentRight	将该控件的右部与其父控件的右部对齐;
layout_centerInParent	将该控件的置于父控件的中央;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    android:weightSum="3">

    <View
        android:id="@+id/v1"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="@color/colorPrimaryDark" />

    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorAccent"
        android:layout_alignRight="@id/v1"
        android:layout_alignBottom="@id/v1"
        android:layout_marginRight="50dp"/>
    
</RelativeLayout>

通过相对布局，可以实现控件的重叠。当控件大量重叠时，用相对布局更加方便。

五、ConstraintLayout（约束布局）

1. 简单介绍
约束布局减少了嵌套，可以使得界面的效率更高，故六大布局方法中，约束布局为人们所推崇。