安卓的常用布局看一篇就够了

目录

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>

下面是效果图: 

 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、 相对布局的例子:

效果图:

代码如下: 

<?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、帧布局例子:

代码: 

<?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、表格布局例子:

 效果图:

代码如下: 

<?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、网格布局的例子

效果图:

 代码:

<?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 的主要特点包括:

  1. 相对定位:可以通过约束条件将视图相对于父容器或其他视图进行定位,而不需要使用嵌套布局。

  2. 弹性尺寸:可以通过设置约束条件来调整视图的大小和比例,以适应不同屏幕尺寸和方向的变化。

  3. 连接线:可以使用连接线(Guideline)来辅助布局,例如将视图与屏幕的边缘或其他视图的对齐。

  4. 链式布局:可以使用链式约束来创建视图链,比如水平或垂直的线性链。

 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>

结果: 

参考:2.2.5 GridLayout(网格布局) | 菜鸟教程 (runoob.com)

约束布局的使用推荐看下面的文章(写得很好): 

【Android】ConstraintLayout约束布局最全解析_android constraintlayout_Teacher.Hu的博客-CSDN博客 

  • 13
    点赞
  • 67
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值