Android：常用布局详解

Github地址：https://github.com/WangFion/android-layout-demo

概述

Android的界面都是由一个个控件在特定的布局约束下按照一定的规则排列组成的。早期Google官方就给我们提供了最基本的六大布局：

• LinearLayout（线性布局）
• RelativeLayout（相对布局）
• FrameLayout（帧布局）
• GridLayout（网格布局）
• AbsoluteLayout（绝对布局）
• TableLayout（表格布局）

其中AbsoluteLayout使用x、y坐标来确定位置已经不推荐使用了，TableLayout也可以用LinearLayout或者GridLayout来替代所以也不长使用。

• ConstraintLayout（约束布局）

2016年Google官方推出新出的布局ConstraintLayout（约束布局），集 LinearLayout（线性布局），RelativeLayout（相对布局），百分比布局等的功能于一身，功能强大，使用灵活。可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。

除此之外，开发者还可以通过继承自ViewGroup来自定义自己的布局规则。

布局详解

LinearLayout（线性布局）

LinearLayout重点理解下面的两个属性：

• android:orientation
  orientation主要是用来约束其子控件的排列方式，主要有vertical（竖向排列）、horizontal（横向排列）两种排列方式。

LinearLayout.png

• android:weight
  weight也主要是针对其子控件来说的。他的意思是将剩余的空闲空间按照weight的比例分配给子控件，默认比例是0。

weight.png

所以在使用中我们一般会把 宽或者高设置为0dp 以直观的按照我们设置的比例来显示控件。

RelativeLayout（相对布局）

默认所有的子控件都显示在左上角，控件之间是根据相对关系来排列的，所以一般都需要为每一个控件都指定id，除非没有控件依赖于它。

• 在指定控件的哪一边：(注意：这些属性都需要有一个指定的id)
  layout_toRightOf 在指定控件的右边
  layout_toLeftOf 在指定控件的左边
  layout_above 在指定控件的上边
  layout_below 在指定控件的下边
• 和指定控件的对齐方式(注意：这些属性都需要有一个指定的id)
  layout_alignRight 与指定控件右对齐
  layout_alignLeft 与指定控件左对齐
  layout_alignTop 与指定控件上对齐
• 子控件与父容器的对齐关系(这些属性的值为true或false)
  layout_centerInParent 与父容器中间对齐 pairunte
  layout_centerVertical 与父容器竖向中心对齐
  layout_centerHorizontal 与父容器横向中心对齐
  layout_alignParentLeft 与父容器左边对齐
  layout_alignParentTop 与父容器上边对齐
  layout_alignParentRight 与父容器右边对齐
  layout_alignParentBottom 与父容器下边对齐

RelativeLayout.png

FrameLayout（帧布局）

帧布局的所有控件都是以层叠的方式排列的，所以后添加的控件有可能会挡住先添加的控件。
layout_gravity(设置给子控件，调整控件在容器内的重心)

FrameLayout.png

GridLayout（网格布局）

• 常用属性
  rowCount：总行数
  columnCount：总列数
  layout_row：在网格第几行
  layout_column：在网格第几列
  layout_rowWeight：行权重
  layout_columnWeight：列权重
  layout_rowSpan：跨行数
  layout_columnSpan：跨列数
• 效果图

GridLayout.png

上图的layout_rowWeight和layout_columnWeight均为1，行列都评分空间；“=”的layout_rowSpan=2表示跨两行，“0”的layout_columnSpan=2表示跨2列。

ConstraintLayout（约束布局）

• 相对定位
  layout_constraintLeft_toLeftOf
  layout_constraintLeft_toRightOf
  layout_constraintRight_toLeftOf
  layout_constraintRight_toRightOf
  layout_constraintTop_toTopOf
  layout_constraintTop_toBottomOf
  layout_constraintBottom_toTopOf
  layout_constraintBottom_toBottomOf
  layout_constraintBaseline_toBaselineOf
  layout_constraintStart_toEndOf
  layout_constraintStart_toStartOf
  layout_constraintEnd_toStartOf
  layout_constraintEnd_toEndOf

constrainXXX代表的是自己的方位，toXXX代表相对于目标控件的方位。例如：layout_constraintLeft_toRightOf="@+id/tv1"表示自己的左边在tv1的右边。
其中Baseline是指文本的基线：

baseline.png

• 角度定位
  app:layout_constraintCircle="@+id/TextView1"
  app:layout_constraintCircleAngle="120"（角度）
  app:layout_constraintCircleRadius="150dp"（距离）

ConstrainCircle.png

TextView2的中心在TextView1的中心的120度，距离为150dp

• goneMargin
  用于约束的控件可见性被设置为gone的时候使用的margin值
  layout_goneMarginStart
  layout_goneMarginEnd
  layout_goneMarginLeft
  layout_goneMarginTop
  layout_goneMarginRight
  layout_goneMarginBottom

goneMargin.png

app:layout_goneMarginLeft="10dp"
app:layout_goneMarginTop="10dp"

• 居中

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

• 偏移
  除了使用layout_marginXXX之外，ConstraintLayout还提供了另外一种偏移的属性：

//取值范围为：0～1
app:layout_constraintHorizontal_bias //水平偏移
app:layout_constraintVertical_bias //垂直偏移

• 宽高比
  当宽或高至少有一个尺寸被设置为0dp时，可以用下面属性设置宽高比：

app:layout_constraintDimensionRatio="1:1"//宽:高=1:1
app:layout_constraintDimensionRatio="H,2:3"//指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"//指的是 宽:高=2:3

• 链

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent" />

链.png

一条链的第一个控件是这条链的链头，可以在链头中设置 layout_constraintHorizontal_chainStyle来改变链的样式。chains提供了3种样式，分别是：
CHAIN_SPREAD —— 展开元素 (默认)；
CHAIN_SPREAD_INSIDE —— 展开元素，但链的两端贴近parent；
CHAIN_PACKED —— 链的元素将被打包在一起。

chainStyle.png

如果我们把宽度都设为0dp，这个时候就可以设置权重来创建一个权重链：

layout_constraintHorizontal_weight
layout_ constraintVertical_weight

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2"
        app:layout_constraintHorizontal_weight="2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="3" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="4" />

weight.png

• GuideLine
  Guildline像辅助线一样，在预览的时候帮助你完成布局（实际不会显示在界面上）。
  Guildline的主要属性：
  orientation： 垂直vertical，水平horizontal
  layout_constraintGuide_begin ：开始位置
  layout_constraintGuide_end ：结束位置
  layout_constraintGuide_percent ：距离顶部的百分比(orientation = horizontal时则为距离左边)

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

guideline.png

Github地址：https://github.com/WangFion/android-layout-demo