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://liangruijun.blog.51cto.com/3061169/631816
 
简单的例子
效果图:
 
 核心代码:
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来代替。所以这里不再详细介绍。

本文转自 lingdududu 51CTO博客,原文链接: http://blog.51cto.com/liangruijun/632532

 

相关文章
|
3天前
|
存储 Android开发 开发者
探索安卓开发之旅:从新手到专家的必经之路
【9月更文挑战第3天】在这篇文章中,我们将踏上一场激动人心的旅程,深入探索安卓开发的广阔天地。无论你是初涉编程世界的新手,还是期望提升技能的开发者,这里都有你需要的知识与技巧。我们将从基础概念讲起,逐步引导你了解安卓应用的核心组件,并分享实用的开发建议。准备好了吗?让我们一起开启这段成长之旅吧!
|
1天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义控件
【9月更文挑战第5天】在安卓开发的海洋中,自定义控件如同一艘精致的小船,让开发者能够乘风破浪,创造出既独特又高效的用户界面。本文将带你领略自定义控件的魅力,从基础概念到实战应用,一步步深入理解并掌握这一技术。
|
5天前
|
存储 XML API
安卓应用程序开发:从新手到专家的旅程
【8月更文挑战第33天】在这篇文章中,我们将一起踏上一段激动人心的旅程,探索如何从一个对安卓应用程序开发一无所知的新手,成长为一个能够独立开发复杂应用程序的专家。我们将通过实际案例和代码示例,深入理解安卓开发的各个方面,包括用户界面设计、数据存储、网络通信等。无论你是刚刚入门,还是已经有一些基础,这篇文章都将为你提供宝贵的知识和技能,帮助你在安卓开发的道路上更进一步。
|
2天前
|
XML Java Android开发
探索Android开发之旅:打造你的第一个应用
【9月更文挑战第4天】在这篇专为初学者设计的文章中,我们将一起踏上激动人心的Android开发之旅。从设置开发环境到实现一个简单的“Hello World”应用,每一步都充满了发现和学习。文章将引导你理解Android开发的基础知识,并鼓励你动手实践。让我们开始吧,创造你的第一款Android应用,开启技术世界的新篇章!
|
5天前
|
Java 开发工具 Android开发
探索安卓与iOS开发的差异:平台选择对项目的影响
在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据着重要的位置。本文旨在深入探讨这两个平台在开发过程中的主要差异,包括编程语言、开发工具、用户界面设计、性能优化以及市场分布等方面。通过对比分析,我们将揭示平台选择如何影响项目规划、执行效率和最终成果,为开发者在选择适合自己项目需求的平台时提供参考依据。
|
19小时前
|
前端开发 搜索推荐 Android开发
探索安卓开发中的自定义视图##
【9月更文挑战第6天】 在安卓应用开发的世界里,自定义视图如同绘画艺术中的色彩,它们为界面设计增添了无限可能。通过掌握自定义视图的绘制技巧,开发者能够创造出既符合品牌形象又提升用户体验的独特界面元素。本文将深入浅出地介绍如何从零开始构建一个自定义视图,包括基础框架搭建、关键绘图方法实现、事件处理机制以及性能优化策略。准备好让你的安卓应用与众不同了吗?让我们开始吧! ##
|
7天前
|
图形学 iOS开发 Android开发
从Unity开发到移动平台制胜攻略:全面解析iOS与Android应用发布流程,助你轻松掌握跨平台发布技巧,打造爆款手游不是梦——性能优化、广告集成与内购设置全包含
【8月更文挑战第31天】本书详细介绍了如何在Unity中设置项目以适应移动设备,涵盖性能优化、集成广告及内购功能等关键步骤。通过具体示例和代码片段,指导读者完成iOS和Android应用的打包与发布,确保应用顺利上线并获得成功。无论是性能调整还是平台特定的操作,本书均提供了全面的解决方案。
51 0
|
7天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
13 0
|
7天前
|
开发者 iOS开发 C#
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
13 0
|
7天前
|
Android开发 UED 开发者
安卓开发中的自定义控件基础
【8月更文挑战第31天】在安卓应用开发过程中,自定义控件是提升用户界面和用户体验的重要手段。本文将通过一个简易的自定义按钮控件示例,介绍如何在安卓中创建和使用自定义控件,包括控件的绘制、事件处理以及与布局的集成。文章旨在帮助初学者理解自定义控件的基本概念,并能够动手实践,为进一步探索安卓UI开发打下坚实的基础。