Android 学习总结--六大常用布局

最新推荐文章于 2024-06-17 14:21:30 发布

闪闪发光的星星

最新推荐文章于 2024-06-17 14:21:30 发布

阅读量1.1w

点赞数 11

文章标签：学习 android

本文链接：https://blog.csdn.net/qq_52452059/article/details/123534272

版权

一、相对布局（RelativeLayout）

二、线性布局(LinearLayout)

三、网格布局(GridLayout)

四、表格布局(TableLayout)

五、帧布局(FrameLayout)

六、约束布局(ConstraintLayout)

所有的UI元素都是通过View与ViewGroup构建的。而ViewGroup可作为容器盛装界面中的控件，可包含普通的View控件，也可包含ViewGroup,即ViewGroup可嵌套ViewGroup.

View 视图：

视图类View层次结构图

从上面的层次结构图，可以看出这些布局都直接或者间接继承自ViewGroup，因此它们也支持在ViewGroup中定义的属性，这些属性可以看作是布局的通用属性。

除此之外，就是各类布局的特殊属性。

一、相对布局（RelativeLayout）

相对布局可以设置某一个视图相对于其他视图的位置，即是以其他控件或父容器为参照物设置位置的。

特点：通过相对定位排列

常用属性：

案例：

代码：

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="147dp"
        android:layout_marginTop="176dp"
        android:text="Button" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginStart="30dp"
        android:layout_marginTop="279dp"
        android:layout_toEndOf="@+id/button4"
        android:text="Button" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="145dp"
        android:layout_marginBottom="152dp"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="28dp"
        android:layout_marginTop="288dp"
        android:text="Button" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="286dp"
        android:layout_marginEnd="48dp"
        android:text="Button" />


</RelativeLayout>

二、线性布局(LinearLayout)

线性布局是最常用的布局方式，可分为水平线性布局和垂直线性布局。

特点：以水平或垂直方向排列

常用属性：

案例：

代码：

<?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:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="130dp"
    android:divider="@drawable/divider_line"
    android:showDividers="end|middle|beginning"
   
    >

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#BE1E98E9"


        />
    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#0f0"
        />
    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00f"
        />

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#f00"
        tools:ignore="SpeakableTextPresentCheck" />
</LinearLayout>

三、网格布局(GridLayout)

网格布局是Android4.0新增的布局，它实现了控件的交错显示，能够避免因布局嵌套对设备性能的影响，更利于自由布局的开发。网格布局用一组无限细的直线将绘图区域分成行、列和单元，并指定控件的显示区域和控件在该区域的显示方式。

特点：实现了控件的交错显示

常用属性：

案例：

代码：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal"
    android:background="#FF03DAC5"
    >
    <Button android:text="/"
        android:layout_column="3"
        android:backgroundTint="#BEE3CD7D"/>
    <Button android:text="1"
        android:backgroundTint="#BEE3CD7D"/>
    <Button android:text="2"
        android:backgroundTint="#BEE38C7D"/>
    <Button android:text="3"
        android:backgroundTint="#BEE3CD7D"/>
    <Button android:text="*"
        android:backgroundTint="#BE6AE6C9"/>
    <Button android:text="4"
        android:backgroundTint="#BEE38C7D"/>
    <Button android:text="5"
        android:backgroundTint="#BEE3CD7D"/>
    <Button android:text="6"
        android:backgroundTint="#BE6AE6C9"/>
    <Button android:text="-"
        android:backgroundTint="#BEE3CD7D"/>
    <Button android:text="7"
        android:backgroundTint="#BE6AE6C9"/>
    <Button android:text="8"
        android:backgroundTint="#BEE3CD7D"/>
    <Button android:text="9"
        android:backgroundTint="#BEE38C7D"/>
    <Button
        android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:backgroundTint="#BE6AE6C9"
        android:text="+"
        />
    <Button android:text="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:backgroundTint="#BEE38C7D"/>
    <Button android:text="00"
        android:backgroundTint="#BEE3CD7D"/>
    <Button android:text="="
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:backgroundTint="#BED999E8"/>
</GridLayout>

四、表格布局(TableLayout)

表格布局将子元素的位置分配到行或列中，与网格布局不同的是，它不需要明确多少行、多少列。一个TableLayout由许多TableRow组成，每个TableRow都会定义一个Row。

特点：表格形式排列

常用属性：

表格布局属性

表格控件属性

案例：

代码：

<?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="match_parent"
    android:stretchColumns="1"
    android:collapseColumns="2"
    >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button/>
        <Button/>

    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button/>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button/>
        <Button/>
        <Button/>
        <Button/>
    </TableRow>
</TableLayout>

五、帧布局(FrameLayout)

帧布局用于在屏幕上创建一块空白区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层。因此也可以将FrameLayout称为堆栈布局，或框架布局。

特点：开辟空白区域，帧里的控件（层）叠加

常用属性：

案例：

代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@mipmap/pic1"
    android:foregroundGravity="left"

    >
   <Button
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#f00"
        />
    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#0f0"
        />

    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00f" />
</FrameLayout>

六、约束布局(ConstraintLayout)

约束布局是Android Studio2.2新添加的布局。它适合使用可视化的方式编写界面布局，优点是减少嵌套，优化布局，可以直接拖拽的方式布局；缺点也显而易见，修改的时候容易错乱，代码可读性变差。

特点：可视化编写布局

常用属性：

案例：

闪闪发光的星星

关注

11
点赞
踩
65

收藏

觉得还不错? 一键收藏
0
评论
Android 学习总结--六大常用布局

目录一、相对布局（RelativeLayout）二、线性布局(LinearLayout)三、网格布局(GridLayout)四、表格布局(TableLayout)五、帧布局(FrameLayout)六、约束布局(ConstraintLayout) 所有的UI元素都是通过View与ViewGroup构建的。而ViewGroup可作为容器盛装界面中的控件，可包含普通的View控件，也可包含ViewGroup,即ViewGroup可嵌套ViewGroup.View 视...
复制链接

扫一扫