当前位置: 开发笔记 > 编程语言 > 正文

二、新布局——网格布局

作者：奋斗兵 | 来源：互联网 | 2023-09-16 11:31

二、新布局——网格布局安卓冰淇淋三明治引入了一种新的布局，称为网格布局

二、新布局——网格布局

安卓冰淇淋三明治引入了一种新的布局，称为网格布局。这个布局是一个优化的布局，可以用来代替线性布局和相对布局。本章介绍如何使用和配置网格布局。

本章涵盖的主题如下:

为什么要使用网格布局

添加网格布局

配置网格布局

网格布局

网格布局是将其视图空间分成行、列和单元格的布局。网格布局自动将视图放入其中，但也可以定义列和行索引，将视图放入网格布局。利用单元格的 span 属性，可以使视图跨越多行或多列。以下代码块显示了使用 GridLayout布局的布局文件示例:

xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/GridLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="2" android:orientation="horizontal" android:rowCount="2"> <TextView android:id="@+id/textView1" android:text="Cell 1,1" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textView2" android:text="Cell 1,2" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textView3" android:text="Cell 2,1" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textView4" android:text="Cell 2,2" android:textAppearance="?android:attr/textAppearanceLarge" /> GridLayout>

当在模拟器中查看这个布局 XML 时，它看起来像下面的截图:

GridLayout

在这个布局 XML 文件中，我们放置了四个 TextView组件，文本为Cell 1,1、Cell 1,2、Cell 2,1和Cell 2,2。当网格布局orientation设置为horizontal、 columnCount、 rowCount属性设置为2时，网格布局首先将项目自动放置到第一行，当项目数达到columnCount时；它开始将项目放在第二行。

在这个布局中你首先会注意到的是TextView组件没有layout_width 和 layout_height属性。不使用这些属性是因为GridLayout使用layout_gravity属性来确定细胞的大小，而不是layout_width和layout_height属性。通常gravity属性用于对齐视图的内容，但在GridLayout中，它用于不同的目的。可用的重力常数包括left、top、right、bottom、center_horizontal、center_vertical、center、fill_horizontal、fill_vertical和fill。

在GridLayout中，可以通过指定列和行的索引来明确定义视图将被放置的单元格。如果未指定索引，GridLayout将根据GridLayout布局的方向自动将视图放置到第一个可用位置。

为什么要使用网格布局

线性布局和相对布局是安卓用户界面设计中最常用的布局。对于简单的用户界面，它们是一个很好的选择，但是当用户界面变得复杂时，嵌套线性布局的使用往往会增加。嵌套布局(任何类型)都会影响性能，而且深度超过 10 的嵌套线性布局可能会导致应用崩溃。因此，您应该避免使用太多嵌套的线性布局块，或者应该使用相对布局来减少嵌套的线性布局块。这些复杂用户界面布局的另一个缺点是可读性困难。很难维护嵌套的 LinearLayout 或 RelativeLayout 具有许多视图的布局。在这些情况下使用网格布局是一个不错的选择。使用网格布局可以避免过多的嵌套线性布局。此外，维护网格布局要容易得多。许多使用线性布局、相对布局或表格布局的用户界面可以转换为网格布局，网格布局将提供性能增强。与其他布局相比，网格布局的一个主要优势是，您可以控制视图在水平轴和垂直轴上的对齐。

添加网格布局

在本节中，我们将把一个安卓应用从 T2 线性布局迁移到网格布局。带有LinearLayout的应用的布局的 XML 代码显示在下面的代码块中:

xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#ffffff"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > —LinearLayout that contains labels--> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Username:" android:textAppearance="?android:attr/textAppearanceSmall" android:textColor="#000000" android:layout_gravity="right"/> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Password:" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#000000" /> LinearLayout> —Linearlayout that contains fields--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <EditText android:id="@+id/editText1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/borders_bottom_right" android:ems="10" > EditText> <EditText android:id="@+id/editText2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/borders_bottom_right" android:ems="10" /> LinearLayout> LinearLayout> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="OK" android:layout_gravity="center_horizontal"/> LinearLayout>

在之前的布局文件中使用的可绘制 borders_bottom_right背景显示在以下代码块中:

xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle"> <stroke android:width="1dp" android:color="#FFFFFF" /> <solid android:color="#000000" /> shape> item> layer-list>

屏幕将如下所示:

Adding a GridLayout

在布局 XML 代码中可以看到，为了实现简单的登录屏幕，我们使用了三个嵌套的LinearLayout实例。如果这个屏幕是用GridLayout设计的，布局的 XML 代码看起来像下面的代码块:

xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff" android:columnCount="2" android:orientation="horizontal" > <TextView android:id="@+id/textView1" android:layout_gravity="right" android:text="Username:" android:textColor="#000000"/> <EditText android:id="@+id/editText1" android:ems="10" android:background="@drawable/borders"/> <TextView android:id="@+id/textView2" android:text="Password:" android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#000000"/> <EditText android:id="@+id/editText2" android:ems="10" android:background="@drawable/borders"> EditText> <Button android:id="@+id/button1" android:layout_columnSpan="2" android:text="Button" android:layout_gravity="center_horizontal"/> GridLayout>

我们将 columnCount属性设置为2，因为我们在一行中有一个TextView组件和一个EditText组件。之后，我们放置了视图，但没有指定行或列索引。网格布局根据orientation和columnCount自动放置。我们在中将 layout_columnSpan属性设置为2，以使按钮跨越两列。利用layout_gravity属性，我们使按钮出现在行的中心。正如您在布局的 XML 代码中看到的，使用 GridLayout 设计同一个屏幕非常简单和容易。此外，使用 GridLayout 可以更容易地进行对齐，并且这段代码具有更好的可读性。

自 API Level 14 以来，GridLayout 一直可用，因此AndroidManifest.xml文件中的最小 SDK 属性应设置为14或更大，如下代码行所示:

<uses-sdkandroid:minSdkVersion="14" />

配置网格布局

首先，我们将编写一个示例GridLayout XML 代码，然后我们将使用该代码作为其他示例的基础。示例布局的 XML 代码看起来像下面的代码块:

xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:columnCount="3" android:rowCount="3" > <TextView android:text="[1,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[1,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[1,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> GridLayout>

使用前面的代码块，屏幕将如下所示:

Configuring GridLayout

在布局 XML 代码中可以看到，TextView组件放置时没有索引，根据orientation、columnCount和rowCount自动定位在GridLayout中。现在我们将[1, 3]的索引号设置为[2, 1]。布局 XML 代码应该如下所示:

xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:columnCount="3" android:rowCount="3" > <TextView android:text="[1,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[1,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[1,3]" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_row="1" android:layout_column="1"/> <TextView android:text="[2,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> GridLayout>

屏幕应该如下所示:

Configuring GridLayout

正如您在布局 XML 代码(突出显示的部分)中看到的，我们使用layout_row和layout_column属性设置行和列索引。索引从零开始，因此带有文本[1, 3]的TextView组件位于第二行第二列。这里有趣的部分是带有文字[2, 1]的 TextView组件放在[1, 3]之后。这是因为[2, 1]没有索引， GridLayout 在[1, 3]之后继续定位。也就是说网格布局在最后放置的视图之后寻找第一个可用的位置。另一个值得注意的事情是，在移动索引后，行数增加到4，尽管我们将行数设置为3。 GridLayout 在这种情况下不抛出异常。

在下面的示例中，我们将交换[1, 2]和[2, 2]。布局 XML 代码应该如下所示:

xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:columnCount="3" android:rowCount="3" > <TextView android:text="[1,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[1,2]" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_row="1"/> <TextView android:text="[1,3]" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_row="0"/> <TextView android:text="[2,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,2]" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_row="0" android:layout_column="1"/> <TextView android:text="[2,3]" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_row="1"/> <TextView android:text="[3,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> GridLayout>

屏幕应该如下图所示:

Configuring GridLayout

正如您在布局 XML 代码中看到的，我们首先将[1, 2]的layout_row设置为1。这样，它就会代替[2, 2]出现。然后我们必须将[1, 3]的layout_row设置为0、layout_column设置为2，因为GridLayout的光标位置是通过设置[1, 2]的索引来改变的。如果我们不改变[1, 3]的指数，它将被放在[1, 2]指数的新位置之后。之后，为了使[2, 2]出现在[1, 2]的位置，我们将[2, 2]的layout_row设置为0，将layout_column设置为1。最后，我们必须将[2, 3]的layout_row设置为1，以使其出现在[1, 2]指数的新位置之后。在 GridLayout 中配置视图似乎有点复杂，但是如果你在模拟器中尝试一下，你会发现并没有那么难。

在下面的示例代码中，我们将删除[2, 2]并使[1, 2]跨越两行。布局 XML 代码如下所示:

xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:columnCount="3" android:rowCount="3" > <TextView android:text="[1,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[1,2]" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_rowSpan="2" android:layout_gravity="fill" android:gravity="center"/> <TextView android:text="[1,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> GridLayout>

使用前面的代码块，我们得到如下屏幕:

Configuring GridLayout

在布局 XML 代码中可以看到，我们删除了单元格[2,2]，将layout_rowSpan property of[1,2]设置为2。这样的话，[1,2]将会覆盖两排。我们将layout_gravity属性设置为fill，以使其填充两行的空间。然后我们将gravity属性设置为center，以便使TextView组件的内容与其覆盖的空间中心对齐。

`# 一个新的视角——空间

太空是安卓冰淇淋三明治推出的新观点。用于在视图之间放置空间。在网格布局中非常有用。在下面的布局 XML 示例代码中，我们删除了带有文本[2, 2]和[2, 3]的TextView组件，然后放入空间来代替它们，如下代码块所示:

xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:columnCount="3" android:rowCount="3" > <TextView android:text="[1,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[1,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[1,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[2,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <Space android:layout_row="1" android:layout_column="1" android:layout_columnSpan="2" android:layout_gravity="fill"/> <TextView android:text="[3,1]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,2]" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:text="[3,3]" android:textAppearance="?android:attr/textAppearanceLarge"/> GridLayout>

正如您在布局 XML 代码中看到的，我们删除了带有文本[2,2]和[2,3]的TextView组件。我们将Space视图放在第1行和第1列。我们将layout_columnSpan设置为2，以使其跨越两列。屏幕将如下所示:

A new view – Space

总结

线性布局和相对布局是安卓应用开发中最常见的布局。然而，当设计复杂的用户界面时，您可能需要使用嵌套的线性布局或相对布局。这是代码性能和可读性的一个缺点，因为这些布局增加了视图层次结构，导致视图刷新时不必要的迭代。 GridLayout 是安卓冰淇淋三明治中引入的新布局，它克服了这些问题。您可以在不需要嵌套布局的情况下设计用户界面。如果您正在为 API Level 14 及更高版本开发应用，最好使用 GridLayout。在下一章中，我们将了解安卓冰淇淋三明治引入的新社交应用编程接口。`

推荐阅读

int
kotlin动画实现上下移动、放大缩小、旋转功能

本文介绍了使用kotlin实现动画效果的方法，包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果，并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例，可以用来实现放大缩小的效果。 ... [详细]

蜡笔小新 2023-12-14 17:29:08
match
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
match
Android开发实现的计时器功能示例

本文分享了Android开发实现的计时器功能示例，包括效果图、布局和按钮的使用。通过使用Chronometer控件，可以实现计时器功能。该示例适用于Android平台，供开发者参考。 ... [详细]

蜡笔小新 2023-12-12 22:51:19
utf-8
在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板

本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤，包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读，读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]

蜡笔小新 2023-12-12 17:52:50
require
Spring源码解密之默认标签的解析方式分析

本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]

蜡笔小新 2023-12-14 17:24:50
utf-8
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
int
XML介绍与使用的概述及标签规则

本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细]

蜡笔小新 2023-12-13 17:39:50
less
Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏

本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能，并分享了解决思路和经验。 ... [详细]

蜡笔小新 2023-12-13 13:12:05
select
MyBatis多表查询与动态SQL使用

本文介绍了MyBatis多表查询与动态SQL的使用方法，包括一对一查询和一对多查询。同时还介绍了动态SQL的使用，包括if标签、trim标签、where标签、set标签和foreach标签的用法。文章还提供了相关的配置信息和示例代码。 ... [详细]

蜡笔小新 2023-12-12 17:12:51
utf-8
移动端常用单位——rem的使用方法和注意事项

本文介绍了移动端常用的单位rem的使用方法和注意事项，包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值，以适应不同设备的屏幕大小。此外，还提到了rem目前在移动端的主流地位。 ... [详细]

蜡笔小新 2023-12-12 07:20:50
int
iOS超签签名服务器搭建及其优劣势

本文介绍了搭建iOS超签签名服务器的原因和优势，包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势，即一个证书只能安装100个，成本较高。文章还详细介绍了超签的实现原理，包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后，还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]

蜡笔小新 2023-12-11 20:23:23
copy
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
int
如何在Android中通过代码更改Recycler视图项的背景颜色

本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断，可以实现根据条件改变背景颜色的效果。同时，还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]

蜡笔小新 2023-12-14 12:45:01
select
MySQL表分区的创建、增加和删除方法详解

本文详细介绍了MySQL表分区的创建、增加和删除方法，包括查看分区数据量和全库数据量的方法。欢迎大家阅读并给予点评。 ... [详细]

蜡笔小新 2023-12-13 12:26:11
select
如何进行Web.Config自定义配置节的配置转换

本文讨论了如何使用Web.Config进行自定义配置节的配置转换。作者提到，他将msbuild设置为详细模式，但转换却忽略了带有替换转换的自定义部分的存在。 ... [详细]

蜡笔小新 2023-12-11 17:54:55

奋斗兵

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章