Android的六大基本布局

article/2025/9/28 1:04:07
  • 线性布局 LinearLayout
  • 相对布局 RelativeLayout
  • 表格布局 TableLayout
  • 绝对布局 AbsoluteLayout
  • 网格布局 GridLayout
  • 帧布局 FrameLayout

 布局通用属性

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

(一)线性布局 (LinearLayput)

线性布局是最常用的布局方式,可分为水平线性布局盒垂直线性布局

当垂直布局时,每一行就只有一个元素,多个元素一次垂直往下

当水平布局时,只有一行,没一个元素一次向右排列

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

常用属性:

控件属性功能描述
android:oriientation

布局中组件的排列方式

(有horizontal水平布局和vertical垂直布局)

android:gravity控制该组件在父容器里的对齐方式
android:layout_gravity控制该组件咋父容器里的对齐方式
android:layout_weight权重,用来等比例划分区域
android:divider分割线
android:showDividers

设置分割线所在的位置none(无) beginning(开始)

end(结束) minddle(每两个组件间)

android:dividerPadding设置分割线的padding

 

案例:

代码:

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:layout_width="0dp"android:layout_height="50dp"android:layout_weight="1"android:text="权重1"android:gravity="center"android:background="#afdfe4"/><TextViewandroid:layout_width="0dp"android:layout_height="50dp"android:layout_weight="1"android:text="权重2"android:gravity="center"android:background="#94d6da"/><TextViewandroid:layout_width="0dp"android:layout_height="50dp"android:layout_weight="1"android:text="权重3"android:gravity="center"android:background="#78cdd1"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:background="#cde6c7"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第一个线性布局" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:background="#84bf96"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第二个线性布局"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:background="#abc88b"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第三个线性布局"/></LinearLayout></LinearLayout>

(二)相对布局 (RelativeLayout)

相对布局可以理解为某一个元素为参照物来定位的布局方式

即是以其他控件或父容器为参照物设置位置的。

特点:通过相对定位排列

常用属性:

类别控件属性功能描述

根据父容器定位

android:layout_centerInParent设置当前控件位于父布局的中央位置
android:layout_centerVertical设置当前控件位于父布局的垂直居中位置
android:layout_centerHorizontal设置当前控件位于父控件的水平居中位置
android:layout_alignParentTop设置当前控件是否与父控件顶部对齐
android:layout_alignParentLeft设置当前控件是否与父控件左对齐
android:layout_alignParentRight设置当前控件是否与父控件右对齐
android:layout_alignParentBottom设置当前控件是否与父控件底部对齐
根据兄弟组件定位android:layout_above设置当前控件位于某控件上方
android:layout_below设置当前控件位于某控件下方
android:layout_toLeftOf设置当前控件位于某控件左侧
android:layout_toRightOf设置当前控件位于某控件右侧
android:layout_alignTop设置当前控件的上边界与某控件的上边界对齐
android:layout_alignBottom设置当前控件的上边界与某控件的下边界对齐
android:layout_alignLeft设置当前控件的上边界与某控件的左边界对齐
android:layout_alignRight设置当前控件的上边界与某控件的右边界对齐

案例:

 代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/text1"android:layout_width="60dp"android:layout_height="30dp"android:layout_alignParentStart="true"android:layout_alignParentTop="true"android:layout_marginStart="100dp"android:layout_marginTop="100dp"android:text="text1"android:background="#afdfe4"android:gravity="center"/><TextViewandroid:id="@+id/text2"android:layout_width="60dp"android:layout_height="30dp"android:layout_alignParentTop="true"android:layout_marginStart="60dp"android:layout_marginTop="230dp"android:layout_toEndOf="@+id/text4"android:text="text2"android:background="#afdfe4"android:gravity="center"/><TextViewandroid:id="@+id/text3"android:layout_width="60dp"android:layout_height="30dp"android:layout_alignParentStart="true"android:layout_alignParentBottom="true"android:layout_marginStart="123dp"android:layout_marginBottom="200dp"android:text="text3"android:background="#afdfe4"android:gravity="center"/><TextViewandroid:id="@+id/text4"android:layout_width="60dp"android:layout_height="30dp"android:layout_alignParentStart="true"android:layout_alignParentTop="true"android:layout_marginStart="23dp"android:layout_marginTop="293dp"android:text="text4"android:background="#afdfe4"android:gravity="center"/><TextViewandroid:id="@+id/text5"android:layout_width="60dp"android:layout_height="30dp"android:layout_alignParentTop="true"android:layout_alignParentEnd="true"android:layout_marginTop="266dp"android:layout_marginEnd="53dp"android:text="text5"android:background="#afdfe4"android:gravity="center"/></RelativeLayout>

(三)表格布局(TableLayout)

一个tableLayout由许多个tableRow组成,每一个tableLayout里面有表格行tableRow,TableRow里面可以具体定义没一个元素。

特点:表格形式排列

常用属性:

布局属性功能描述
android:stretchColumns设置该列被拉伸
android:shrinkColumns设置该列被收缩
android:collapseColumns设置该列被隐藏

控件属性功能描述
android:layout_column设置该单元格显示位置
android:layout_span设置该单元格占据几行,默认为1行

案例:

 代码:

<?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"><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button1"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button2"/></TableRow><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button3"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button4"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button5"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button6"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button7"/></TableRow><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button8"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button9"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button10"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="button11"/></TableRow>
</TableLayout>

(四)绝对布局(AbsoluteLayout)

绝对布局用X,Y坐标来指定元素的位置,此布局比较简单,但是在屏幕旋转时往往会出现问题,而且多个元素的时候计算比较麻烦

常用属性:

布局属性功能描述
android:layout_x设置view的横坐标
android:layout_y设置view的纵坐标

案例:

 

 代码:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_x="23dp"android:layout_y="123dp"android:text="Button1" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_x="83dp"android:layout_y="223dp"android:text="Button2" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_x="143dp"android:layout_y="323dp"android:text="Button3" /><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_x="203dp"android:layout_y="423dp"android:text="Button4" />
</AbsoluteLayout>

(五)网格布局 (GridLayout)

网格布局是用一组无限细的直线讲绘图区域分成行、列和单元,并指定控件的显示区域和控件在该区域的显示方式。

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

常用属性:

控件属性功能描述
android:columnCount每行列总数
android:rowCount每列行总数
android:layout_column在网格的第几列
android:layout_row在网格的第几行
android:layout_columnSpan跨列
android:layout_rowSpan跨行
android:layout_gravity在一个网格中的重心位置layout_gravity=fill时标识可填充

案例:

 代码:

<?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"><Button android:text="/"android:layout_column="3"android:backgroundTint="#afdfe4"/><Button android:text="7"android:backgroundTint="#afdfe4"/><Button android:text="8"android:backgroundTint="#50b7c1"/><Button android:text="9"android:backgroundTint="#afdfe4"/><Button android:text="x"android:backgroundTint="#50b7c1"/><Button android:text="4"android:backgroundTint="#50b7c1"/><Button android:text="5"android:backgroundTint="#afdfe4"/><Button android:text="6"android:backgroundTint="#50b7c1"/><Button android:text="-"android:backgroundTint="#afdfe4"/><Button android:text="1"android:backgroundTint="#afdfe4"/><Button android:text="2"android:backgroundTint="#50b7c1"/><Button android:text="3"android:backgroundTint="#afdfe4"/><Button android:text="+"android:backgroundTint="#50b7c1"/><Button android:text="0"android:layout_columnSpan="2"android:layout_gravity="fill"android:backgroundTint="#50b7c1"/><Button android:text="00"android:backgroundTint="#afdfe4"/><Button android:text="="android:backgroundTint="#50b7c1"/>
</GridLayout>

(六)帧布局(FrameLayout)

帧布局用于在屏幕上创建一块空白区域,添加到该区域中的每个子控件占一帧,所有帧依次都放在左上角,会重叠,此布局比较简单,也只能放一点比较简单的东西。

特点:开辟空白区域,帧里的控件层叠加

常用属性:

控件属性功能描述
android:foreground设置帧布局容器的前景布局
android:foregroundGravity设置前景图像显示位置

备注:前景图像永远处于帧布局最上面,直接面对用户的图像,不会被覆盖的图片

案例:

 

<?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/ic_launcher"android:foregroundGravity="left"><TextViewandroid:layout_width="250dp"android:layout_height="250dp"android:background="#afdfe4" /><TextViewandroid:layout_width="200dp"android:layout_height="200dp"android:background="#78cdd1" /><TextViewandroid:layout_width="150dp"android:layout_height="150dp"android:background="#50b7c1" /><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:background="#00a6ac" />
</FrameLayout>


http://chatgpt.dhexx.cn/article/JsxRPINL.shtml

相关文章

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

文章目录 前言一、线性布局&#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的网格布局

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

网格布局(grid布局)

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

CSS布局—网格布局Grid(一)

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

CSS Grid 网格布局教程

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

css 网格布局

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

微信小程序的页面布局(1)

微信小程序的页面布局主要用到两个文件&#xff0c;wxml&#xff08;摆放各种组件&#xff09;和wxss&#xff08;设计排版&#xff09; 因此&#xff0c;我们首先将要用到的组件按照一定的组织排序扔进wxml文件里&#xff0c;什么叫组织排序呢&#xff0c;这里注意就是组件与组…

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

什么是模板&#xff1f; 在微信小程序中&#xff0c;使用template来表示模板 为什么要使用模板&#xff1f; 使用模板文件能够降低代码重构&#xff0c;提高代码的复用性。 如何使用&#xff1f; 页面内使用&#xff1a;在页面内直接声明一个template并且引用代码如下&#xf…

【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 网页栅格布局

栅格布局&#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布局 二、容器属性值 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实现九宫格布局)

效果二维码 效果图 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…

前端网格布局grid

网格布局 <style> .container {border:none;display: grid;height: 600px;grid-template-columns: 200px 1fr; /*两列&#xff0c;第一列200px&#xff0c;第二列自适应*/grid-template-rows: 50px 1fr 30px; /*三行&#xff1a;第一行&#xff1a;50px,第二行&#…

css【详解】grid布局—— 网格布局(栅格布局)

网格布局&#xff08;Grid&#xff09;是最强大的 CSS 布局方案 grid布局 和 flex布局的区别 Flex 布局是轴线布局&#xff0c;只能指定"项目"针对轴线的位置&#xff0c;可以看作是一维布局。 Grid 布局则是将容器划分成"行"和"列"&#xff0c…

微信小程序布局技巧(一)

微信小程序布局技巧&#xff08;一&#xff09; 前言小程序布局方式Block布局方式flex布局方式wxss添加样式wxml应用样式效果 flex布局种类justify-content属性align-items属性flex-wrap 属性 应用尾巴 前言 友情提示&#xff0c;阅读本文之前&#xff0c;可能需要有一点微信小…