安卓的常用布局看一篇就够了-Toy模板网

这篇具有很好参考价值的文章主要介绍了安卓的常用布局看一篇就够了。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1-1 布局通用的属性

1-2 线性布局（LinearLayout）

1、常见属性：

2、线性布局的例子：

1-3 相对布局（RelativeLayout）

1、常见属性：

2、相对布局的例子：

1-4 帧布局（FrameLayout）

1.常用属性

2、帧布局例子：

1-5 表格布局（TableLayout）

1、常见属性：

2、表格布局例子：

1-6 网格布局（GridLayout）

1、常用属性：

2、网格布局的例子

1-7 约束布局ConstraintLayout

1、ConstraintLayout例子:

1-1 布局通用的属性

属性名称	功能
android:id	设置布局的标识
android:layout_width	设置布局的宽度
android:layout_height	设置布局的高度
android:layout_margin	设置当前布局与屏幕边界或与周围控件的距离
android:background	设置布局的背景
android:padding	设置当前布局与该布局中控件的距离

1-2 线性布局（LinearLayout）

线性布局就是在该布局内的子控件按竖直或者按水平排列。

1、常见属性：

属性	功能
android:orientation	设置布局内控件的排列顺序
android:weight	在布局内设置控件权重，属性值可直接写int

注：

android:orientation属性有两个参数：
（1） vertical:表示在LinearLayout布局中从上到下竖直排序。

（2）horizontal：表示在LinearLayout布局中从左到右水平排序。

android:weight属性就是在LinearLayout布局中的控件的大小按比例来分配。

2、线性布局的例子：

如下代码：将按钮竖直排列，并且按钮的高度按1：1：2的大小分配

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:text="按钮1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
    <Button
        android:text="按钮2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
    />
    <Button
        android:text="按钮3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        />
</LinearLayout>

下面是效果图：

安卓布局,UI,android

1-3 相对布局（RelativeLayout）

相对布局是通过以父容器或者子控件为参照物的方式来指定子控件的位置。

1、常见属性：

属性名称	功能
android:layout_centerInParent	设置当前控件位于父布局的中央位置
android:layout_centerVertical	设置当前控件位于父布局的垂直居中位置
android:layout_centerHorizontal	设置当前控件位于父控件的水平居中位置
android:layout_above	设置当前控件位于某控件上方
android:layout_below	设置当前控件位于某控件下方
android:layout_toLeftOf	设置当前控件位于某控件左侧
android:layout_toRightOf	设置当前控件位于某控件右侧
android:layout_alignParentTop	设置当前控件是否与父控件顶端对齐
android:layout_alignParentLeft	设置当前控件是否与父控件左对齐
android:layout_alignParentRight	设置当前控件是否与父控件右对齐
android:layout_alignParentBottom	设置当前控件是否与父控件底端对齐
android:layout_alignTop	设置当前控件的上边界与某控件的上边界对齐
android:layout_alignBottom	设置当前控件的下边界与某控件的下边界对齐
android:layout_alignLeft	设置当前控件的左边界与某控件的左边界对齐
android:layout_alignRight	设置当前控件的右边界与某控件的右边界对齐

2、相对布局的例子：

效果图：

安卓布局,UI,android

代码如下：

<?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:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentLeft="true"
        android:text="左上角"
        android:textSize="30dp" />

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentBottom="true"
        android:text="左下角"
        android:textSize="30dp" />

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentRight="true"
        android:text="右上角"
        android:textSize="30dp" />
    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="右下角"
        android:textSize="30dp" />
    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:text="中间"
        android:textSize="30dp" />

</RelativeLayout>

1-4 帧布局（FrameLayout）

这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式。

1.常用属性

属性名称	功能
android:foreground	设置帧布局容器的前景图像
android:foregroundGravity	设置前景图像显示的位置

2、帧布局例子：

安卓布局,UI,android

代码:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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"
    android:foreground="@mipmap/ic_launcher"
    android:foregroundGravity="left">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/purple_700"
        tools:ignore="SpeakableTextPresentCheck" />

    <TextView
        android:layout_width="157dp"
        android:layout_height="162dp"
        android:background="@color/purple_200"
        tools:ignore="SpeakableTextPresentCheck" />
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/teal_200"/>

</FrameLayout>

1-5 表格布局（TableLayout）

表格布局（TableLayout是继承LinearLayout）就是采用行、列的形式来管理布局控件。

1、常见属性：

属性名称	功能
android:layout_column	设置该控件显示位置，如android:Layout_column="1"表示第2个位置显示
android:layout_span	设置该控件占几行，默认是1行
android:stretchColumns	设置可被拉伸的列。
android:shrinkColumns	设置可被收缩的列。
android:collapseColumns	设置可被隐藏的列。

注意：列的宽度是由该列中最宽那个决定

2、表格布局例子：

效果图：

安卓布局,UI,android

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="2">
    <TableRow>
        <Button
            android:layout_column="0"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="按钮1"
            android:textSize="30sp"
            />
        <Button
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="按钮2"
            android:textSize="30sp"
            />
    </TableRow>
    <TableRow>
        <Button
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="按钮3"
            android:textSize="30sp"
            />
        <Button
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="按钮4"
            android:textSize="30sp"
            />
    </TableRow>
    <TableRow>
      
        <Button
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="按钮5"
            android:textSize="30sp"
            />
    </TableRow>
    <TableRow>
        <Button
            android:layout_column="0"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="按钮6"
            android:textSize="30sp"
            />
        <Button
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="按钮7"
            android:textSize="30sp"
            />
    </TableRow>
</TableLayout>

1-6 网格布局（GridLayout）

1、常用属性：

属性名称	功能
android:layout_gravity	用来设置该View相对与父View的位置
android:orientation	设置布局内控件的排列顺序
android:columnCount	设置列数
android:rowCount	设置行数
android:layout_columnSpan	横跨几列
android:layout_rowSpan	横跨几行
android:layout_column	第几列
android:layout_row	第几行

2、网格布局的例子

效果图：

安卓布局,UI,android

代码：

<?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:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6" >

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#D5DEDF"
        android:text="0"
        android:textSize="50sp" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />

    <Button android:text="+" />

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />

    <Button android:text="-" />

    <Button android:text="4" />

    <Button android:text="5" />

    <Button android:text="6" />

    <Button android:text="*" />

    <Button android:text="7" />

    <Button android:text="8" />

    <Button android:text="9" />

    <Button android:text="/" />

    <Button
        android:layout_width="wrap_content"
        android:text="." />

    <Button android:text="0" />

    <Button android:text="=" />

</GridLayout>

1-7 约束布局ConstraintLayout

ConstraintLayout 是 Android 中的一个布局容器，它通过使用约束条件来定义视图之间的相对位置和大小关系。它的灵活性和性能使得它成为 Android 开发中常用的布局方式之一。

ConstraintLayout 的主要特点包括：

相对定位：可以通过约束条件将视图相对于父容器或其他视图进行定位，而不需要使用嵌套布局。
弹性尺寸：可以通过设置约束条件来调整视图的大小和比例，以适应不同屏幕尺寸和方向的变化。
连接线：可以使用连接线（Guideline）来辅助布局，例如将视图与屏幕的边缘或其他视图的对齐。
链式布局：可以使用链式约束来创建视图链，比如水平或垂直的线性链。

ConstraintLayout例子:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:background="@color/black"
        android:id="@+id/textView3"
        android:layout_width="86dp"
        android:layout_height="75dp"
        android:text="Hello"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.99" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="86dp"
        android:background="@color/purple_500"
        android:layout_height="75dp"
        android:text="Hello"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="75dp"
        android:layout_height="86dp"
        android:background="@color/purple_200"
        android:text="Hello"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="86dp"
        android:layout_height="75dp"
        android:text="Hello"
        android:background="@color/teal_200"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="86dp"
        android:layout_height="75dp"
        android:background="@color/teal_700"
        android:text="Hello"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.99" />



</androidx.constraintlayout.widget.ConstraintLayout>

结果：

安卓布局,UI,android