页面布局 so easy——Android开发常见的界面布局方式详解

​
在Android应用中，界面由布局和控件组成。布局好比是建筑里的框架，控件相当于建筑里的砖瓦。针对界面中控件不同的排列位置，Android定义了相应的布局进行管理。本篇将针对Android界面中常见的布局进行详细地讲解。

View视图

所有的UI元素都是通过View与ViewGroup构建的，对于一个Android应用的用户界面来说，ViewGroup作为容器盛装界面中的控件，它可以包含普通的View控件，也可以包含ViewGroup。
在这里插入图片描述

界面布局编写方式

在实现Android界面效果之前，我们首先需要编写界面布局，界面布局的编写方式有2种，

  • 第1种是在XML文件中编写布局。
  • 第2种是在Java代码中编写布局。

在XML文件中编写布局：推荐此种方式编写布局
有效的将界面中的布局代码与Java代码隔离，使程序的结构更加清晰。
在Java代码中编写布局
在Android中所有布局和控件的对象都可以通过new关键字创建出来，将创建的View控件添加到
ViewGroup布局中，从而实现View控件在布局界面中显示。
​

在XML文件中编写布局

在这里插入图片描述

在Java代码中编写布局

RelativeLayout relativeLayout = new RelativeLayout(this); 
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
	RelativeLayout.LayoutParams.WRAP_CONTENT, 
	RelativeLayout.LayoutParams.WRAP_CONTENT);
	
//设置布局中的控件居中显示 
params.addRule(RelativeLayout.CENTER_IN_PARENT); 
//创建TextView控件 
TextView textView = new TextView(this);	
//设置TextView的文字内容 
textView.setText("Java 代码实现界面布局");	 
//设置TextView的文字颜色
textView.setTextColor(Color.RED);		
//设置TextView的文字大小 
textView.setTextSize(18);			
//添加TextView对象和TextView的布局属性 
relativeLayout.addView(textView, params);		
//设置在Activity中显示RelativeLayout
setContentView(relativeLayout);

界面布局的通用属性

四种常用的布局：

  • 线性布局——特点：以水平或垂直方向排列
  • 相对布局——特点：通过相对定位排列
  • 帧布局——特点：开辟空白区域，帧里的控件(层)叠加
  • 表格布局——特点：表格形式排列

Android系统提供的四种常用布局直接或者间接继承自ViewGroup，因此这四种 常用布局也支持在ViewGroup中定义属性，这些属性可以看作是布局的通用属性。这些通用属性如下表所示。

属性名称功能描述
android:id设置布局的标识
android:layout_width设置布局的宽度
android: layout_height设置布局的宽度
android:background设置布局的背景
android:layout_margin设置当前布局与屏幕边界或与周围控件的距离
android:padding设置当前布局与该布局中控件的距离

布局的通用属性

android:id

  • 用于设置当前布局的唯一标识。
  • 2.在XML文件中它的属性值是通过“@+id/属性名称”定义。

android:layout_width

  • 用于设置布局的宽度，其值可以是具体的尺寸，如50dp，也可以是系统定义的值。
  • 系 统 定 义 的 值 有 fill_parent、 match_parent和 wrap_content

android:layout_height

  • 1.用于设置布局的高度，其值可以是具体的尺寸，如50dp，也可以是系统定义的值。
  • 2.系 统 定 义 的 值 有 fill_parent、 match_parent和 wrap_content

android:background

  • 用于设置布局背景。其值可以引用图片资源，也可以是颜色资源。

android:layout_margin

  • 用于设置当前布局与屏幕边界、周围布局或控件的距离。属性值为具体的尺寸，如45dp。

android:padding

  • 用于设置当前布局内控件与该布局的距离，其值可以是具体的尺寸，如45dp。

线性布局

LinearLayout（线性布局）通常指定布局内的子控件水平或者竖直排列。在XML布局文件中定义线性布局的基本语法格式如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
属性 = "属性值"
.	>
</LinearLayout>

除了布局的通用属性外，LinearLayout布局还有两个比较常用的属性，分别是 android:orientation和android:layout_weight，具体介绍如下所示。

属性名称功能描述
android:orientation设置布局内控件的排列顺序
android:layout_weight在布局内设置控件权重，属性值可直接写int值

属性android:orientation的值为可选值，可选值为vertical和horizontal。
（1）vertical：表示LinearLayout布局内控件依次从上到下竖直排列。
（2）horizontal：表示LinearLayout布局内控件依次从左到右水平排列。属性android:layout_weight：
（1）该属性被称为权重，通过设置该属性值，可使布局内的控件按照权重比显示大小。
（2）在进行屏幕适配时起到关键作用。

接下来，我们通过一个案例来演示如何使用android:layout_weight属性为 LinearLayout中的控件分配权重。本案例中使用了线性布局LinearLayout，在线性布局中放置了3个按钮，这3个按钮的宽度在水平方向的比重是1:1:2，线性布局界面的效果如下图所示。
在这里插入图片描述
1.创建程序
创建一个名为LinearLayout的应用程序，指定包名为cn.itcast.linearlayout。

2.放置界面控件
在activity_main.xml文件的LinearLayout布局中放置3个Button控件，分别用于显示按钮1、按钮2和按钮3。

<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
	......
	android: orientation ="vertical">
	<Button
		android:layout_width="0dp" 
		android:layout_height="wrap_content" 
		android:layout_weight="1" 
		android:text="按钮1"/>
	.......
</LinearLayout>

注意： LinearLayout布局中的android:layout_width属性值不可设为wrap_content。这是因为LinearLayout的优先级比Button高，如果设置为wrap_content，则
Button控件的android:layout_weight属性会失去作用。

<Button
	android:layout_width="0dp" 
	android:layout_height="wrap_content" 
	android: layout_weight ="2"/>

注意： 当控件使用权重属性时，布局宽度属性值通常设置为0dp。

为了让大家更好地理解线性布局在实际开发中的应用，接下来通过一个仿动物连连看游戏界面的案例来演示如何使用线性布局来排列界面上的动物和空格子，界面效果如下图所示。
在这里插入图片描述

相对布局

RelativeLayout（相对布局）通过相对定位的方式指定子控件的位置。在XML布局文件中定义相对布局时使用标签，基本语法格式如下所示。

<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	属性 = "属性值"
	...>
</RelativeLayout>

在RelativeLayout中的子控件具备一些属性，用于指定子控件的位置，这些子控件的属性如下表所示

属性名称功能描述
android:layout_centerInParent设置当前控件位于父布局的中央位置
android:layout_centerVertical设置当前控件位于父布局的垂直居中位置
android:layout_centerHorizontal设置当前控件位于父控件的水平居中位置
android:layout_above设置当前控件位于某控件上方
android:layout_below设置当前控件位于某控件下方
android:layout_toLeftOf设置当前控件位于某控件左侧
android:layout_toRightOf设置当前控件位于某控件右侧
android:layout_alignParentTop设置当前控件是否与父控件顶端对齐
android:layout_alignParentLeft设置当前控件是否与父控件左对齐
android:layout_alignParentRight设置当前控件是否与父控件右对齐
android:layout_alignParentBottom设置当前控件是否与父控件底端对齐
android:layout_alignTop设置当前控件的上边界与某控件的上边界对齐
android:layout_alignBottom设置当前控件的下边界与某控件的下边界对齐
android:layout_alignLeft设置当前控件的左边界与某控件的左边界对齐
android:layout_alignRight设置当前控件的右边界与某控件的右边界对齐

接下来，我们通过一个案例来演示如何在相对布局中指定3个按钮的位置。本案例中使用了相对布局RelativeLayout，在相对布局中放置了3个按钮，这3个按钮以不同的位置进行显示，相对布局界面的效果如下图所示。

1.创建程序
创建一个名为RelativeLayout的应用程序，指定包名为cn.itcast.relativelayout。

2.放置界面控件
在activity_main.xml文件的RelativeLayout布局中放置3个Button控件，分别表示“按钮1”、“按钮2”和“按钮3”。

注意：在RelativeLayout布局中定义的控件默认与父布局左上角对齐。

在这里插入图片描述
为了让大家更好地理解相对布局在实际开发中的应用，接下来通过一个音乐播放器界面的案例来演示如何使用相对布局来放置界面上的控件，界面效果如下图所示。
在这里插入图片描述

表格布局

TableLayout（表格布局）采用行、列的形式来管理控件，通过在TableLayout布局中添加TableRow布局或控件来控制表格的行数，可以在TableRow布局中添加控件来控制表格的列数。定义的基本语法格式如下所示。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
	属性 = "属性值">
	<TableRow> 
		UI控件
	</TableRow> 
	UI控件
	......
</TableLayout>

TableLayout继承自LinearLayout，因此它完全支持LinearLayout所支持的属性，此外它还有其他的常用属性，这些常用属性如下表所示。

表格布局属性

属性名称功能描述
android:stretchColumns设置该列被拉伸
android:shrinkColumns设置该列被收缩
android:collapseColumns设置该列被隐藏

表格布局中控件的常用属性

表格布局中控件的常用属性功能描述
android:layout_columnandroid:layout_column
android:layout_span设置该单元格占据几行，默认为1行

接下来，我们通过一个案例来讲解如何设置3行3列的表格。本案例中使用了表格布局 TableLayout，在表格布局中放置了5个按钮，将这5个按钮按照3行3列的形式进行排列，界面的效果如下图所示。

（1）创建程序
创建一个名为TableLayout的应用程序，指定包名为cn.itcast.tablelayout。
（2）放置界面控件
在activity_main.xml文件的TableLayout布局中放置3个TableRow布局，在TableRow布局中添加不同数量的按钮。
在这里插入图片描述
接下来我们通过表格布局TableLayout来搭建一个计算器界面，界面效果如下图所示。
在这里插入图片描述

帧布局

FrameLayout（帧布局）用于在屏幕上创建一块空白区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层。默认情况下，帧布局中的所有控件会与左上角对齐。在XML布局文件中定义FrameLayout的基本语法格式如下所示。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	属性 ="属性值">
</FrameLayout>

帧布局除了前面小节介绍的通用属性外，还有两个特殊属性，FrameLayout的2个特殊属性如下表所示。

帧布局的2个特殊属性

属性名称功能描述
android:foreground设置帧布局容器的前景图像（始终在所有子控件之上）
android:foregroundGravity设置前景图像显示的位置

接下来，我们通过一个案例来讲解如何在帧布局中使用属性android:foreground和 android:foregroundGravity指定控件位置。本案例中使用了帧布局FrameLayout，在帧布局中放置了2个按钮，分别是按钮1和按钮2，按钮2在按钮1的上一层进行显示，帧布局界面的效果如下图所示。
在这里插入图片描述
1.创建程序
创建一个名为FrameLayout的应用程序，指定包名为cn.itcast.framelayout。

2.放置界面控件
在activity_main.xml文件的FrameLayout布局中放置2个Button控件，分别用于显示按钮1和按钮2。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
	......
	android:foreground="@mipmap/ic_launcher" android:foregroundGravity="left" >
<Button
	......
	android:text="按钮1" />
<Button
	......
	android:text="按钮2" />
</FrameLayout>

实战演练—霓虹灯界面

接下来我们通过帧布局FrameLayout来搭建一个霓虹灯界面，界面效果如下图所示。

在这里插入图片描述

有兴趣可以点击瞅瞅哦，里面还有更多惊喜哦 Android进阶最新最全学习资料

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/4752.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C 语言网络编程 — 内核协议栈收包/发包流程

C 语言网络编程 — 内核协议栈收包/发包流程

目录 文章目录目录关键技术DMAsk_buff 结构体Net driver Rx/Tx Ring BufferBuffer Descriptor TableNAPI 收包机制网卡多队列内核协议栈收包/发包流程概览内核协议栈收包流程详解驱动程序层&#xff08;数据链路层&#xff09;VLAN 协议族Linux Bridge 子系统网络协议层&#x…
阅读更多...
PCB模块化设计01——USB接口详解知识要点

PCB模块化设计01——USB接口详解知识要点

目录PCB模块化设计01——USB接口详解知识要点一、定义二、USB分类&#xff1a;三、传输协议四、USB接口布局布线要求PCB模块化设计01——USB接口详解知识要点 一、定义 USB是通用串行总线(Universal Serial Bus)&#xff0c;分为HOST/DEVICE两个角色&#xff0c;所有的数据传…
阅读更多...
【C++学习】日积月累——继承详解（1）

【C++学习】日积月累——继承详解（1）

一、继承的概念及定义 1.1 继承的概念 继承&#xff08;inheritance&#xff09;机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称该类为派生类。…
阅读更多...
JavaSE思维导图——总结篇

JavaSE思维导图——总结篇

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;学习时长两年半的java博主 &#x1f39f;️个人主页&#xff1a;君临๑ ps&#xff1a;点赞是免费的&#xff0c;却可以让写博客的作者开心好几天&#x1f60e; 进入正题。关于Java专栏的规划如下 写作计划&#xff1a;大概一…
阅读更多...
【微服务 从0开始 】Spring Cloud 配置文件

【微服务 从0开始 】Spring Cloud 配置文件

&#x1f50e;这里是【秒懂云原生】&#xff0c;关注我学习云原生不迷路 &#x1f44d;如果对你有帮助&#xff0c;给博主一个免费的点赞以示鼓励 欢迎各位&#x1f50e;点赞&#x1f44d;评论收藏⭐️ &#x1f440;专栏介绍 【秒懂云原生】 目前主要更新微服务&#xff0c;…
阅读更多...
抖音本地商家怎么做短视频运营？

抖音本地商家怎么做短视频运营？

抖音作为一款以短视频为核心的本地化社交平台&#xff0c;对于实体店的短视频运营来说&#xff0c;需要注重产品定位、目标人群、短视频制作、发布、私信评论维护和同行客户挖掘等方面。 　　一、做好产品定位 　　实体店在进行短视频运营时&#xff0c;首先需要做好产品定位。…
阅读更多...
2021蓝桥杯真题图像模糊 C语言/C++

2021蓝桥杯真题图像模糊 C语言/C++

题目描述 小蓝有一张黑白图像&#xff0c;nm 个像素组成&#xff0c;其中从上到下共 n 行&#xff0c;每行从左到右 m 列。每个像素由一个 0 到 255 之间的灰度值表示。 现在&#xff0c;小蓝准备对图像进行模糊操作&#xff0c;操作的方法为&#xff1a; 对于每个像素&#…
阅读更多...
首屏加载优化

首屏加载优化

最近沉迷逛某蓝色软件&#xff0c;收益良多&#xff01;万分感谢博主 海阔_天空&#xff0c;写的太棒了&#x1f44d;&#x1f389; 下面是原文链接&#xff0c;我在原文的基础上浅做个笔记&#xff0c;方便个人快速复习 前端性能优化——首页资源压缩63%、白屏时间缩短86% -…
阅读更多...
溯源（五）之攻击源的获取

溯源（五）之攻击源的获取

溯源&#xff08;一&#xff09;之溯源的概念与意义 溯源&#xff08;二&#xff09;之 windows-还原攻击路径 溯源&#xff08;三&#xff09;之Linux-入侵排查 溯源&#xff08;四&#xff09;之流量分析-Wireshark使用 溯源整体流程的思维导图 攻击源的获取 1、获取哪些数…
阅读更多...
Spring Data JPA

Spring Data JPA

1. Spring Data环境搭建 Spring Data提供了一套统一的基于Spring的数据访问模型&#xff0c;它可以轻松的实现数据库访问&#xff0c;包括各种关系型、非关系型数据库、Map-Reduce框架、云数据服务等。 Spring Data 包含多个子项目&#xff1a; • Commons - 提供共享的基础框架…
阅读更多...
ExtScreen，为智能电视和VR设备打造的快应用引擎

ExtScreen，为智能电视和VR设备打造的快应用引擎

和手机相比&#xff0c;智能电视端的生态一直都不怎么行&#xff0c;具体来讲有以下这几个问题&#xff1a; 电视芯片运算能力差&#xff0c;配置普遍不如手机&#xff1b;电视交互基于遥控器&#xff0c;完全不同于触摸屏操作的手机&#xff1b;电视的生态比较封闭&#xff0…
阅读更多...
【JavaWeb】Cookie和Session

【JavaWeb】Cookie和Session

目录 Cookie Cookie定义 Cookie数据的来源 Cookie数据的存储 Cookie数据的使用 使用Cookie原因 Session Session定义 如何存储数据 Cookie和Session的区别 使用Cookie和Session简单实现登录页面 Cookie Cookie定义 Cookie是浏览器提供持久化存储数据的机制。 Cook…
阅读更多...
这么方便吗？用ChatGPT生成Excel（详解步骤）

这么方便吗？用ChatGPT生成Excel（详解步骤）

文章目录前言使用过 ChatGPT 的人都知道&#xff0c;提示占据非常重要的位置。而 Word&#xff0c;Excel、PPT 这办公三大件中&#xff0c;当属 Excel 最难搞&#xff0c;想要熟练掌握它&#xff0c;需要记住很多公式。但是使用提示就简单多了&#xff0c;和 ChatGPT 聊聊天就能…
阅读更多...
【vue3】基础概念的介绍

【vue3】基础概念的介绍

⭐【前言】 首先&#xff0c;恭喜你打开了一个系统化的学习专栏&#xff0c;在这个vue专栏中&#xff0c;大家可以根据博主发布文章的时间顺序进行一个学习。博主vue专栏指南在这&#xff1a;vue专栏的学习指南 &#x1f973;博主&#xff1a;初映CY的前说(前端领域) &#x1f…
阅读更多...
【音视频】zlmediakit总结一

【音视频】zlmediakit总结一

推拉流理论 推流&#xff1a;将直播的内容推送至服务器的过程。 拉流&#xff1a;指服务器已有直播内容&#xff0c;用指定地址进行拉取的过程。 拉流&#xff0c;即是指服务器里面有流媒体视频文件&#xff1b; 但zlmediakit里也有个广义的拉流概念如下。对于用户而言&#xf…
阅读更多...
面试官灵魂拷问[二]:SQL 语句中 where 条件后写上 1=1 是什么意思？

面试官灵魂拷问[二]:SQL 语句中 where 条件后写上 1=1 是什么意思？

面试官灵魂拷问系列又来更新啦! “SQL 语句中 where 条件后写上 11 是什么意思&#xff1f;” 这玩意就跟很多新语言支持尾部逗号的原理一样的。 比如 Kotlin 支持数组写成 [1, 2, 3, 4, ] &#xff0c;注意4后边那个逗号&#xff0c;为什么呢&#xff1f;因为当你增加一个项…
阅读更多...
医院LIS系统源码，云LIS系统源码，独立实验室LIS源码

医院LIS系统源码，云LIS系统源码，独立实验室LIS源码

实验室云LIS系统源码 LIS系统源码 LIS源码 基于B/S架构的实验室管理系统云LIS&#xff0c;整个系统的运行基于WEB层面&#xff0c;只需要在对应的工作台安装一个浏览器软件有外网即可访问。 私信了解更多源码内容&#xff01; 技术架构&#xff1a;Asp.NET CORE 3.1 MVC SQ…
阅读更多...
MySQL表设计思路（一对多、多对多...）

MySQL表设计思路（一对多、多对多...）

要开始单独负责需求了&#xff0c;捋一捋表设计的思路。 文章目录一、MySQL中的数据类型二、一对一的关系设计二、一对多的关系设计三、多对多的关系设计四、经验总结一、MySQL中的数据类型 字符串类型 varchar&#xff1a;即variable char &#xff0c;可边长度的字符串&#…
阅读更多...
Tomcat启动JSP项目，搞起来了

Tomcat启动JSP项目，搞起来了

虽然有点复古&#xff0c;但是还是有很多小伙伴在使用的&#xff0c;小编来一篇保姆级教程 1、用idea打开jsp项目 2、添加tomcat配置 3、点击后会出现配置框,这里画框的地方都选上&#xff0c;版本选择1.8&#xff0c;其他的信息内容默认后&#xff0c;点击确认 4、点击…
阅读更多...
FITC-PEG-Biotin,荧光素-聚乙二醇-生物素的相关检测

FITC-PEG-Biotin,荧光素-聚乙二醇-生物素的相关检测

FITC-PEG-Biotin 荧光素聚乙二醇生物素 英文名称&#xff1a;Fluorescein (polyethylene glycol) Biotin 中文名称&#xff1a;荧光素聚乙二醇生物素 激光/发射波长&#xff1a;515nm&#xff5e;520 nm 分子量&#xff1a;2000、3400、5000其他分子量可制定 溶剂&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023