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

简介: Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从屏幕左上方布局组件。 表格布局(TableLayout):按照行列方式布局组件。

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来代替。所以这里不再详细介绍。
目录
相关文章
|
12天前
|
Android开发 Kotlin
kotlin开发安卓app,如何让布局自适应系统传统导航和全面屏导航
使用`navigationBarsPadding()`修饰符实现界面自适应,自动处理底部导航栏的内边距,再加上`.padding(bottom = 10.dp)`设定内容与屏幕底部的距离,以完成全面的布局适配。示例代码采用Kotlin。
57 15
|
4天前
|
前端开发 Android开发 iOS开发
探索安卓与iOS开发的差异性与互补性
在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统各据一方,引领着市场潮流。它们在技术架构、开发环境及用户群体等方面展现出独特的差异性,同时也存在着潜在的互补性。本文将深入剖析这两种平台的开发细节,从不同角度揭示其各自优势及相互之间的协同潜力,为开发者提供全面而深刻的视角。
10 2
|
10天前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异性与互操作性
【7月更文挑战第17天】在移动应用开发的广阔天地中,安卓和iOS这两大操作系统如同双子星座般璀璨夺目。它们各自拥有独特的开发环境、编程语言和用户群体,为开发者提供了不同的挑战和机遇。本文将从多个维度深入剖析安卓与iOS开发的差异性,并探讨它们之间的互操作性如何实现,以期为开发者们提供一份实用的指南。
24 7
|
8天前
|
Java Android开发 Swift
探索iOS与安卓开发的差异与挑战
本文深入探讨了iOS和安卓两大移动操作系统在应用开发领域的不同点及其所面临的挑战。通过对开发环境、编程语言、用户界面设计、性能优化及市场策略的比较分析,揭示了各自平台的独特性以及开发者需要克服的技术与市场障碍。 【7月更文挑战第19天】
|
8天前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异:平台特性与用户体验的对比分析
【7月更文挑战第19天】在移动开发的广阔天地中,安卓与iOS两大阵营各据一方,它们在开发环境、用户界面设计、性能优化等方面展现出独特的魅力与挑战。本文旨在深入探讨这两个平台在技术开发和用户体验上的根本差异,并分析这些差异如何影响开发者的策略和最终用户的选择。通过比较两者的编程语言、工具、框架以及设计理念,我们将揭示各自平台的优势与局限,为开发者提供实用的参考,并为消费者呈现一个更加清晰的平台选择视角。
|
9天前
|
安全 Java Android开发
探索安卓与iOS开发的差异:构建未来应用的关键考量
【7月更文挑战第18天】在移动应用开发的广阔天地中,安卓和iOS两大平台各领风骚。本文将深入探讨这两个平台在开发过程中的主要差异,包括编程语言、用户界面设计、性能优化、安全性以及市场策略等方面。通过比较分析,旨在为开发者提供决策支持,帮助他们选择最适合自己项目需求的平台,同时考虑到用户体验和市场需求的变化,为未来的应用开发指明方向。
|
10天前
|
监控 开发工具 Android开发
探索安卓与iOS开发的差异:平台特性、工具和市场趋势
在移动应用开发的广阔舞台上,安卓与iOS两大操作系统扮演着主角。它们各自拥有独特的平台特性、开发工具和市场定位,这些差异深刻影响着开发者的决策和产品的最终形态。本文将深入分析这两大平台的关键技术差异,探讨各自的开发环境和工具集,以及它们在市场上的表现和未来的趋势,为开发者提供一个全面的视角,帮助他们在这两个平台上做出更明智的开发选择。
|
7天前
|
开发工具 Android开发 Swift
探索Android与iOS开发的差异与挑战
【7月更文挑战第20天】在移动应用开发的广阔天地中,Android和iOS两大平台如同双子星座,各自闪耀着独特的光芒。本文将深入探讨这两个平台在开发过程中的主要差异,以及开发者面临的技术挑战。我们将从开发环境、编程语言、用户界面设计、性能优化、安全性考量等多个维度展开讨论,旨在为那些即将踏入或已在这片星空下航行的开发者提供一盏明灯。
|
8天前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异:平台特性与用户体验的对比分析
在移动应用开发的广阔天地中,安卓与iOS两大阵营各自占据着半壁江山。本文将深入探讨这两个平台在开发环境、编程语言、用户界面设计以及性能优化方面的差异,并分析这些差异如何影响最终的用户体验。通过数据支持的案例分析和最新的市场研究,我们将揭示开发者如何在这两个不同的生态系统中做出战略决策,以及这些决策对应用成功的潜在影响。