Android常用布局总结之(LinearLayout、GridLayout等4种)
zhezhongyun 2025-05-28 21:41 37 浏览
一、LinearLayout 线性布局
LinearLayout 是一个视图组,用于使所有子视图在单个方向(垂直或水平)保持对齐。您可以使用 android:orientation 属性指定布局方向。
- android:orientation,指定布局方向,vertical-竖向布局,horizontal-横向布局
- android:layout_weight,为各个子视图分配权重(数字)
- android:layout_gravity,容器自身相对于的上级容器的排列方式
- android:gravity,容器内部组件的排列方式(top,bottom,start,end,center)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="文本标签1"
android:background="@color/teal_700"
android:textColor="@color/white"
android:textSize="60sp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="文本标签2"
android:background="@color/teal_200"
android:textColor="@color/white"
android:textSize="60sp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="文本标签3"
android:background="@color/purple_200"
android:textColor="@color/white"
android:textSize="60sp"
/>
</LinearLayout>
线性布局 - 均等分布
如果要让每个子视图使用大小相同的屏幕空间,请将每个视图的 android:layoutheight 设置为 "0dp"(针对垂直布局),或将每个视图的 android:layoutwidth 设置为 "0dp"(针对水平布局)。然后,将每个视图的 android:layout_weight 设置为 "1"。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="文本标签1"
android:background="@color/teal_700"
android:textColor="@color/white"
android:textSize="60sp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="文本标签2"
android:background="@color/teal_200"
android:textColor="@color/white"
android:textSize="60sp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="文本标签3"
android:background="@color/purple_200"
android:textColor="@color/white"
android:textSize="60sp"
/>
</LinearLayout>
二、TableLayout 表格布局
1、TableLayout继承了LinearLayout
- android:stretchColumns,设置需要被隐藏的列的序号,从0开始,多个用,隔开
- android:collapseColumns,设置需要被隐藏的列的序号,从0开始,多个用,隔开
- android:shrinkColumns,设置允许被收缩的列的列序号,从0开始,多个用,隔开
2、子控件设置属性
- android:layout_span,横向跨几列
- android:layout_column,显示在第几列,从0开始
3、子控件TableRow,控制每行显示数据
4、如何确定行数与列数
- 如果我们直接往TableLayout中添加组件的话,那么这个组件将占满一行!!!
- 如果我们想一行上有多个组件的话,就要添加一个TableRow的容器,把组件都丢到里面!
- tablerow中的组件个数就决定了该行有多少列,而列的宽度由该列中最宽的单元格决定
- tablerow的layoutwidth属性,默认是fillparent的,我们自己设置成其他的值也不会生效!!! 但是layout_height默认是wrapten——content的,我们却可以自己设置大小!
- 整个表格布局的宽度取决于父容器的宽度(占满父容器本身)
- 有多少行就要自己数啦,一个tablerow一行,一个单独的组件也一行!多少列则是看tableRow中 的组件个数,组件最多的就是TableLayout的列数
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:collapseColumns=""
android:stretchColumns="1"
android:shrinkColumns="2"
>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文本1"
android:background="@color/teal_700"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_span="1"
android:layout_column="0"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文本2"
android:background="@color/teal_200"
android:textColor="@color/white"
android:textSize="40sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文本3文本3文本3文本3"
android:background="@color/purple_200"
android:textColor="@color/white"
android:textSize="40sp"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文本4"
android:background="@color/teal_700"
android:textColor="@color/white"
android:textSize="40sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文本5"
android:background="@color/teal_200"
android:textColor="@color/white"
android:textSize="40sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文本6"
android:background="@color/purple_200"
android:textColor="@color/white"
android:textSize="40sp"
/>
</TableRow>
</TableLayout>
三、GridLayout 网格布局
GridLayout和TableLayout(表格布局)有点类似,不过比TableLayout更加灵活好用。
- android:orientation,指定布局方向,vertical-竖向布局,horizontal-横向布局
- android:columnCount,设置总共多少列,默认没限制
- android:rowCount,设置总共多少行,默认没限制
- android:useDefaultMargins,true-如果组件没设置margin属性,则使用默认间距
子控件属性
- android:layout_columnSpan,设置组件横跨多列
- android:layout_rowSpan,设置组件横跨多行
- 如果设置了多行或多列,且你要让组件填满横越过的行或列的话,需要添加下面这个属性: android: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:columnCount="4"
android:orientation="horizontal"
android:rowCount="6"
android:useDefaultMargins="true">
<TextView
android:layout_columnSpan="4"
android:layout_gravity="fill"
android:gravity="end"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#FFCCCC"
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:padding="10sp"
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:text="." />
<Button android:text="0" />
<Button android:text="=" />
</GridLayout>
四、RelativeLayout 相对布局
RelativeLayout 相对布局,可以相对父容器,也可以相对兄弟组件。
- android:gravity,容器内部组件的排列方式(top,bottom,start,end,center),可以同时设置竖向横向两个竖向,用|隔开,比如end|top(左上方)
- android:ignoreGravity,指定id的组件不受gravity影响
子控件属性
1)根据父容器定位
- android:layout_alignParentStart,左对齐
- android:layout_alignParentEnd,右对齐
- android:layout_alignParentTop,上对齐
- android:layout_alignParentBottom,下对齐
- android:layout_centerHorizontal,水平居中
- android:layout_centerVertical,垂直居中
- android:layout_centerInParent,正中间
2)根据兄弟组件定位
- android:layout_toStartOf,参考组件的左边
- android:layout_toEndOf,参考组件的右边
- android:layout_above,参考组件的上面
- android:layout_below,参加组件的下面
- android:layout_alignTop,对齐参考组件的上边界
- android:layout_alignBottom,对齐参考组件的下边界
- android:layout_alignStart,对齐参考组件的左边界
- android:layout_alignEnd,对齐参考组件的右边界
<?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="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn01"
android:textColor="@color/black"
android:layout_centerInParent="true"
android:text="参照物"/>
<!-- 下方,且和参照物左对齐,如果控件大小一样,左右对齐效果是一样的 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="@id/btn01"
android:layout_above="@id/btn01"
android:text="正上方"/>
<!-- 上方,且和参照物左对齐,如果控件大小一样,左右对齐效果是一样的 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_toStartOf="@id/btn01"
android:layout_alignTop="@id/btn01"
android:text="左边"/>
<!-- 右方,且和参照物下对齐,如果控件大小一样,上下对齐效果是一样的 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_toEndOf="@id/btn01"
android:layout_alignBottom="@id/btn01"
android:text="右边"/>
<!-- 右方,上方 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_toEndOf="@id/btn01"
android:layout_above="@id/btn01"
android:text="右上方"/>
<!-- 右方,下方 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_toEndOf="@id/btn01"
android:layout_below="@id/btn01"
android:text="右下方"/>
<!-- 左方,下方 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_toStartOf="@id/btn01"
android:layout_below="@id/btn01"
android:text="左下方"/>
<!-- 左方,上方 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_toStartOf="@id/btn01"
android:layout_above="@id/btn01"
android:text="左上方"/>
<!-- 下方,且和参照物左对齐 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="@id/btn01"
android:layout_below="@id/btn01"
android:text="正下方"/>
</RelativeLayout>
相关推荐
- css 垂直居中的几种实现方式(css怎么实现垂直居中)
-
前言设计是带有主观色彩的,同样网页设计中的css一样让人摸不头脑。网上列举的实现方式一大把,或许在这里你都看到过,但既然来到这里我希望这篇能让你看有所收获,毕竟这也是前端面试的基础。实现方式备注:...
- CSS 中各种居中你真的玩明白了么(css中的居中属性)
-
页面布局中最常见的需求就是元素或者文字居中了,但是根据场景的不同,居中也有简单到复杂各种不同的实现方式,本篇就带大家一起了解下,各种场景下,该如何使用CSS实现居中前言页面布局中最常见的需求就是元...
- 浅谈3种css技巧——两端对齐(css两侧对齐)
-
在出里文字比较多的网页,文字对齐其中采用的两端对齐,两端对齐的方法有三种方法,如下:1.使用text-align:justifytext-align:justify属性是全兼容的,使用它实现两端对...
- 从零开发HarmonyOS(鸿蒙)运动手表小游戏—数字华容道
-
本个demo将从零基础开始完成鸿蒙小游戏APP在可穿戴设备上的编译,此处以运动手表为例,在项目中我们所使用到的软件为DevEcoStudio,下载地址为:DevEcoStudio下载、DevEco...
- 教师如何制作随机点名系统,活跃课堂气氛
-
上课点名抽学生回答问题,做游戏……由老师口头点名,点谁回答总有点老师本人的情绪,且显得毫无趣味,但做一个点名系统,就不一样了,电脑随机抽出的名字,不仅公平,还会给孩子们带来一种不一样的感受。那么怎么做...
- 看京铁人如何破解电煤运输"烤"验
-
“天气太热了!空调是我的避暑必备神器再往冰箱里冻些雪糕和西瓜电风扇也要24小时上岗了”近日京津冀地区迎来高温天气小伙伴们都在分享解暑妙招但这些妙招背后都离不开一个字——“电”为确保电力平稳“迎峰度夏”...
- 回家的路就是最美的风景 幸福就在前方
-
2025年春运启动以来,无数在外游子踏上归乡旅程。为了帮助更多旅客按时回家过年,还有很多人不分昼夜、不辞辛苦地奔波在铁路线上。“我的列车飞驰而过,那是梦想的前方,回家的路就是最美的风景。”END&l...
- 如何做出一个香消玉殒的网页文字特效
-
最近,迷上了CSS3特效,空闲时间学一些小案例,非专业,爱好。不断学习也能掌握一些更为全面的html,css,JavaScript的知识,以小博大,从兴趣出发再掌握更多网页开发知识。闲言少叙,直接开怼...
- 第1000篇原创,我想对你说______(2021我想对你说1000)
-
亲爱的小伙伴今天您看到的这篇推送是“北京铁路”发布的第1000篇原创作品!这不仅是一个数字的跨越更是我们一路走来与每一位关注者共同铸就的辉煌里程碑每一篇文章都承载着我们的心血与热情每一次传播都离不开大...
- 动车组的“家”在哪里?(动车组的"家"在哪里?举例说明)
-
夜幕降临随着动车组列车驶入站台乘客陆续离开动车组也完成了一天的工作准备启程回“家”有小伙伴儿会问“为什么大多数动车组列车夜间不运行呢?”这是因为白天行驶一天的动车组要利用晚上的时间进行全面检查、维修和...
- 这套铁路“高考”卷,请你来作答(郑州铁路职业技术学院高考河南录取分数线)
-
今天是2025年全国高考的第一天小编为大家准备了一套北京铁路版的试卷满分120分共12道单选题快来试试你能得多少分吧!·<animateattributeName="opacity"begi...
- HarmonyOS Text组件Span间距解决方案
-
HarmonyOSText组件Span间距解决方案一、问题分析在HarmonyOS开发中,Text组件内的Span子组件无法直接设置margin/padding属性,需要通过文本级属性实现间距控制。...
- 考“火车驾驶证”,难不难?(火车驾驶证怎么考需要什么条件)
-
····<animateattributeName="height"begin="0.1"dur="0.01s"fill="freeze"to="0"/>00:0002:59未加...
- 高温?京铁人:我有“物理外挂”!(点开看有多爽)
-
近几日华北地区气温不断上升高温来袭坚守岗位的京铁人开启清凉避暑的“物理外挂”快动动手指点开看看吧·<animateattributeName="opacity"begin="click+0....
- 2025年Top30 CSS面试题及答案(css常考面试题)
-
概述CSS(层叠样式表)是构建美观、响应式网站的关键技术。无论您是在准备前端开发者面试还是复习知识,这里都有一份精心挑选的2025年每个开发者都应该知道的30个CSS面试题及答案。1.什么是CSS...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)