安卓布局方式总览

1、AbsoluteLayout（绝对布局）（不介绍）

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

3、LinearLayout（线性布局）

4、RelativeLayout（相对布局）

5、TableLayout（表格布局）（不介绍）

6、ConstraintLayout（约束布局）

一、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布局中的控件摆放方式是以线性的方式摆放的。

■ 排列方式

纵向：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>

■ 对齐方式

线性布局里有两种设置边距的方式，分别是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()，可以看到文字可以和其背景对齐，这一整个文本控件又和界面对齐。线性布局中，各个控件不能重叠。

■ 权重

线性布局中可以规定控件的权重，通过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

三、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（约束布局）

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

■ 简单介绍

属性	作用
layout_constraintTop_toTopOf	视图的上边对齐另一个视图的上边
layout_constraintTop_toBottomOf	视图的上边对齐另一个视图的底边
layout_constraintTop_toLeftOf	视图的上边对齐另一个视图的左边
layout_constraintTop_toRightOf	视图的上边对齐另一个视图的右边

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:orientation="horizontal"
    android:weightSum="3">
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_A_toEndOf="parent"
        app:layout_A_toBottomOf="parent"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

该例子中，控件四周边距都为20dp。

这个还是比较容易实现的，当有两个及以上控件时该怎么办呢？

看下面这个例子。

■ 进阶使用

下面我们实现两个控件和父视图边距都为20dp，之间的距离也为20dp

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:orientation="horizontal"
    android:weightSum="3">
    <View
        android:id="@+id/v1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/v2"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        app:layout_constraintHorizontal_weight="1"/>
    <View
        android:id="@+id/v2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintTop_toTopOf="@id/v1"
        app:layout_constraintBottom_toBottomOf="@id/v1"
        app:layout_constraintStart_toEndOf="@id/v1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        android:layout_marginRight="20dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

相信你在这个例子中，可以很好的感受到

layout_constraintStart_toStartOf

和

layout_constraintEnd_toStartOf的区别。

这里还使用了权重，权重的好处在于，当你确定各个控件的比例时，不用通过繁琐的计算各个边距。

摘抄与简书

https://www.jianshu.com/p/0c1a13c0d9d6

本文地址：
转载请著名出处，谢谢！
欢迎交流
QQ：419268793