天天看点

Android 布局组件

  布局用于定义activity中ui元素的排列结构,android提供了linearlayout线性布局、relativelayout相对布局 、framelayout帧布局 、tablelayout表格布局、absolutelayout坐标布局 共五种布局,可以通过两种方式声明布局:

• 在 xml 中声明 ui 元素。android 提供了对应于 view 类及其子类的xml 元素

• 运行时实例化布局元素。可以通过编程创建 view 对象和 viewgroup 对象(并操纵其属性)。

  在 xml 中声明 ui 的优点在于,可以更好地将应用的外观与控制应用行为的代码隔离。ui 描述位于应用代码外部,这意味着在修改或调整描述时无需修改您的源代码并重新编译。例如,可以创建适用于不同屏幕方向、不同设备屏幕尺寸和不同语言的 xml 布局。此外,在 xml 中声明布局还能更轻松地显示 ui 的结构,从而简化问题调试过程。因此,android应用中普遍采用在xml中布局ui元素。

布局文件都必须只包含一个根元素,并且该元素必须是视图对象或 viewgroup 对象。定义根元素之后,即可再以子元素的形式添加其他布局对象或ui元素,从而逐步构建定义布局的视图层次结构

程序清单2.3-1布局文件的定义

<?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" >

<textview android:id="@+id/text"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:text="hello, i am a textview" />

<button android:id="@+id/button"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="hello, i am a button" />

</linearlayout>

在 xml 中声明布局后,请在您的 android 项目 res/layout/ 目录中以 .xml 扩展名保存文件,以便其能够正确编译。

当编译应用时,每个 xml 布局文件都会编译到一个 view 资源中。应该在 activity.oncreate() 回调方法中使用应用代码加载布局资源。通过调用 setcontentview(),以 r.layout.layout_file_name 形式向其传递对布局资源的引用来执行此操作。

程序清单2.3-2布局文件的定义

public void oncreate(bundle savedinstancestate) {

    super.oncreate(savedinstancestate);

    setcontentview(r.layout.main_layout);

}

3.线性布局

线性布局常用属性

xml属性

备注

android:orientation

horizontal

vertical

决定横向排列,还是纵向排列

android:layout_weight

int

将父布局中剩余的尺寸按各兄弟元素的weight值比例进行分配,与“wrap_content”配合使用

android:layout_margin

dp

设置对象边缘与父布局的边缘之间的空白

android:padding

设置自身内部元素距离自身边缘的距离

android:background

color/drawable

设置整个布局画面的背景

android:gravity

top,bottom,left,right,center

元素在自身所属区域内的对齐方式

android:layout_gravity

元素在布局中的对齐方式

练习:利用线性布局实现下图所示效果。

Android 布局组件

代码如下:

4.framelayout布局

练习:完成如下图所示效果

Android 布局组件

代码:

5.相对布局relativelayout

  一种非常灵活的布局方式,通过指定界面元素与其他元素的相对位置关系,确定界面中所有元素的布局位置。特点:能够最大程度保证在各种屏幕类型的手机上正确显示界面布局表.

  相对布局属性比较多,为了便于理解和记忆通常我们把属性分为三类:

第一类:属性值为true或false

relativelayout的常用属性

android:layout_centerhrizontal

水平居中

android:layout_centervertical

垂直居中

android:layout_centerinparent

相对于父元素完全居中

android:layout_alignparentbottom

贴紧父元素的下边缘

android:layout_alignparentleft

贴紧父元素的左边缘

android:layout_alignparentright

贴紧父元素的右边缘

android:layout_alignparenttop

贴紧父元素的上边缘

第二类:属性值必须为id的引用名“@id/id-name”,

android:layout_below

在某元素的下方

android:layout_above

在某元素的的上方

android:layout_toleftof

在某元素的左边

android:layout_torightof

在某元素的右边

android:layout_aligntop

本元素的上边缘和某元素的的上边缘对齐

android:layout_alignleft

本元素的左边缘和某元素的的左边缘对齐

android:layout_alignbottom

本元素的下边缘和某元素的的下边缘对齐

第三类:属性值为具体的像素值,主要是调整ui元素之间的间距,如表2.3-5所示

表2.3-5relativelayout的常用属性

android:layout_marginbottom

离某元素底边缘的距离

android:layout_marginleft

离某元素左边缘的距离

android:layout_marginright

离某元素右边缘的距离

android:layout_margintop

离某元素上边缘的距离

离某元素右边缘的距离 

Android 布局组件

6.表格布局tablelayout

  tablelayout以行和列的形式对控件进行管理,每一行为一个tablerow对象,或一个view控件。当tablerow对象时,可在tablerow下添加子控件,默认情况下,每个子控件占据一列。有多少个子控件就有多少列;当为view时,该view将独占一行。

tablelayout的常用属性

android:layout_colum

指定该单元格在第几列显示

android:layout_span

指定该单元格占据的列数(未指定时,为1)

android:stretchcolumns

设置可伸展的列。该列可向行方向伸展,最多可占据一整行

android:shrinkcolumns

设置可收缩的列。当该列子控件的内容太多,已经挤满所在行,那么该子控件的内容将往列方向显示

练习:完成今日头条界面。

                      需要完成效果                                   已完成效果

Android 布局组件
Android 布局组件

7.绝对布局absolutelayout

  absolutelayout是根据元素指定的x/y坐标值在屏幕上进行显示的布局。容器的坐标系是以左上角为(0, 0)点,当垂直向下为y轴和水平向右为x轴。absolutelayout 没有页边框,允许元素之间互相重叠。

因为需要为元素固定坐标点,使界面代码太过刚性,以导致在不同的设备上兼容性差,开发中我们通常不推荐使用 absolutelayout ,只需简单了解即可。

7.gridlayoutbu布局

  gridlayout布局使用虚细线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列。而gridlayout使用的其实是跟linearlayout类似的api,只不过是修改了一下相关的标签而已。gridlayout的布局策略简单分为以下三个部分:

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

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

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

                需要完成效果                                               已完成效果

Android 布局组件
Android 布局组件

  

继续阅读