【Android程序开发】-Android六种布局详解

Android中的布局分为六种，分别是

• 相对布局 RelativeLayout
• 线性布局LinearLayout
• 表格布局TableLayout/GridLayout
• 约束布局ConstraintLayout
• 帧布局FrameLayout
• 绝对布局AbsoluteLayout

---

• 所有的布局类⾥⾯都维护⼀个LayoutParams extends MarginLayoutParmas⽤于管理当前这个布局容器⼦控件的布局

良好的布局设计对UI界面至关重要,下面简单介绍一下这六种布局：

• 相对布局

在Eclipse中开发Android程序时，默认采用的就是相对布局。相对布局通常有两种形式，一种是相对于容器而言的，一种是相对于控件而言的，为了能准确定位布局中的控件，相对布局提供了很多属性。

属性	效果
android:layout_centerHrizontal	水平居中
android:layout_centerVertical	垂直居中
android:layout_centerInparent	相对于父元素完全居中
------------------------------------------------	---------------------------
android:layout_alignParentBottom	贴紧父元素的下边缘
android:layout_alignParentLeft	贴紧父元素的左边缘
android:layout_alignParentRight	贴紧父元素的右边缘
android:layout_alignParentTop	贴紧父元素的上边缘
android:layout_alignWithParentIfMissing	如果对应的兄弟元素找不到的话就以父元素做参照物
android:layout_below	在某元素的下方
android:layout_above	在某元素的的上方
android:layout_toLeftOf	在某元素的左边
android:layout_toRightOf	在某元素的右边
------------------------------------	-------------------------------
android:layout_alignTop=“@id/v1”	本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft=“@id/v1”	本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom=“@id/v1”	本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight=“@id/v1”	本元素的右边缘和某元素的的右边缘对齐
-------------------------------	-------------------------------
android:layout_marginBottom	离某元素底边缘的距离
android:layout_marginLeft	离某元素左边缘的距离
android:layout_marginRight	离某元素右边缘的距离
android:layout_marginTop	离某元素上边缘的距离

---

• 线性布局

线性布局是Android中较为常用的布局方式，它使用<LinearLayout>标签表示。线性布局主要有两种形式，一种是水平线性布局，一种是垂直线性布局。

水平线性布局
垂直线性布局

线性布局的基本属性:

属性	效果
layout_marginLeft、layout_marginStart	左边距
layout_marginRight、layout_marginEnd	右边距
layout_marginTop	上边距
layout_marginBottom	下边距
layout_weight	权重按⽐例分配
----------------------	------------------
android:orientation="vertical"(在容器里面添加）	水平方向改为垂直方向

• 表格布局

在表格布局TableLayout中，行数由TableRow对象控制的，即布局中有多少TableRow对象，就有多少行。每个TableRow中可以放置多个组件。列数由最宽的单元格决定，假如第一个TableRow有两个控件，第二个TableRow有三个控件，那这个TableLayout就有三列。在控件中通过android:layout_column属性指定具体的列数，该属性的值从“0”开始，表示第一列。下面看一个表格布局:

image

• 约束布局

约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。
1.左右上下间距20

 <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_constraintEnd_toEndOf="parent" 
       app:layout_constraintBottom_toBottomOf="parent"
       
       android:layout_marginLeft="20dp"
       android:layout_marginTop="20dp"
       android:layout_marginRight="20dp"
       android:layout_marginBottom="20dp"
       />

约束布局约束子视图的左边、右边、上边、下边分别与父视图的左边、右边、上边、下边对齐，且间距均为20dp

image.png

2.实现宽高成比例

app:layout_constraintDimensionRatio="h,1^2" //宽和⾼的⽐例
app:layout_constraintDimensionRatio=“w,1^2” //⾼和宽的⽐例

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"
        />

image.png

• 帧布局
  帧布局是Android布局中最简单的一种，帧布局为每个加入其中的控件创建一个空白区域（称为一帧，每个控件占据一帧）。采用帧布局方式设计界面时，只能在屏幕左上角显示一个控件，如果添加多个控件，这些控件会按照顺序在屏幕的左上角重叠显示，且会透明显示之前控件的文本，如图所示:

image

从图中可以看出，界面中添加了3个Button控件，Button1是最先添加的大按钮，Button2是接着添加的较小按钮，Button3是最后添加的小按钮，这三个控件叠加显示在屏幕的左上角。

• 绝对布局
  绝对布局需要通过指定x、y坐标来控制每一个组件的位置，放入该布局的组件需要通过android:layout_x和android:layout_y两个属性指定其准确的坐标值，并显示在屏幕上，布局如图所示：

image

从图我们就可以看出，组件是以屏幕左上角为坐标原点，将Button1的坐标设置为（50,50），Button2的坐标设置为（200,150），根据这个坐标精确定位组件在屏幕中的位置