【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种:

  • 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。
  • 帧布局(FrameLayout):组件从屏幕左上方布局组件。
  • 表格布局(TableLayout):按照行列方式布局组件。
  • 相对布局(RelativeLayout):相对其它组件的布局方式。
  •  绝对布局(AbsoluteLayout):按照绝对坐标来布局组件。

1. 线性布局

线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过“android:orientation”属性可以设置线性布局的方向。属性值有垂直(vertical)和水平(horizontal)两种。

常用的属性:

android:orientation:可以设置布局的方向 android:gravity:用来控制组件的对齐方式 layout_weight:控制各个组件在布局中的相对大小

第一个实例

①效果图:

②核心代码如下:

main.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:orientation="vertical" 
 4         android:layout_width="fill_parent" 
 5         android:layout_height="fill_parent" 
 6         >       
 7         <LinearLayout 
 8             android:layout_width="fill_parent" 
 9             android:layout_height="wrap_content" 
10             android:orientation="vertical" 
11             > 
12             <EditText 
13                 android:layout_width="fill_parent" 
14                 android:layout_height="wrap_content" 
15                 /> 
16         </LinearLayout> 
17         <LinearLayout 
18             android:layout_width="fill_parent" 
19             android:layout_height="wrap_content" 
20             android:orientation="horizontal" 
21             android:gravity="right" 
22             > 
23         <!-- android:gravity="right"表示Button组件向右对齐 --> 
24             <Button 
25                 android:layout_height="wrap_content" 
26                 android:layout_width="wrap_content" 
27                 android:text="确定" 
28                 /> 
29             <Button 
30                 android:layout_height="wrap_content" 
31                 android:layout_width="wrap_content" 
32                 android:text="取消" 
33                 />    
34          </LinearLayout> 
35     </LinearLayout> 

第二个实例

①效果图:

②核心代码:

mian.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:orientation="vertical" android:layout_width="fill_parent" 
 4         android:layout_height="fill_parent"> 
 5      
 6         <LinearLayout 
 7         android:orientation="horizontal" 
 8         android:layout_width="fill_parent" 
 9         android:layout_height="fill_parent" 
10         android:layout_weight="1"> 
11           
12         <TextView 
13             android:text="red" 
14             android:gravity="center_horizontal" 
15             android:background="#aa0000" 
16             android:layout_width="wrap_content" 
17             android:layout_height="fill_parent" 
18             android:layout_weight="1" 
19             /> 
20          <!--android:gravity="center_horizontal"水平居中 -->   
21          <!--layout_weight属性以控制各个控件在布局中的相对大小。layout_weight属性是一个非负整数值。  
22              线性布局会根据该控件layout_weight值与其所处布局中所有控件layout_weight值之和的比值为该控件分配占用的区域。  
23             例如,在水平布局的LinearLayout中有两个Button,这两个Button的layout_weight属性值都为1,  
24             那么这两个按钮都会被拉伸到整个屏幕宽度的一半。如果layout_weight指为0,控件会按原大小显示,不会被拉伸;  
25             对于其余layout_weight属性值大于0的控件,系统将会减去layout_weight属性值为0的控件的宽度或者高度,  
26             再用剩余的宽度或高度按相应的比例来分配每一个控件显示的宽度或高度--> 
27         <TextView 
28             android:text="Teal" 
29             android:gravity="center_horizontal" 
30             android:background="#008080" 
31             android:layout_width="wrap_content" 
32             android:layout_height="fill_parent" 
33             android:layout_weight="1"/> 
34           
35         <TextView 
36             android:text="blue" 
37             android:gravity="center_horizontal" 
38             android:background="#0000aa" 
39             android:layout_width="wrap_content" 
40             android:layout_height="fill_parent" 
41             android:layout_weight="1" 
42             /> 
43           
44         <TextView 
45             android:text="orange" 
46             android:gravity="center_horizontal" 
47             android:background="#FFA500" 
48             android:layout_width="wrap_content" 
49             android:layout_height="fill_parent" 
50             android:layout_weight="1" 
51             /> 
52               
53         </LinearLayout>   
54         <LinearLayout 
55         android:orientation="vertical" 
56         android:layout_width="fill_parent" 
57         android:layout_height="fill_parent" 
58         android:layout_weight="1"> 
59           
60         <TextView 
61             android:text="row one" 
62             android:textSize="15pt" 
63             android:background="#aa0000" 
64             android:layout_width="fill_parent" 
65             android:layout_height="wrap_content" 
66             android:layout_weight="1" 
67             /> 
68         <!--  -->   
69         <TextView 
70             android:text="row two" 
71             android:textSize="15pt" 
72             android:background="#DDA0DD" 
73             android:layout_width="fill_parent" 
74             android:layout_height="wrap_content" 
75             android:layout_weight="1" 
76             /> 
77           
78         <TextView 
79             android:text="row three" 
80             android:textSize="15pt" 
81             android:background="#008080" 
82             android:layout_width="fill_parent" 
83             android:layout_height="wrap_content" 
84             android:layout_weight="1" 
85             />    
86         <TextView 
87             android:text="row four" 
88             android:textSize="15pt" 
89             android:background="#FFA500" 
90             android:layout_width="fill_parent" 
91             android:layout_height="wrap_content" 
92             android:layout_weight="1" 
93             />       
94         </LinearLayout>   
95     </LinearLayout> 

2. 帧布局

帧布局是从屏幕的左上角(0,0)坐标开始布局,多个组件层叠排列,第一个添加的组件放到最底层,最后添加到框架中的视图显示在最上面。上一层的会覆盖下一层的控件。

简单的例子

①效果图:

② 核心代码:

main.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:layout_width="fill_parent" 
 4         android:layout_height="fill_parent" 
 5         > 
 6         <TextView    
 7             android:layout_width="300dp"   
 8             android:layout_height="300dp"   
 9             android:background="#00BFFF"          
10             /> 
11         <TextView    
12             android:layout_width="260dp"   
13             android:layout_height="260dp"   
14             android:background="#FFC0CB"          
15             /> 
16         <TextView    
17             android:layout_width="220dp"   
18             android:layout_height="220dp"   
19             android:background="#0000FF"          
20             /> 
21     </FrameLayout> 

3.表格布局

表格布局是一个ViewGroup以表格显示它的子视图(view)元素,即行和列标识一个视图的位置。

表格布局常用的属性如下:

android:collapseColumns:隐藏指定的列 android:shrinkColumns:收缩指定的列以适合屏幕,不会挤出屏幕 android:stretchColumns:尽量把指定的列填充空白部分 android:layout_column:控件放在指定的列 android:layout_span:该控件所跨越的列数

简单的例子:

①效果图:

② 核心代码:

 main.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:layout_width="fill_parent" 
 4         android:layout_height="fill_parent" 
 5         > 
 6         <TableRow> 
 7             <Button 
 8                 android:text="Button1" 
 9                 /> 
10             <Button 
11                 android:text="Button2" 
12                 /> 
13             <Button 
14                 android:text="Button3" 
15                 /> 
16         </TableRow> 
17         <TableRow> 
18             <Button 
19                 android:text="Button4" 
20                 /> 
21             <Button 
22                 android:layout_span="2" 
23                 android:text="Button5" 
24                 /> 
25         </TableRow> 
26           
27     </TableLayout> 

4.相对布局

相对布局是按照组件之间的相对位置来布局,比如在某个组件的左边,右边,上面和下面等。

相对布局常用属性请参考我博客的:http://www.cnblogs.com/ECJTUACM-873284962/p/7912841.html

简单的例子

①效果图:

② 核心代码:

main.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:layout_width="fill_parent" 
 4         android:layout_height="wrap_content" 
 5         android:padding="10px" 
 6         > 
 7         <TextView    
 8             android:id="@+id/tev1" 
 9             android:layout_width="wrap_content"   
10             android:layout_height="wrap_content"   
11             android:layout_marginBottom="30dp" 
12             android:text="Please Type Here:" 
13             /> 
14         <EditText 
15             android:id="@+id/tx1" 
16             android:layout_width="match_parent" 
17             android:layout_height="wrap_content" 
18             android:layout_below="@id/tev1" 
19             /> 
20         <Button 
21             android:id="@+id/btn1" 
22             android:layout_height="wrap_content" 
23             android:layout_width="wrap_content" 
24             android:layout_below="@id/tx1" 
25             android:layout_alignParentRight="true" 
26             android:text="确定" 
27             /> 
28         <Button 
29             android:id="@+id/btn2" 
30             android:layout_height="wrap_content" 
31             android:layout_width="wrap_content" 
32             android:layout_below="@id/tx1" 
33             android:layout_toLeftOf="@id/btn1" 
34             android:layout_marginRight="30dp" 
35             android:text="取消" 
36             /> 
37     </RelativeLayout> 

5. 绝对布局

 绝对布局通过指定子组件的确切X,Y坐标来确定组件的位置,在Android2.0 API文档中标明该类已经过期,可以使用FrameLayout或者RelativeLayout来代替。所以这里不再详细介绍。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

07.HTML实例

4494
来自专栏分享达人秀

屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组...

2226
来自专栏菜鸟前端工程师

html+css学习笔记006-伪类

1382
来自专栏calmound

CSS格式化排版

 用CSS样式为网页中的文字设置字体,字号,颜色等属性 字体:      body{font-family:"Microsoft Yahei"} 字号,颜色: ...

29910
来自专栏HTML5学堂

SVG - 动画制作

SVG - 动画制作 HTML5学堂:SVG - 动画制作。上一篇文章讲解了SVG的基本属性,大家能够利用SVG的基本属性进行绘制图像,那么如何让绘制好的图像动...

57010
来自专栏九彩拼盘的叨叨叨

Grid 布局写法示例

Grid 可以简便、完整、响应式地实现各种页面布局。它比 Flex 布局功能更强大。

812
来自专栏无原型不设计

[桌面版] 在 Mockplus 2.1 (预览版)中使用图片轮播

1、创建移动项目 2、从交互分类中添加一个图片轮播组件 3、点击图片轮播组件上小工具条上的图片选择按钮 4、选择一张或多张图片。(这里只会把对话框中勾选...

5508
来自专栏互联网软件技术

图片懒加载

插件地址:https://github.com/tuupola/jquery_lazyload/tree/2.x

3523
来自专栏Spring相关

UI设计-详解四种布局

LinearLayout又称为线性布局,是一种非常常用的布局.这个布局会将它所包含的控件在线性方向上依次排列.

1652
来自专栏用户画像

H5新增的嵌入多媒体元素与交互性元素

新增的嵌入多媒体元素有video和audio元素,分别用来插入视频和声音的。值得注意的是可以再开始标签和结束标签之间放置文本内容,这样旧版本的浏览器就可以显示出...

772

扫码关注云+社区

领取腾讯云代金券