购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

4.2 常用布局

4.2.1 线性布局

线性布局是最常用的布局方式。有4个极其重要的参数,直接决定元素的布局和位置,这4个参数分别是:

android:layout_gravity:是本元素相对于父元素的重力方向。

android:gravity:是本元素所有子元素的重力方向。

android:orientation:线性布局以列或行来显示内部子元素。

android:layout_weight:线性布局内子元素对未占用空间水平或垂直分配权重值,其值越大,权重越大。前提是子元素设置了android:layout_width="0dp" 属性(水平方向),或android:layout_depth="0dp" 属性(垂直方向)。

【说明】 如果某个子元素的 android:layout_width="wrap_content"(水平方向),或android:layout_depth=" wrap_content”(垂直方向),则android:layout_weight 的设置值对该方向上空间的分配刚好相反。

【例 4-2】 下面创建一个 LinearLayoutDemo 项目介绍线性布局及 android:layout_weight属性的使用。

新建项目LinearLayoutDemo,在对应的布局文件中完成以下操作。

1.垂直布局

添加3个TextView,设置第2个TextView的layout_weight为1,这样第2个TextView就占满了剩余的全部空间,如图4-9(a)所示。

<TextView

android:layout_width="wrap_content"

android:layout_depth="wrap_content"

android:text="Hello World!" />

<TextView

android:layout_width="wrap_content"

android:layout_depth="wrap_content"

android:text="Hello China!"

android:layout_weight="1"/>

<TextView

android:layout_width="wrap_content"

android:layout_depth="wrap_content"

android:text="Hello Neusoft!" />

如果设置第1个和第2个TextView的layout_weight各为1,则这两个控件均分剩余的空间,如图4-9(b)所示。

2.水平布局

水平方向布局需要设置android:orientation为Horizontal,效果如图4-10所示。

(a)(b)

图4-9 垂直布局

图4-10 水平布局

首先设置android:orientation="Horizontal"。为实现在不同分辨率的设备上控件的适配,可以配合使用 android:layout_weight。本例中,登录按钮放在最右侧,用户名和密码控件分别占用剩下的空间的一半,分别设置android:layout_weight="1"。布局代码如下:

<LinearLayout

android:layout_width="match_parent"

android:layout_depth="wrap_content"

android:orientation="Horizontal">

<EditText

android:layout_width="0dp"

android:layout_depth="wrap_content"

android:layout_weight="1"

android:hint="用户名"/>

<EditText

android:layout_width="0dp"

android:layout_depth="wrap_content"

android:layout_weight="1"

android:hint="密码"/>

<Button

android:layout_width="wrap_content"

android:layout_depth="wrap_content"

android:text="登录"/>

</LinearLayout>

3.嵌套布局

在实现布局时,相同的效果可以使用不同的布局实现。如垂直布局里可以再嵌套水平布局,或水平布局里嵌套线性布局。在后续部分介绍的其他布局都可以嵌套使用。

【例 4-3】 下面通过向 LoginDemo 中添加一个注册按钮,介绍嵌套布局的使用,效果如图4-11 所示,布局结构如图4-12 所示。

图4-11 嵌套布局

图4-12 嵌套布局结构图

实现步骤如下:

(1)在LoginDemo项目中将登录按钮注释。

(2)在密码控件后面添加LinearLayout布局。

(3)在(2)中添加的LinearLayout中添加登录和注册控件,分别设置android:layout_weight="1"和android:layout_width="0dp"。

完整代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_depth="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:orientation="vertical"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context="cn.edu.neusoft.logindemo.LoginActivity"

tools:showIn="@layout/activity_login">

<TextView

android:layout_width="wrap_content"

android:layout_depth="wrap_content"

android:text=" 欢迎选择DIY" />

<EditText

android:id="@+id/username"

android:layout_width="match_parent"

android:layout_depth="wrap_content"

android:hint="用户名"/>

<EditText

android:id="@+id/password"

android:layout_width="match_parent"

android:layout_depth="wrap_content"

android:hint="密码"

android:password="true"/>

<!--<Button

android:id="@+id/login_button"

android:layout_width="wrap_content"

android:layout_depth="wrap_content"

android:text=" 登录" />-->

<LinearLayout

android:layout_width="match_parent"

android:layout_depth="wrap_content">

<Button

android:id="@+id/login_button"

android:layout_width="0dp"

android:layout_depth="wrap_content"

android:layout_weight="1"

android:text=" 登录" />

<Button

android:id="@+id/signup_button"

android:layout_width="0dp"

android:layout_depth="wrap_content"

android:layout_weight="1"

android:text="注册" />

</LinearLayout>

</LinearLayout>

(4)运行该项目,查看结果。

4.2.2 相对布局

Android布局中除了线性布局,相对布局也是一种非常常用的布局方式。相对布局(RelativeLayout)是一种非常灵活的布局方式,能够通过指定界面元素与其他元素的相对位置关系,确定界面中所有元素的布局位置。

相对布局能够最大程度地保证在各种屏幕类型的手机上正确显示界面布局,比较灵活,但掌握起来略显复杂。

下面介绍相对布局常用属性。这里将这些属性分成4个组,便于理解和记忆。

(1)设置控件与控件之间的关系和位置(见表4-4)

表4-4 控件与控件之间的关系和位置的属性

(2)设置控件与控件之间对齐的方式(是顶部、底部还是左、右对齐)(见表4-5)

表4-5 控件与控件之间的对齐属性

(3)设置控件与父控件之间对齐的方式(是顶部、底部还是左、右对齐)(见表4-6)

表4-6 控件与父控件之间对齐的属性

(4)设置控件的方向(见表4-7)

表4-7 控件方向属性

可以通过组合这些属性来实现各种各样的布局。

【例4-4】 下面创建一个LoginRDemo 项目介绍相对布局的使用,实现与图4-10 相同的登录效果。

实现步骤如下:

(1)创建项目LoginRDemo。

(2)修改布局文件代码:

首先添加Button,设置 android:layout_alignParentRight="true" 属性,将登录按钮放到最右侧,同时设置android:id属性。

然后增加密码控件,设置 id、layout_width和 layout_marginRight等属性,同时设置android:layout_toLeftOf="@+id/u_login" 将该控件放置到登录按钮的左侧,右边距为10dp。

用同样的方法添加用户名控件。具体布局代码如下:

<Button

android:layout_width="wrap_content"

android:layout_depth="wrap_content"

android:layout_alignParentRight="true"

android:id="@+id/u_login"

android:text=" 登录"/>

<EditText

android:layout_width="150dp"

android:layout_depth="wrap_content"

android:id="@+id/u_password"

android:layout_toLeftOf="@+id/u_login"

android:layout_marginRight="10dp"

android:hint=" 密码"/>

<EditText

android:layout_width="150dp"

android:layout_depth="wrap_content"

android:id="@+id/u_name"

android:layout_toLeftOf="@+id/u_password"

android:layout_marginRight="10dp"

android:hint=" 用户名"/>

(3)运行该项目,查看结果。

【案例延伸】 其实对于同一效果,可以有多种实现方式。本例中使用相对布局实现了线性布局相同的效果,请读者使用相对布局实现例4-3 的效果。

4.2.3 其他布局

除了线性布局和相对布局,常用布局还包括框架布局、表格布局、绝对布局、网格布局等。

1.框架布局

FrameLayout布局,可以理解为:一块在屏幕上提前预定好的空白区域,可以将一些元素填充在里面,如图片。所有元素都被放置在FrameLayout区域的最左上区域,而且无法为这些元素指定一个确切的位置。若有多个元素,那么后面的元素会重叠显示在前一个元素上。

2.表格布局

TableLayout是指将子元素的位置分配到行或列中。Android的一个TableLayout由许多TableRow组成,每一个TableRow都会定义一个Row。TableLayout容器不会显示Row,Column及Cell的边框线,每个Row拥有0个或多个Cell,每个Cell拥有一个View对象。

在使用表格布局时,应注意每一个Cell的宽度。

3.绝对布局

AbsoluteLayout又可称作坐标布局,可以直接指定子元素的绝对位置。这种布局简单直接,直观性强,但是由于手机屏幕尺寸差别比较大,使用绝对布局的适应性会比较差。

4.网格布局

GridLayout使用虚细线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列。而GridLayout使用的其实是与LinearLayout类似的API,只是修改了相关的标签,所以对于开发者来说,掌握GridLayout还是很容易的事情。GridLayout的布局策略简单分为以下3个部分。

① 它与LinearLayout布局一样,也分为水平和垂直两种方式,默认是水平布局,一个控件挨着一个控件从左到右依次排列,但是通过指定 android:columnCount设置列数的属性后,控件会自动换行进行排列。另一方面,对于GridLayout布局中的子控件,默认按照wrap_content的方式设置其显示,这只需要在GridLayout布局中显式声明即可。

② 若要指定某控件显示在固定的行或列,只需设置该子控件的 android:layout_row和android:layout_column属性即可,但是需要注意:android:layout_row="0"表示从第一行开始,android:layout_column="0"表示从第一列开始,这与编程语言中一维数组的赋值情况类似。

图4-13 布局面板

③ 如果需要设置某控件跨越多行或多列,只需将该子控件的android:layout_rowSpan或layout_columnSpan属性设置为数值,再设置其layout_gravity属性为fill即可,前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或整列。

以上常用布局都可以使用布局面板Layouts的布局控件进行操作,如图4-13所示。读者可以自行尝试各种布局效果和属性的使用。 G6+AJW0HNsnk6VRncjD8YZsP+m2FheWcYB/wQ+X70feIqSgcKvCO7W5eR6ICUR4Q

点击中间区域
呼出菜单
上一章
目录
下一章
×