Android开发学习笔记之详解五大布局

简介: Android开发学习笔记之详解五大布局

为了适应各式各样的界面风格,Android系统提供了5种布局,这5种布局分别是:


LinearLayout(线性布局)


TableLayout(表格布局)


RelativeLayout(相对布局)


AbsoluteLayout(绝对布局)


FrameLayout(框架布局)


利用这五种布局,可以在屏幕上将控件随心所欲的摆放,而且控件的大小和位置会随着屏幕大小的变化作出相应的调整。下面是这五个布局在View的继承体系中的关系:

 



一,LinearLayout(线性布局)


   在一个方向上(垂直或水平)对齐所有子元素

一个垂直列表每行将只有一个子元素(无论它们有多宽)

一个水平列表只是一列的高度(最高子元素的高度来填充)


下面是一个简单的线性布局的例子:


01 <?xml version="1.0" encoding="utf-8"?> 
02 <LinearLayout 
03 xmlns:android="http://schemas.android.com/apk/res/android" 
04 android:layout_width="match_parent" 
05 android:layout_height="match_parent" android:orientation="vertical"> 
06 <EditText android:text="EditText" 
07   
08 android:id="@+id/editText1" 
09   
10 android:layout_height="wrap_content" 
11   
12 android:layout_width="fill_parent"> 
13   
14 </EditText> 
15 <LinearLayout android:id="@+id/linearLayout1" 
16   
17 android:layout_height="fill_parent" 
18   
19 android:layout_width="fill_parent" 
20   
21 android:gravity="right"> 
22 <Button android:id="@+id/button2" 
23   
24 android:text="Button" 
25   
26 android:layout_width="wrap_content" 
27   
28 android:layout_height="wrap_content"></Button> 
29 <Button android:text="Button" 
30   
31 android:id="@+id/button1" 
32   
33 android:layout_width="wrap_content" 
34   
35 android:layout_height="wrap_content"></Button> 
36 </LinearLayout> 
37 </LinearLayout>

复制代码

最外层布局为垂直线性布局,宽度为整个屏幕(fill_parent),高度为刚好适合子控件(wrap_content)。然后依次添加一个EditText,一个水平布局的LinearLayout,在这个线性布局里面,摆放两个Button,该线性布局的gravity属性设置为”right”,所以里面的两个Button靠右显示。


二,TableLayout(表格布局)


把子元素放入到行与列中

不显示行、列或是单元格边界线

单元格不能横跨行,如HTML中一样

表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象,当然也可以是一个View的对象。TableRow可以添加子控件,每添加一个为一列。


android:layout_colum官方解释:The index of the column in which this child should be,也即是设置该控件在TableRow中所处的列。

android:layout_span官方解释:Defines how many columns this child should span,也即是设置该控件所跨越的列数。


android:collapseColumns官方解释:The 0 based index of the columns to collapse. The column indices must be separated by a comma: 1, 2, 5.也即是将TableLayout里面指定的列隐藏,若有多列需要隐藏,请用逗号将需要隐藏的列序号隔开。


android:stretchColumns官方解释:The 0 based index of the columns to stretch. The column indices must be separated by a comma: 1, 2, 5. You can stretch all columns by using the value “*” instead. Note that a column can be marked stretchable and shrinkable at the same time.也即是设置指定的列为可伸展的列,可伸展的列会尽量伸展以填满所有可用的空间,若有多列需要设置为可伸展,请用逗号将需要伸展的列序号隔开。


android:shrinkColumns官方解释:The 0 based index of the columns to shrink. The column indices must be separated by a comma: 1, 2, 5. You can shrink all columns by using the value “*” instead. 设置指定的列为可收缩的列。当可收缩的列太宽以至于让其他列显示不全时,会纵向延伸空间。当需要设置多列为可收缩时,将列序号用逗号隔开。


下面用一个例子简单说明TableLayout的用法:

01 <?xml version="1.0" encoding="utf-8"?> 
02 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
03 android:layout_width="fill_parent" 
04 android:layout_height="fill_parent" 
05 android:stretchColumns="1"> 
06 <TableRow> 
07 <TextView 
08 android:layout_column="1" 
09 android:padding="3dip" android:text="Row1"/> 
10 <TextView 
11 android:text="1" 
12 android:gravity="right" 
13 android:padding="3dip" /> 
14 </TableRow> 
15 <View 
16 android:layout_height="2dip" 
17 android:background="#FF909090" /> 
18 <TableRow> 
19 <TextView 
20 android:text="*" 
21 android:padding="3dip" /> 
22 <TextView 
23 android:text="Row12" 
24 android:padding="3dip" /> 
25 <TextView 
26 android:text="2" 
27 android:gravity="right" 
28 android:padding="3dip" /> 
29 </TableRow> 
30 <View 
31 android:layout_height="2dip" 
32 android:background="#FF909090" /> 
33 <TableRow> 
34 <TextView 
35 android:layout_column="1" 
36 android:text="Row13" 
37 android:padding="3dip" /> 
38 </TableRow> 
39 </TableLayout>

复制代码

三、RelativeLayout(相对布局)


相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件,也可以是其它子控件,但是被参照的控件必须要在参照它的控件之前定义。下面是一个简单的例子:

01 <?xml version="1.0" encoding="utf-8"?> 
02 <?xml version="1.0" encoding="utf-8"?> 
03 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
04 android:layout_width="fill_parent" 
05 android:layout_height="fill_parent" 
06 > 
07 <AnalogClock 
08 android:id="@+id/aclock" 
09 android:layout_width="wrap_content" 
10 android:layout_height="wrap_content" 
11 android:layout_centerInParent="true" /> 
12 <DigitalClock 
13 android:id="@+id/dclock" 
14 android:layout_width="wrap_content" 
15 android:layout_height="wrap_content" 
16 android:layout_below="@id/aclock" 
17 android:layout_alignLeft="@id/aclock" 
18 android:layout_marginLeft="40px" /> 
19 <TextView 
20 android:layout_width="wrap_content" 
21 android:layout_height="wrap_content" 
22 android:text="当前时间:" 
23 android:layout_toLeftOf="@id/dclock" 
24 android:layout_alignTop="@id/aclock"/> 
25 </RelativeLayout>

复制代码

四、AbsoluteLayout(绝对布局)


绝对布局的子控件需要指定相对于此坐标布局的横纵坐标值,否则将会像框架布局那样被排在左上角。手机应用需要适应不同的屏幕大小,而这种布局模型不能自适应屏幕尺寸大小,所以应用的相对较少。下面以一个例子简单说明绝对布局:

01 <?xml version="1.0" encoding="utf-8"?> 
02 <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 
03 android:layout_width="fill_parent" 
04 android:layout_height="fill_parent" 
05 > 
06 <TextView 
07 android:layout_width="wrap_content" 
08 android:layout_height="wrap_content" 
09 android:layout_x="10px" 
10 android:layout_y="10px" android:text="Textview"/> 
11 <TextView 
12 android:layout_width="wrap_content" 
13 android:layout_height="wrap_content" 
14 android:layout_x="30px" 
15 android:layout_y="30px" android:text="Textview"/> 
16 <TextView 
17 android:layout_width="wrap_content" 
18 android:layout_height="wrap_content" 
19 android:layout_x="50px" 
20 android:layout_y="50px" android:text="Textview"/> 
21 </AbsoluteLayout>

复制代码

五、FrameLayout(框架布局)



框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。下面举一个简单的例子

 

01 <?xml version="1.0" encoding="utf-8"?> 
02 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
03 android:layout_width="fill_parent" android:layout_height="fill_parent"> 
04 <LinearLayout android:id="@+id/linearLayout1" 
05 android:layout_height="match_parent" 
06 android:layout_width="match_parent"> 
07 <Button android:text="Button" 
08 android:id="@+id/button1" 
09 android:layout_width="wrap_content" 
10 android:layout_height="wrap_content"></Button> 
11 </LinearLayout> 
12 <LinearLayout android:layout_width="match_parent" 
13 android:id="@+id/linearLayout3" 
14 android:layout_height="match_parent" 
15 android:gravity="bottom|right"> 
16 <Button android:text="Button" 
17 android:id="@+id/button3" 
18 android:layout_width="wrap_content" 
19 android:layout_height="wrap_content"></Button> 
20 </LinearLayout> 
21 <LinearLayout android:layout_height="match_parent" 
22 android:id="@+id/linearLayout2" 
23 android:layout_width="match_parent" 
24 android:gravity="right"> 
25 <Button android:text="Button" 
26 android:id="@+id/button2" 
27 android:layout_width="wrap_content" 
28 android:layout_height="wrap_content"></Button> 
29 </LinearLayout> 
30 <LinearLayout android:layout_width="match_parent" 
31 android:id="@+id/LinearLayout01" 
32 android:layout_height="match_parent" 
33 android:gravity="bottom|left"> 
34 <Button android:id="@+id/Button01" 
35 android:text="Button" 
36 android:layout_width="wrap_content" 
37 android:layout_height="wrap_content"></Button> 
38 </LinearLayout> 
39 </FrameLayout>

复制代码

下面介绍一下RelativeLayout用到的一些重要的属性:


第一类:属性值为true或false

android:layout_centerHrizontal                                           水平居中

android:layout_centerVertical                                            垂直居中

android:layout_centerInparent                                           相对于父元素完全居中

android:layout_alignParentBottom                     贴紧父元素的下边缘

android:layout_alignParentLeft                        贴紧父元素的左边缘

android:layout_alignParentRight                       贴紧父元素的右边缘

android:layout_alignParentTop                        贴紧父元素的上边缘

android:layout_alignWithParentIfMissing               如果对应的兄弟元素找不到的话就以父元素做参照物


第二类:属性值必须为id的引用名“@id/id-name”

android:layout_below                          在某元素的下方

android:layout_above                          在某元素的的上方

android:layout_toLeftOf                       在某元素的左边

android:layout_toRightOf                     在某元素的右边


android:layout_alignTop                      本元素的上边缘和某元素的的上边缘对齐

android:layout_alignLeft                      本元素的左边缘和某元素的的左边缘对齐

android:layout_alignBottom                 本元素的下边缘和某元素的的下边缘对齐

android:layout_alignRight                    本元素的右边缘和某元素的的右边缘对齐


第三类:属性值为具体的像素值,如30dip,40px

android:layout_marginBottom              离某元素底边缘的距离

android:layout_marginLeft                   离某元素左边缘的距离

android:layout_marginRight                 离某元素右边缘的距离

android:layout_marginTop                   离某元素上边缘的距离

相关文章
|
1月前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
54 19
|
1月前
|
JSON Java API
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
60 14
|
1月前
|
Java Linux 数据库
探索安卓开发:打造你的第一款应用
在数字时代的浪潮中,每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界,通过浅显易懂的语言和实际代码示例,引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇门,让你的创意和技术一起飞扬。
|
1月前
|
XML 存储 Java
探索安卓开发之旅:从新手到专家
在数字时代,掌握安卓应用开发技能是进入IT行业的关键。本文将引导读者从零基础开始,逐步深入安卓开发的世界,通过实际案例和代码示例,展示如何构建自己的第一个安卓应用。我们将探讨基本概念、开发工具设置、用户界面设计、数据处理以及发布应用的全过程。无论你是编程新手还是有一定基础的开发者,这篇文章都将为你提供宝贵的知识和技能,帮助你在安卓开发的道路上迈出坚实的步伐。
34 5
|
1月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
1月前
|
搜索推荐 前端开发 测试技术
打造个性化安卓应用:从设计到开发的全面指南
在这个数字时代,拥有一个定制的移动应用不仅是一种趋势,更是个人或企业品牌的重要延伸。本文将引导你通过一系列简单易懂的步骤,从构思你的应用理念开始,直至实现一个功能齐全的安卓应用。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你提供必要的工具和知识,帮助你将创意转化为现实。
|
1月前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
1月前
|
Java Android开发 开发者
探索安卓开发:构建你的第一个“Hello World”应用
在安卓开发的浩瀚海洋中,每个新手都渴望扬帆起航。本文将作为你的指南针,引领你通过创建一个简单的“Hello World”应用,迈出安卓开发的第一步。我们将一起搭建开发环境、了解基本概念,并编写第一行代码。就像印度圣雄甘地所说:“你必须成为你希望在世界上看到的改变。”让我们一起开始这段旅程,成为我们想要见到的开发者吧!
38 0
|
1月前
|
存储 监控 Java
探索安卓开发:从基础到进阶的旅程
在这个数字时代,移动应用已成为我们日常生活的一部分。对于开发者来说,掌握安卓开发不仅是技能的提升,更是通往创新世界的钥匙。本文将带你了解安卓开发的核心概念,从搭建开发环境到实现复杂功能,逐步深入安卓开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的见解和技巧,帮助你在安卓开发的道路上更进一步。
27 0