Android 常用布局 LinearLayout+RelativeLayout+FrameLayout+ConstraintLayout

一、先看效果图

1.LinearLayout：线性布局
（1）水平排列线性布局



（2）垂直排列线性布局



(3)权重分配2:1



    优点是简单，用起来很容易；权重分配非常实用。
    缺点也是简单，实现复杂的布局往往需要一层套一层。

2.RelativeLayout ：相对布局



    优点是功能强大，设置上下左右相对位置很直观，可以用较少层嵌套实现复杂布局。
    缺点是无法实现权重分配，并且无法相对于屏幕百分比设置位置。

3.FrameLayout：帧布局



    优点是简单，后面的控件会覆盖前一个控件，可以控制控件的层次
    缺点是功能单一

4.ConstraintLayout：约束布局



优点是可以实现LinearLayout的权重布局效果，可以实现RelativeLayout的相对布局效果，可以实现FrameLayout的遮罩效果，可以实现百分比布局效果。非常的强大，号称“一层布局实现所有布局效果”，这也是Google官方推荐的布局。缺点我暂时没有发现，留给大家评论了。

二、代码实现

1.LinearLayout：线性布局
（1）水平排列线性布局



（2）垂直排列线性布局



（3）权重分配2:1



2.RelativeLayout ：相对布局
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<Button
android:id="@+id/button1"
android:text="在父布局中居中"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/button2"
android:text="贴着父布局顶部"
android:layout_alignParentTop="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/button3"
android:text="贴着父布局底部"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="@+id/button4"
android:text="贴着父布局左边"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="@+id/button5"
android:text="贴着父布局右边"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="@+id/button6"
android:text="在按钮下面，水平居中"
android:layout_below="@id/button1"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="@+id/button7"
android:text="在按钮上面，水平居中"
android:layout_above="@+id/button1"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="@+id/button8"
android:text="在按钮左边，垂直居中"
android:layout_toLeftOf="@+id/button1"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="@+id/button9"
android:text="在按钮右边，垂直居中"
android:layout_toRightOf="@id/button1"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>


3.FrameLayout：帧布局



4.ConstraintLayout：约束布局
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="居中效果"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左上角"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="右上角"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent" />

<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左下角"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="右下角"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="在按钮上面"
app:layout_constraintBottom_toTopOf="@id/button1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="在按钮下面"
app:layout_constraintTop_toBottomOf="@id/button1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="在按钮左边"
app:layout_constraintRight_toLeftOf="@id/button1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="在按钮右边"
app:layout_constraintLeft_toRightOf="@id/button1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<Button
android:id="@+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="水平20%，垂直20%"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.20"
app:layout_constraintVertical_bias="0.20"
/>
</android.support.constraint.ConstraintLayout>




三、详解

1.LinearLayout：线性布局
    一种横行排列，一种竖向排列，通过属性orientation控制
（1）若要设置为水平排列，添加属性：
android:orientation="horizontal"（2）若要设置为竖向排列，添加属性：
android:orientation="vertical"    如果不添加orientation属性，LinearLayout默认为水平排列。
（3）权重分配
    如果给一个线性布局内的控件分配了权重，会优先给没有分配权重的控件分配宽（或高），分配完后整个屏幕宽（或高）剩下的部分由分配了权重的控件按权重分配



    如上图布局，先给没有权重的按钮分配了宽，再把剩下的部分按2:1的权重分配给了有权重的按钮。

2.RelativeLayout ：相对布局
    根据控件之间的相对关系决定位置，如果不设置相对关系，默认位置在屏幕左上角。
（1）根据控件和父布局的相对关系决定位置，有七个属性：
a.在父布局中居中
android:layout_centerInParent="true"
b.贴着父布局顶部android:layout_alignParentTop="true"c.贴着父布局底部
android:layout_alignParentBottom="true"d.贴着父布局左边
android:layout_alignParentLeft="true"e.贴着父布局右边
android:layout_alignParentRight="true"f.在父布局中水平居中
android:layout_centerHorizontal="true"g.在父布局中垂直居中
android:layout_centerVertical="true"(2)根据控件和控件间的相对关系决定位置，有四个属性：
a.在控件的下面
android:layout_below="@id/button1"b.在控件的上面
android:layout_above="@+id/button1"c.在控件的左边
android:layout_toLeftOf="@+id/button1"d.在控件的右边
android:layout_toRightOf="@id/button1"

3.FrameLayout：帧布局
    每个控件都从左上角开始，后面的控件会覆盖前面的控件

4.ConstraintLayout：约束布局    
    根据控件的上下左右约束关系确定位置，如果不添加任何约束，默认位置也在屏幕左上角。



    每一个控件都有上下左右四个点，可以为控件添加点对点的约束



    父布局同样有上下左右四个点
（1）控件左边的点和父布局左边的点添加约束的写法为：
app:layout_constraintLeft_toLeftOf="parent"    第一个layout_constraintLeft_toLeftOf中的第一个Left是指控件左边的点，第二个Left是指父布局左边的点。那么这一句的意思就是控件左边的点被父布局左边的点约束。
    同理，控件右边的点和父布局右边的点添加约束的写法为：
app:layout_constraintRight_toRightOf="parent"    控件上面的点和父布局上面的点添加约束的写法为：
app:layout_constraintTop_toTopOf="parent"
    控件下面的点和父布局下面的点添加约束的写法为：
app:layout_constraintBottom_toBottomOf="parent"    当一个控件上下左右都被父布局上下左右约束的时候，控件位置位于父布局中心。
（2）当一个控件左右两个点（或上下两个点）只有其中一个点添加了约束，则贴着有约束的这一边。
位于左上角
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" 位于右上角：
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"位于左下角：
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"位于右下角：
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"（3）控件和控件的点添加约束实现相对布局的效果a.在按钮上面



    将控件下面的点和“按钮”上面的点添加约束
app:layout_constraintBottom_toTopOf="@id/button1"
 b.在按钮下面



    将控件上面的点和“按钮”下面的点添加约束

app:layout_constraintTop_toBottomOf="@id/button1"c.在按钮左边



    将控件右边的点和“按钮”左面的点添加约束

app:layout_constraintRight_toLeftOf="@id/button1"d.在按钮右边



    将控件上面的点和“按钮”下面的点添加约束

app:layout_constraintLeft_toRightOf="@id/button1"

(4)百分比布局
    当一个控件添加左右约束之后，可以通过水平百分比设置水平相对于左右约束的位置，属性是layout_constraintHorizontal_bias，左边为0，右边为1，设置水平20%的属性写法为：
app:layout_constraintHorizontal_bias="0.20"    同理，当一个控件添加上下约束之后，通过layout_constraintVertical_bias设置垂直百分比，上面为0，下面为1
app:layout_constraintVertical_bias="0.20"
(5)ConstraintLayout实现权重布局



    先设置两个按钮“靠近的边”互相约束，再将按钮的宽度设置为0dp，就可以设置水平权重了，这时候控件宽度会按照两个控件“远离的边”的宽度分配权重。
那么同理可得垂直权重写法：