Android开发——布局详解（上）

 

Android开发——布局详解（上）

在昨天的学习中，我们动手实现了第一个Android程序：手机拨号程序。今天学习的是关于布局（Layout），让我想起了之前学过的HTML布局和在JFrame中学习的布局方式（GUI）：BorderLayout、FloowLayout、GridbagLayout等等。

Android的布局方式和以前学习的布局方式如出一辙。Android的布局方式分为四种：

1.LinearLayout（线性布局）

2.RelativeLayout（相对布局）

3.TableLayout（表格布局）

4.AbsoluteLayout（绝对布局）【暂时没讲】

下面分别介绍一下各种布局方式：

线性布局，就是在该标签下的所有子元素会根据其orientation属性的值来决定是按行还是按列逐个显示。

小总结：orientation有两个属性值：一个是按列的“vertical”，一个是按行布局的“horizontal”；

写一个线性布局的实例:

Main.xml

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

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/name_text" />

<EditView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/EditView"

/>

<Button

 

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/ok_text"

android:layout_aglin/>

</LinearLayout>

如上是整个LinearLayout布局文件，我们可以看到布局文件是XML格式的，命名空间：Android指向网络上的一个文件，意味着书写所有属性的时候都需要以“Android”开头；

Android:layout_width和Android:layout_height这两个属性是用来设置组件元素的宽和高，无论用哪种布局方式，这些属性都是通用的；这两个属性有三个值：

a)值一：Fill_parent，代表填满元素，对于顶级元素来说，父级元素就是手机屏幕了。

b)值二：wrap_content，代表元素的大小仅包裹自身内容，数字代表占用相应的px值。

c)值三：match_parent，也就是我们以前设置的数字大小，自定义组建的宽高，单位是dp（最好使用dp，当然也可以使用px【查的资料上这么说】）

 

然后说一下实例中的三种常见组建：<TextView>，就是标签组件，我觉得就是类似于HTML中的表单属性一样，只不过Android中把组件中的属性都写在了自己的元素集合中，例如：

在这里文本组件中，我们定义了组建的宽高和属性值，定义了静态内部类id中名为EditView的唯一标识符，属性值的定义后面再复习。

第二种组件是:<EditView>，文本组件，相当于HTML写表单的<input type=”text”>一样，用来输入内容的组件。

第三种组件是：<Button>,按钮组件。

线性布局文件的根元素是：<LinearLayout>

 

接着说一下string.xml文件内容的读取

当我们在string.xml文件中写好了所有的文本和数值内容后，我们需要在使用组件的时候把这些值赋给组件的属性，例如：

<TextView

Android:text=”@string/name”

/>

如上代码所示，赋值的格式为这样的,”@”是固定格式，后面是值所在的文件名，“/”后面是string.xml文件中对应的“name”的值。

最后简单写一个表单实例：

String.xml文件：

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

<resources>

 

<stringname="system">页面布局作业</string>

<stringname="user">用户名:</string>

<stringname="pass">密码:</string>

<stringname="ok">登录</string>

<stringname="cancle">取消</string>

 

</resources>

<!—一共是五条文本属性-->

布局文件main.xml：

 

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

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

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

 

 

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="@string/system"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/user"

android:id="@+id/user_text"

android:layout_alignParentLeft="true"

/>

 

<EditText

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/text1"

android:layout_toRightOf="@id/user_text"

/>

 

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/pass"

android:id="@+id/pass_text2"

android:layout_alignParentLeft="true"

/>

 

 

<EditText

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/text2"

android:layout_toRightOf="@id/pass_text2"

/>

<Button

android:id="@+id/cancle_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/cancle"

android:layout_alignParentRight="true"

/>

 

<Button

android:id="@+id/ok_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/ok"

android:layout_toLeftOf="@id/cancle_button"

/>

</LinearLayout>

在布局文件中，我写了一个登录的表单，实现后的效果如图：

================================================================

 

 

 

线性布局就说这么多，下面说一下相对布局方式。

相对布局中的视图组件是按相互之间的相对位置来确定的，并不是线性布局中的必须按行或按列单个显示。我觉得相对布局比线性布局唯一好的一点是：能够在一行内显示多个组件，不像线性布局只能按行或列排列不同组件且每行都只能有一个组件。

相对布局方式的根元素为：<RelativeLayout>，同线性布局一样，也是XML文件，命名空间也是：Android；在不同组件排列的时候，提供了多种方式，比如：

Android:layout_below=”@id/text”:将该元素放到id为text的元素的下面

Android:layout_toLeftOf=”@id/ok”:放到id为ok的元素左边

android:layout_alignParentRight="true"把该元素放到最右端

在写今天作业的时候，要求“登录”和“取消”这两个Button按钮居中排列，我就是使用：

<Button

Android:layout_alignParentRight=”true”

Android:id=”@+id/cancle”/>

<Button

Android:layout_toLeftOf=”@id/cancle/>

通过如上代码，先把“取消”这个按钮放到最右边，再让“登录”按钮排列到“取消”按钮的左边，实现它们的正确排列。

Android:gravity="center"设置文本的对齐方式（图中为居中）

Android:layout_alignTop=”@id/ok”:对齐id为ok的元素的顶部 android:layout_alignBaseline="@+id/cancel_button"该元素文本值对准基线

padding属性指定视图与视图内容之间的内边距——今天遇到<TextView>元素的值与<EditView>元素的边框之间有很大的距离无法紧靠，现在指出是因为padding的边距不为0px导致的。

=============================================

相对布局提供了很多对齐方式，详细的可以查一下API。常用的方式是线性布局和相对布局的嵌套，只要正确添加根标签就可以实现。

下面用线性布局方式中的实例通过嵌套实现登录表单：

<?xmlversion="1.0" encoding="utf-8"?>

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

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

 

 

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="@string/system"

/>

<!-- 使用绝对定位对齐用户框 -->

<RelativeLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/user"

android:id="@+id/user_text"

android:layout_alignParentLeft="true"

/>

 

<EditText

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/text1"

android:layout_toRightOf="@id/user_text"

/>

 

</RelativeLayout>

<!-- 使用绝对定位对齐密码框 -->

<RelativeLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/pass"

android:id="@+id/pass_text2"

android:layout_alignParentLeft="true"

/>

 

 

<EditText

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@+id/text2"

android:layout_toRightOf="@id/pass_text2"

/>

 

</RelativeLayout>

 

<!-- 使用绝对定位对齐Button按钮 -->

<RelativeLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

>

 

<Button

android:id="@+id/cancle_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/cancle"

android:layout_alignParentRight="true"

/>

 

<Button

android:id="@+id/ok_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/ok"

android:layout_toLeftOf="@id/cancle_button"

/>

 

</RelativeLayout>

</LinearLayout>

 

接着讲一下今天学的最后一个布局方式<TableLayout>表格布局

我觉得表格布局可以较好的实现多数常见的布局方式，今天在用表格布局方式写登录表单的时候发现，同一列的组件宽高都是统一的，不能更改，也就是说同一列的组件不能有大小不等的组件（个人意见可能不实），这是表格布局的一个缺陷吧，不过我觉得可以利用多种布局方式进行嵌套解决这个问题，比如表格布局中的一个单元格里嵌套相对布局或者其他的布局方式。

说一下表格布局方式的格式：根元素为：<TableLayout>,行元素标签为<TableRow>,没有列标签，也就是说在一行中可以添加不同的组件，有几个组件就是几列。

用表格布局方式实现登录表单的实例：

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

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

android:layout_width="match_parent"

android:layout_height="match_parent" >

 

<TableRow>

 

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/system"

android:gravity="center"

android:textSize="20dip"/>

</TableRow>

 

<TableRow>

 

 

<TextView

android:id="@+id/user_text1"

android:layout_width="50dp"

android:layout_height="fill_parent"

android:text="@string/user"

android:textSize="20dp" />

 

<EditText

android:layout_width="130dp"

android:layout_height="40dp"

android:id="@+id/text1"

/>

</TableRow>

<TableRow>

<TextView

android:id="@+id/pass_text2"

android:layout_width="50dp"

android:layout_height="fill_parent"

android:text="@string/pass"

android:textSize="20dp" />

 

<EditText

android:layout_width="130dp"

android:layout_height="40dp"

android:id="@+id/text2"

/>

</TableRow>

<TableRow

android:gravity="center">

 

<Button

android:id="@+id/ok_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/ok"

android:textSize="15dp"

/>

<Button

android:id="@+id/cancle_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/cancle"

android:textSize="15dp"

/>

 

</TableRow>

 

</TableLayout>

上述代码的宽高有的用了尺寸定义的。一共是写了一个四行两列的表格，其中第一行是项目名，第二、三行由<TextView><EditView>这两个元素组件组成，实现用户名和密码的输入；最后一行放了两个<Button>元素组件。

表单根目录有一个Android：stretchColumns=“0，1，2，3”属性，这个属性

指定每行都由第“0，1，2，3”列占满空白空间。

最后一种布局方式是：绝对布局，今天没有讲，所以留到明天总结。