Android App开发-简单控件(3)——常用布局

3.3 常用布局

本节介绍常见的几种布局用法,包括在某个方向上顺序排列的线性布局,参照其他视图的位置相对排列的相对布局,像表格那样分行分列显示的网格布局,CommonLayouts以及支持通过滑动操作拉出更多内容的滚动视图。

3.3.1 线性布局LinearLayout

前几个小节的例程中,XML文件用到了LinearLayout布局,它的学名为线性布局。顾名思义,线性布局像是用一根线把它的内部视图串起来,故而内部视图之间的排列顺序是固定的,要么从左到右排列,要么从上到下排列。在XML文件中,LinearLayout通过属性android:orientation区分两种方向,其中从左到右排列叫作水平方向,属性值为horizontal;从上到下排列叫作垂直方向,属性值为vertical。如果LinearLayout标签不指定具体方向,则系统默认该布局为水平方向排列,也就是默认android:orientation=“horizontal”。

下面做个实验,让XML文件的根节点挂着两个线性布局,第一个线性布局采取horizontal水平方向,第二个线性布局采取vertical垂直方向。然后每个线性布局内部各有两个文本视图,通过观察这些文本视图的排列情况,从而检验线性布局的显示效果。详细的XML文件内容如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="横排第一个"android:textColor="#000000"android:textSize="17sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="横排第二个"android:textColor="#000000"android:textSize="17sp" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="竖排第一个"android:textColor="#000000"android:textSize="17sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="竖排第二个"android:textColor="#000000"android:textSize="17sp" /></LinearLayout></LinearLayout>

运行测试App,进入如图3-11所示的演示页面,可见horizontal为横向排列,vertical为纵向排列,说明android:orientation的方向属性确实奏效了.

在这里插入图片描述

除了方向之外,线性布局还有一个权重概念,所谓权重,指的是线性布局的下级视图各自拥有多大比例的宽高

比如一块蛋糕分给两个人吃,可能两人平均分,也可能甲分三分之一,乙分三分之二。两人平均分的话,先把蛋糕切两半,然后甲分到一半,乙分到另一半,此时甲乙的权重比为1:1。甲分三分之一、乙分三分之二的话,先把蛋糕平均切成三块,然后甲分到一块,乙分到两块,此时甲乙的权重比为1:2。

就线性布局而言,它自身的尺寸相当于一整块蛋糕,它的下级视图们一起来分这个尺寸蛋糕,有的视图分得多,有的视图分得少。分多分少全凭每个视图分到了多大的权重,这个权重在XML文件中通过属性android:layout_weight来表达。

把线性布局看作蛋糕的话,分蛋糕的甲乙两人就相当于线性布局的下级视图。假设线性布局平均分为左右两块,则甲视图和乙视图的权重比为1:1,意味着两个下级视图的layout_weight属性都是1。不过视图有宽高两个方向,系统怎知layout_weight表示哪个方向的权重呢?所以这里有个规定,一旦设置了layout_weight属性值,便要求layout_width填0dp或者layout_height填0dp。

如果layout_width填0dp,则layout_weight表示水平方向的权重,下级视图会从左往右分割线性布局;

如果layout_height填0dp,则layout_weight表示垂直方向的权重,下级视图会从上往下分割线性布局。

按照左右均分的话,线性布局设置水平方向horizontal,且甲乙两视图的layout_width都填0dp,layout_weight都填1,此时横排的XML片段示例如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".LinearLayoutActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:background="#ff0000"><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:text="横排第一个"android:textColor="#000000"android:textSize="17sp" /><TextViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:text="横排第二个"android:textColor="#000000"android:textSize="17sp" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:gravity="center"android:background="#00ffff"><TextViewandroid:layout_width="wrap_content"android:layout_height="0dp"android:layout_weight="1"android:text="竖排第一个"android:textColor="#000000"android:textSize="17sp" /><TextViewandroid:layout_width="wrap_content"android:layout_height="0dp"android:layout_weight="1"android:text="竖排第二个"android:textColor="#000000"android:textSize="17sp" /></LinearLayout></LinearLayout>

把上面两个片段放到新页面的XML文件,其中第一个是横排区域采用红色背景(色值为ff0000),第二个是竖排区域采用青色背景(色值为00ffff)。重新运行测试App,打开演示界面如图3-12所示,可见横排区域平均分为左右两块,竖排区域平均分为上下两块。

在这里插入图片描述

3.3.2 相对布局RelativeLayout

线性布局的下级视图是顺序排列着的,另一种相对布局的下级视图位置则由其他视图决定。相对布局名为RelativeLayout,因为下级视图的位置是相对位置,所以得有具体的参照物才能确定最终位置。

如果不设定下级视图的参照物,那么下级视图默认显示在RelativeLayout内部的左上角。用于确定下级视图位置的参照物分两种,一种是与该视图自身平级的视图;另一种是该视图的上级视图(也就是它归属的RelativeLayout)。

综合两种参照物,相对位置在XML文件中的属性名称说明见表

在这里插入图片描述

为了更好地理解上述相对属性的含义,接下来使用RelativeLayout及其下级视图进行布局来看看实际效果图。下面是演示相对布局的XML文件例子:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="150dp"tools:context=".RelativeLayoutActivity"><TextViewandroid:id="@+id/tv_center_horizontal"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:background="#FFFFFF"android:text="我在水平中间"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:background="#FFFFFF"android:text="我在中间"android:textColor="#E91E63"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_center_vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:background="#FFFFFF"android:text="我在垂直中间"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_parent_left"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:background="#FFFFFF"android:text="我跟上级左边对齐"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_parent_right"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:background="#FFFFFF"android:text="我跟上级右边对齐"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_parent_top"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:background="#FFFFFF"android:text="我跟上级顶部对齐"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_parent_bottom"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:background="#FFFFFF"android:text="我跟上级底部对齐"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_left_center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignTop="@id/tv_center"android:layout_toLeftOf="@id/tv_center"android:background="#FFFFFF"android:text="我跟中间左边对齐"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_right_center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignTop="@id/tv_center"android:layout_toRightOf="@id/tv_center"android:background="#FFFFFF"android:text="我跟中间右边对齐"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_above_center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/tv_center"android:layout_alignLeft="@id/tv_center"android:background="#FFFFFF"android:text="我跟中间上面对齐"android:textColor="#000000"android:textSize="11sp" /><TextViewandroid:id="@+id/tv_below_center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/tv_center"android:layout_alignRight="@id/tv_center"android:background="#FFFFFF"android:text="我跟中间下面对齐"android:textColor="#000000"android:textSize="11sp" />
</RelativeLayout>

上述XML文件的布局效果如图所示,RelativeLayout的下级视图都是文本视图,控件上的文字说明了所处的相对位置,具体的控件显示方位正如XML属性中描述的那样

在这里插入图片描述

3.3.3 网格布局GridLayout

虽然线性布局既能在水平方向排列,也能在垂直方向排列,但它不支持多行多列的布局方式,只支持单行(水平排列)或单列(垂直排列)的布局方式。若要实现类似表格那样的多行多列形式,可采用网格布局GridLayout

网格布局默认从左往右、从上到下排列,它先从第一行从左往右放置下级视图,塞满之后另起一行放置其余的下级视图,如此循环往复直至所有下级视图都放置完毕。为了判断能够容纳几行几列,网格布局新增了android:columnCount与android:rowCount两个属性,其中columnCount指定了网格的列数,即每行能放多少个视图;rowCount指定了网格的行数,即每列能放多少个视图。

下面是运用网格布局的XML布局样例,它规定了一个两行两列的网格布局,且内部容纳四个文本视图。XML文件内容如下所示:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:columnCount="2"android:rowCount="2"tools:context=".GridLayoutActivity"><TextViewandroid:layout_width="0dp"android:layout_columnWeight="1"android:layout_height="60dp"android:background="#FFCCCC"android:gravity="center"android:text="浅红色"android:textColor="#000000"android:textSize="17sp" /><TextViewandroid:layout_width="0dp"android:layout_columnWeight="1"android:layout_height="60dp"android:background="#FFAA00"android:gravity="center"android:text="橙色"android:textColor="#000000"android:textSize="17sp" /><TextViewandroid:layout_width="0dp"android:layout_columnWeight="1"android:layout_height="60dp"android:background="#660066"android:gravity="center"android:text="深紫色"android:textColor="#000000"android:textSize="17sp" /><TextViewandroid:layout_width="0dp"android:layout_columnWeight="1"android:layout_height="60dp"android:background="#00FF00"android:gravity="center"android:text="绿色"android:textColor="#000000"android:textSize="17sp" /></GridLayout>

运行App观察到的界面如图所示。

在这里插入图片描述

由上图可见,App界面的第一行分布着浅红色背景与橙色背景的文本视图,第二行分布着绿色背景与深紫色背景的文本视图,说明利用网格布局实现了多行多列的效果。

3.3.4 滚动视图ScrollView

手机屏幕的显示空间有限,常常需要上下滑动或左右滑动才能拉出其余页面内容,可惜一般的布局节点都不支持自行滚动,这时就要借助滚动视图了。与线性布局类似,滚动视图也分为垂直方向和水平方向两类,其中垂直滚动视图名为ScrollView,水平滚动视图名为HorizontalScrollView。这两个滚动视图的使用并不复杂,主要注意以下3点:

(1)垂直方向滚动时,layout_width属性值设置为match_parent,layout_height属性值设置为wrap_content。

(2)水平方向滚动时,layout_width属性值设置为wrap_content,layout_height属性值设置为match_parent。

(3)滚动视图节点下面必须且只能挂着一个子布局节点,否则会在运行时报错Caused by:java.lang.IllegalStateException:ScrollView can host only one direct child。

下面是垂直滚动视图ScrollView和水平滚动视图HorizontalScrollView的XML例子:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".ScrollVIewActivity"><HorizontalScrollViewandroid:layout_width="wrap_content"android:layout_height="200dp"><!--水平方向的线性布局,两个子视图的颜色分别为青色和黄色--><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="horizontal"><Viewandroid:layout_width="300dp"android:layout_height="match_parent"android:background="#AAFFFF" /><Viewandroid:layout_width="300dp"android:layout_height="match_parent"android:background="#FFFFF0"/></LinearLayout></HorizontalScrollView><ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"><!--垂直方向的线性布局,两个子视图的颜色分别为青色和黄色--><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="vertical"><Viewandroid:layout_width="match_parent"android:layout_height="400dp"android:background="#00FF00" /><Viewandroid:layout_width="match_parent"android:layout_height="400dp"android:background="#FFFFAA"/></LinearLayout></ScrollView></LinearLayout>

运行测试App,可知ScrollView在纵向滚动,而HorizontalScrollView在横向滚动。在这里插入图片描述
有时ScrollView的实际内容不够,又想让它充满屏幕,怎么办呢?如果把layout_height属性赋值为match_parent,结果还是不会充满,正确的做法是再增加一行属性android:fillViewport(该属性为true表示允许填满视图窗口),属性片段举例如下:

  android:layout_height="match_parent"android:fillViewport="true"

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅聊 DNS 和 host

我们先来了解一下访问一个网站的基本流程 我们访问一个网站&#xff0c;自然就是访问网站的服务器&#xff0c;但是访问一个网站的服务器&#xff0c;自然要知道它的地址&#xff0c;服务器的地址就是一串数字&#xff0c;如 也就是我们说的 ip 地址&#xff0c;输入 i…

Redis的数据类型

目录 string 1.编码方式 2.应用场景 3.常用命令 hash 1.编码方式 2.应用场景 3.常用命令 list 1.编码方式 2.应用场景 3.常用命令 set 1.编码方式 2.应用场景 3.常用命令 zset 1.编码方式 2.应用场景 3.常用命令 如何理解Redis的编码方式 embs…

以太网交换基础VLAN原理与配置

目录 7.以太网交换基础 7.1.以太网协议 7.2.以太网帧介绍 7.3.以太网交换机 7.4.同网段数据通信全过程 8.VLAN原理与配置 8.1.VLAN的基本概念 8.2.VLAN的应用 7.以太网交换基础 7.1.以太网协议 以太网是当今现有局域网(Local Area Network,LAN)采用的最通用的通信协议…

SpringBoot自定义全局异常处理器

文章目录 一、介绍二、实现1. 定义全局异常处理器2. 自定义异常类 三、使用四、疑问 一、介绍 Springboot框架提供两个注解帮助我们十分方便实现全局异常处理器以及自定义异常。 ControllerAdvice 或 RestControllerAdvice&#xff08;推荐&#xff09;ExceptionHandler 二、…

Python第 1 课 Python 介绍与安装

文章目录 第 1 课 Python 介绍与安装1.Python介绍1.1 面向对象概述1.2 Python 概述1.3 Python 特点 2.查看Python3.pyCharm 安装方法3.1 下载 pyCharm3.2 打开 pyCharm3.3 汉化 pyCharm3.4 pyCharm 的基本介绍和基本使用方法 第 1 课 Python 介绍与安装 1.Python介绍 1.1 面向…

消息中间件之八股面试回答篇:三、RabbitMQ如何解决消息堆积问题(100万条消息堆积)+RabbitMQ高可用性和强一致性机制+回答模板

RabbitMQ中的消息堆积问题 当生产者发送消息的速度超过了消费者处理消息的速度&#xff0c;就会导致队列中的消息堆积&#xff0c;直到队列存储消息达到上限。之后发送的消息就会成为死信&#xff0c;可能会被丢弃&#xff0c;这就是消息堆积问题。 解决消息堆积有三种种思路…

网络工程师必学知识:2、数据链路层-II型以太帧的封装

1.概述&#xff1a; 针对于链路层&#xff0c;华为官网IP报文格式大全里面包含了很多。如下图&#xff1a; 今天主要分析Ethernet II以太帧。 2.Frame Format&#xff1a; 12Byte&#xff08;inter frame gap&#xff09;|7B(同步码)|1B(定界符)|6B(DMAC)|6B(SMAC)|2B(Type)…

【Demo】基于CharacterController组件的角色控制

项目介绍 项目名称&#xff1a;Demo1 项目版本&#xff1a;1.0 游戏引擎&#xff1a;Unity2020.3.26f1c1 IDE&#xff1a;Visual Studio Code 关键词&#xff1a;Unity3D&#xff0c;CharacterController组件&#xff0c;角色控制&#xff0c;自定义按键&#xff0c;Scrip…

解决PyCharm的Terminal终端conda环境默认为base无法切换的问题

问题描述 在使用PyCharm的Terminal终端时&#xff0c;打开的默认环境为base。 在使用切换命令时&#xff0c;依旧无法解决。 解决方法 1、输入以下命令以查看conda的配置信息&#xff1a; conda config --show2、在输出中找到 auto_activate_base 的行&#xff0c;发现被…

IMX6ULL驱动学习——通过总线设备驱动模型点亮野火开发板小灯【参考韦东山老师教程】

参考&#xff1a;【IMX6ULL驱动开发学习】11.驱动设计之面向对象_分层思想&#xff08;学习设备树过渡部分&#xff09;-CSDN博客 韦东山课程&#xff1a;LED模板驱动程序的改造_总线设备驱动模型 我使用的开发板&#xff1a;野火imx6ull pro 欢迎大家一起讨论学习 实现了总线设…

uniapp 实现路由拦截,权限或者登录控制

背景&#xff1a; 项目需要判断token&#xff0c;即是否登录&#xff0c;登录之后权限 参考uni-app官方&#xff1a; 为了兼容其他端的跳转权限控制&#xff0c;uni-app并没有用vue router路由&#xff0c;而是内部实现一个类似此功能的钩子&#xff1a;拦截器&#xff0c;由…

数字图像处理(实践篇)三十三 OpenCV-Python从立体图像创建深度图实践

目录 一 方案 二 实践 双眼视觉是指人类使用两只眼睛同时观察同一场景,通过左右眼的视差来感知深度。左眼和右眼的视差是由于它们在空间中的位置不同而产生的,这种差异可以被大脑解读为物体的距离和深度。为了从立体图像构建深度图,找到两个图像之间的视差,可以初始化并创…

Java强训day7(选择题编程题)

选择题 public class Test01{private static int x 100;public static void main(String[] args) {Test01 hs1 new Test01();hs1.x;Test01 hs2 new Test01();hs2.x;hs1new Test01();hs1.x;Test01.x--;System.out.println("x"x);} }public class Test01{private …

倒排索引的构建与查询

倒排索引是信息检索的重要技术&#xff0c;本文将基于中文短信数据&#xff08;数据集可在本文所附资源处下载或点击此处链接下载&#xff09;&#xff0c;编程构建倒排索引并实现布尔查询。 1. 功能设计 用户输入查询&#xff0c;按下回车键&#xff0c;如果该查询作为单独的…

Mybatis-Plus入门

Mybatis-Plus入门 MyBatis-Plus 官网&#xff1a;https://mp.baomidou.com/ 1、简介 MyBatis-Plus (简称 MP) 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、 提高效率而生。 https://github.com/baomidou/mybatis-p…

【Java】Spring注解开发

一、Spring注解开发 1 注解开发定义Bean对象【重点】 目的&#xff1a;xml配置Bean对象有些繁琐&#xff0c;使用注解简化Bean对象的定义 问题导入 问题1&#xff1a;使用什么标签进行Spring注解包扫描&#xff1f; 问题2&#xff1a;Component注解和Controller、Service、R…

Blender教程(基础)-初始用户界面-01

开始第一天的Blender学习、也是业余学习。希望记录下这一份学习的过程、并且分享给大家。今天带大家认识Blender这一款软件&#xff0c;先说说我为什么选择了Blender&#xff0c;我在软件市场找了好久&#xff0c;市场上其他雷同软件都是要么收费要么不好用&#xff0c;最终决定…

【Vitest】 Vitest测试框架的简单使用

简言 在了解vue源码的时候接触到了vitest测试框架,它的官网语言有中文&#xff0c;所以本篇只作简单的使用介绍。 Vitest官网 Vitest 旨在将自己定位为 Vite 项目的首选测试框架&#xff0c;即使对于不使用 Vite 的项目也是一个可靠的替代方案。它本身也兼容一些Jest的API用法…

寒假思维训练计划day16 A. Did We Get Everything Covered?

今天更新一道1月27号晚上div2的C题作为素材&#xff0c;感觉用到了我的构造题总结模型&#xff0c;我总结了一系列的模型和例题。 摘要&#xff1a; Part1 定义"边界贪心法" Part2 题意 Part3 题解 Part4 代码 Part5 思维构造题模型和例题 Part1 边界贪心…

【服务器Midjourney】创建部署Midjourney网站

目录 🌺【前言】 🌺【准备】 🌺【宝塔搭建MJ】 🌼1. 给服务器添加端口 🌼2. 使用Xshell连接服务器 🌼3. 安装docker 🌼4. 安装Midjourney程序 🌼5. 绑定域名+申请SSL证书 🌼6. 更新网站