【Android】安卓六大布局基本了解

Android六种布局:

• 1. 线性布局（LinearLayout）              按照垂直或者水平方向布局的组件

• 2. 帧布局（FrameLayout）                     组件从屏幕左上方布局组件

• 3. 表格布局（TableLayout）                按照行列方式布局组件

• 4. 绝对布局（AbsoluteLayout）        按照绝对坐标来布局组件

• 5. 相对布局（RelativeLayout）          相对其它组件的布局方式

• 6. 约束布局 （ConstraintLayout）    按照约束布局组件

• 注: wrap_content: 表示该组件的大小与内容自适应

•      match_parent:  表示该组件的大小与父组件大小一致

• ---

1. 线性布局（LinearLayout）
线性布局，有两种排法：
    从左到右
                        android:orientation=”horizontal”
    从上到下
                         android:orientation=”vertical”

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <!--vertical: 垂直的方式排列-->


    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <!--纵向水平布局-->

        <Button
            android:id="@+id/button12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button15"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

</LinearLayout>

 以上是由一个全局的 垂直(vertical)线性布局 以及一个局部的 横向(horizontal)线性布局 组成

 

---

2. 帧布局（FrameLayout）  

           帧布局会按照添加顺序层叠在一起，默认层叠在左上角位置. 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="320dp"
        android:layout_height="302dp"
        app:srcCompat="@android:color/background_dark" />

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="267dp"
        android:layout_height="255dp"
        app:srcCompat="@android:color/holo_red_dark" />

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="211dp"
        android:layout_height="198dp"
        app:srcCompat="@android:color/holo_blue_dark" />

    <ImageButton
        android:id="@+id/imageButton4"
        android:layout_width="156dp"
        android:layout_height="138dp"
        app:srcCompat="@android:color/holo_green_dark" />
</FrameLayout>

 

---

3. 表格布局（TableLayout）

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_weight="wrap_content"
        android:layout_height="wrap_content"
        android:text="站表格的一行"/>
    <TableRow>
        <!--Tablerow 表示单独行在,在单独行内有以下对象-->
        <Button
            android:layout_weight="wrap_content"
            android:layout_height="wrap_content"
            android:text="对象1"/>
        <Button
            android:layout_weight="wrap_content"
            android:layout_height="wrap_content"
            android:text="对象2"/>
        <Button
            android:layout_weight="wrap_content"
            android:layout_height="wrap_content"
            android:text="对象3"/>

    </TableRow>

</TableLayout>

 

 TableLayout常用的属性：
        android:layout_column        表示当前控件在第几列
        android:layout_span            表示合并单元格个数

---

4. 绝对布局（AbsoluteLayout）

 

注： 难以实现多分辨率适配，不建议使用,在非定制需求项目，无需了解使用。

原因:需要对应运行的系统上的设备的对应分辨率来设置 布局的大小以及控件的坐标位置

---

5. 相对布局（RelativeLayout）

有三种不同表示是方式的属性

属性值是true或false

    android:layout_centerHrizontal          水平居中
    android:layout_centerVertical             垂直居中
    android:layout_centerInparent            相对于父元素完全居中。
    android:layout_alignParentBottom     位于父元素的下边缘
    android:layout_alignParentTop           位于父元素的上边缘
    android:layout_alignParentLeft           位于父元素的左边缘
    android:layout_alignParentRight        位于父元素的右边缘

属性值是”@id/*“

    android:layout_below            在某元素的下方
    android:layout_above            在某元素的上方
    andorid:layout_toRightOf      在某元素的右方
    android:layout_toLeftOf         在某元素的左方
    android:layout_alignBottom 和某元素下方对齐
    android:layout_alignTop       和某元素上方对齐
    android:layout_alignRight    和某元素右方对齐
    android:layout_alignLeft       和某元素左方对齐

属性值是数值  

    android:layout_marginLeft         离某元素左边缘的距离
    android:layout_marginRight      离某元素右边缘的距离
    android:layout_marginTop         离某元素上边缘的距离
    android:layout_marginBottom   离某元素下边缘的距离
以上三种，最常用的是第一第二种.

• 如果没有定义左右，那么默认在左边，如果没有定义上下，默认在上边。
• 相同位置，新定义的元素会覆盖旧的元素

• ---

 

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


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:textAllCaps="false"
        android:textColor="#0EBDAC"
        android:textSize="64sp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="2"
        android:textColor="#2196F3"
        android:textSize="64" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="3"
        android:textColor="#E91E63"
        android:textSize="64"
        tools:text="3" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="4"
        android:textColor="#FFEB3B"
        android:textSize="64"/>

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="5"
        android:textColor="#673AB7"
        android:textSize="64" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/textView7"
        android:layout_alignBottom="@+id/textView7"
        android:text="6"
        android:textColor="#3F51B5"
        android:textSize="64" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/textView7"
        android:layout_alignTop="@+id/textView7"
        android:text="7"
        android:textColor="#FA030303"
        android:textSize="64" />
</RelativeLayout>