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

article/2025/9/28 0:25:30

目录

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"?>
<LinearLayoutxmlns: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"><Buttonandroid:text="按钮1"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"/><Buttonandroid:text="按钮2"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"/><Buttonandroid: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"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:layout_width="150dp"android:layout_height="150dp"android:layout_alignParentLeft="true"android:text="左上角"android:textSize="30dp" /><Buttonandroid:layout_width="150dp"android:layout_height="150dp"android:layout_alignParentBottom="true"android:text="左下角"android:textSize="30dp" /><Buttonandroid:layout_width="150dp"android:layout_height="150dp"android:layout_alignParentRight="true"android:text="右上角"android:textSize="30dp" /><Buttonandroid:layout_width="150dp"android:layout_height="150dp"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:text="右下角"android:textSize="30dp" /><Buttonandroid: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"?>
<FrameLayoutxmlns: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"><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:background="@color/purple_700"tools:ignore="SpeakableTextPresentCheck" /><TextViewandroid:layout_width="157dp"android:layout_height="162dp"android:background="@color/purple_200"tools:ignore="SpeakableTextPresentCheck" /><TextViewandroid: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"?>
<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:stretchColumns="2"><TableRow><Buttonandroid:layout_column="0"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮1"android:textSize="30sp"/><Buttonandroid:layout_column="1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮2"android:textSize="30sp"/></TableRow><TableRow><Buttonandroid:layout_column="1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮3"android:textSize="30sp"/><Buttonandroid:layout_column="2"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮4"android:textSize="30sp"/></TableRow><TableRow><Buttonandroid:layout_column="2"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮5"android:textSize="30sp"/></TableRow><TableRow><Buttonandroid:layout_column="0"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮6"android:textSize="30sp"/><Buttonandroid: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" ><TextViewandroid:layout_columnSpan="4"android:layout_gravity="fill"android:layout_marginLeft="5dp"android:layout_marginRight="5dp"android:background="#D5DEDF"android:text="0"android:textSize="50sp" /><Buttonandroid:layout_columnSpan="2"android:layout_gravity="fill"android:text="回退" /><Buttonandroid: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="/" /><Buttonandroid: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.ConstraintLayoutxmlns: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"><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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)


http://chatgpt.dhexx.cn/article/9KypCinI.shtml

相关文章

android布局技巧：创建高效布局

android布局技巧：创建高效布局

Android UI工具包提供了一些布局管理器&#xff0c;它们使用起来相当容易&#xff0c;而且&#xff0c;大多数的时候&#xff0c;你只需要使用它们最基本的特征来实现UI。 执着于基本特征的使用对于创建UI来说&#xff0c;往往不是最高效的。一个常见的例子就是滥用LinearLayo…
阅读更多...
安卓7大基本布局

安卓7大基本布局

一&#xff1a;基础知识 1.Android七大基本布局分别是&#xff1a; LinearLayout(线性布局)、TableLayout(表格布局)、RelativeLayout(相对布局)、FrameLayout(层布局)、AbsoluteLayout(绝对布局)、GridLayout(网格布局)、ConstraintLayout(约束布局)。 2.七大基本布局的继承…
阅读更多...
Android的六大基本布局

Android的六大基本布局

线性布局 LinearLayout相对布局 RelativeLayout表格布局 TableLayout绝对布局 AbsoluteLayout网格布局 GridLayout帧布局 FrameLayout 布局通用属性 属性名称功能描述android:id设置布局的标识android:layout_width设置布局的宽度android:layout_height设置布局的高度android:…
阅读更多...
安卓布局详解：探索各种布局方式

安卓布局详解：探索各种布局方式

文章目录 前言一、线性布局&#xff08;LinearLayout&#xff09;二、相对布局&#xff08;RelativeLayout&#xff09;三、帧布局&#xff08;FrameLayout&#xff09;四、表格布局&#xff08;TableLayout&#xff09;五、约束布局&#xff08;ConstraintLayout&#xff09;六…
阅读更多...
微信小程序页面布局——上中下结构

微信小程序页面布局——上中下结构

小程序页面布局——上中下结构 内容简述 上中下结构&#xff1a;头脚固定中间滚动框 使用UI框架&#xff1a;Vant Weapp(引入安装参考) 为了方便&#xff0c;使用了less生成wxss&#xff0c;所以展示的是less代码&#xff0c;有需要可以看&#xff1a;https://www.jianshu.com…
阅读更多...
微信小程序中的常用布局方式（总结）

微信小程序中的常用布局方式（总结）

参照Android开发&#xff0c;总结了微信小程序的常用的两种布局方式&#xff1a;1、线性布局&#xff08;横版、竖版&#xff09;。2、网格布局。 效果图如下&#xff1a; 一、网格布局 &#xff08;1&#xff09;固定Item个数的网格布局&#xff0c;主要用于功能模块入口展示…
阅读更多...
微信小程序页面布局

微信小程序页面布局

一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局&#xff0c;是W3c在2009年提出的一种新的方案&#xff0c;可以简便&#xff0c;完整&#xff0c;响应式的实现各种页面布局。 2.Flex布局提供了元素在容器中的对齐&#xff0c;方向以及顺序&#xff0c;甚至他们可以是动…
阅读更多...
html的网格布局

html的网格布局

网格布局 学习总结&#xff1a; 从7.19进入csdn夏令营后&#xff0c;感谢各位老师的辛苦讲解与发布任务&#xff0c;我对C1能力认证中web方面的知识有了极大的领会。学习过程中既温习了在校学习的知识&#xff0c;也学到了诸如网格布局&#xff0c;动画&#xff0c;less&#x…
阅读更多...
网格布局（grid布局）

网格布局（grid布局）

网格布局 他可以将页面分为多个网格&#xff0c;可以任意组合不同的网格 &#xff0c;做出各种各样的布局。 网格布局为二维性质的。 设置行、列间距 grid-row-gap:1rem ;行间距 ** grid-column-gap: 1rem ;列间距** ** grid-gap: 1rem;**设置行列间距 设置容器的列宽和与…
阅读更多...
CSS布局—网格布局Grid（一）

CSS布局—网格布局Grid（一）

CSS网格可以定义由行和列组成的二维布局&#xff0c;然后将元素放置到网格中。有些元素可能只占据网格的一个单元&#xff0c;另一些元素则可能占据多行或多列。网格的大小既可以精确定义&#xff0c;也可以根据自身内容自动计算。你既可以将元素精确地放置到网格某个位置&…
阅读更多...
CSS Grid 网格布局教程

CSS Grid 网格布局教程

一、概述 网格布局&#xff08;Grid&#xff09;是最强大的 CSS 布局方案。 它将网页划分成一个个网格&#xff0c;可以任意组合不同的网格&#xff0c;做出各种各样的布局。以前&#xff0c;只能通过复杂的 CSS 框架达到的效果&#xff0c;现在浏览器内置了。 上图这样的布局&…
阅读更多...
css 网格布局

css 网格布局

简介&#xff1a; 网格是由一系列水平及垂直的线构成的一种布局模式。一个网格通常具有许多的列&#xff08;column&#xff09;与行&#xff08;row&#xff09;&#xff0c;以及行与行、列与列之间的间隙&#xff0c;这个间隙一般被称为沟槽&#xff08;gutter&#xff09;。…
阅读更多...
微信小程序的页面布局（1）

微信小程序的页面布局（1）

微信小程序的页面布局主要用到两个文件&#xff0c;wxml&#xff08;摆放各种组件&#xff09;和wxss&#xff08;设计排版&#xff09; 因此&#xff0c;我们首先将要用到的组件按照一定的组织排序扔进wxml文件里&#xff0c;什么叫组织排序呢&#xff0c;这里注意就是组件与组…
阅读更多...
微信小程序~利用模板实现《福利》页面的网格布局

微信小程序~利用模板实现《福利》页面的网格布局

什么是模板&#xff1f; 在微信小程序中&#xff0c;使用template来表示模板 为什么要使用模板&#xff1f; 使用模板文件能够降低代码重构&#xff0c;提高代码的复用性。 如何使用&#xff1f; 页面内使用&#xff1a;在页面内直接声明一个template并且引用代码如下&#xf…
阅读更多...
【HTML/CSS】网格布局小案例

【HTML/CSS】网格布局小案例

代码如下&#xff08;可以改动精简一些&#xff0c;我不想改了&#xff0c;改一下估计50行就够了&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compati…
阅读更多...
微信小程序第三天（布局：栅格布局）

微信小程序第三天（布局：栅格布局）

我根据微信小程序的特点弄了一套简单的栅格布局。 .row {display: block;margin: 0px; }.col {display: flex;font-family: -apple-system-font, "Helvetica Neue", sans-serif;font-size: 17px; }.col>.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7,…
阅读更多...
HTML5 网页栅格布局

HTML5 网页栅格布局

栅格布局&#xff1a;也称为网格系统&#xff0c;运用固定的格子设计版面布局。 Demo <!DOCTYPE HTML> <html><head><meta charset"UTF-8"/><title>栅格布局</title><style type"text/css">/*清空所有标签外边…
阅读更多...
小程序宫格布局

小程序宫格布局

之前写小程序的时候用了iview的宫格&#xff0c;好像跳过了很多要自己写的坑&#xff0c;今天测试了下&#xff0c;总结一下方法。注意小程序中flex和grid的用法有很多不一眼&#xff01;小心甄别&#xff01; 1.使用iview 去iview weapp github 引入index.json {"us…
阅读更多...
Grid 布局 - 网格布局

Grid 布局 - 网格布局

目录 一、什么是Grid布局 二、容器属性值 2.1 grid-template-rows和grid-template-columns 2.1.1 grid-template-columns 2.1.2 grid-template-rows 2.2 row-grap和column-grap 2.2.1 row-grap 2.2.2 column-grap 2.3 grid-template-area 2.4 grid-auto-flow 2.5 just…
阅读更多...
微信小程序----Grid（九宫格）（flex实现九宫格布局）

微信小程序----Grid（九宫格）（flex实现九宫格布局）

效果二维码 效果图 WXML <view class"section"><view class"tui-table-view"><view class"tui-col-3"><icon class"iconfont icon-shouye"></icon><view>Home</view></view><vie…
阅读更多...
推荐文章

Copyright @ 2022~2023