Android之页面布局方式

设置Android用户界面有三种方式。最常用的是使用XML文件来描述UI。一个XML元素的名称实际上是对应一个Java类，元素属性对应Java类的成员属性，例如，一个<EditText>元素在UI中相当于创建一个EditText类。当程序加载一个布局资源时，Android系统会初始化这些运行的对象，实例化UI布局元素，并操作其属性。这样做的好处是应用MVC设计模式将用户界面和程序逻辑分开，是用户界面不会影响到程序逻辑，同样的，程序逻辑的变动也不会影响用户界面。Activity为MVC中的Controllor，Activity的COntentView则是MVC的View。另外一种用户界面设计方法是使用Java代码来创建UI，这种方法较为复杂，且模块之间的耦合度比较高。第三种方法是综合前两者，把变化小、行为较为固定的控件放在XML布局文件中实现，而变化较多的、行为控制复杂的控件则由代码进行管理。

利用Android预先定义的XML元素，可以快速设计UI界面，与Web页面使用HTML相似。每个布局文件必须包含一个根元素，根元素必须是一个View或者GroupView对象。一旦定义了根元素，就可以添加其他View元素，逐步构建一个视图层次的页面布局，以下展示一个使用纵向的LinearLayout方式，添加一个文本框：

<?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:id="@+id/LinearLayout1" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#000000"      
    android:orientation="vertical" >
    <EditText android:id="@+id/editText1" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:ems="10"> 
    <requestFocus />   <!--//自动定位光标弹出软键盘-->
</LinearLayout>

布局文件的加载

在编译Android应用程序时，每个XML布局文件将被编译成一个View资源。由Activity代码中的onCreate()函数调用setContentView()实现布局资源的加载，以"R.layout.布局文件名"的形式作为函数的参数值。eg：

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); //调用父类的onCreate()方法

setContentView(R.layout.main_layout);

}

关于手机屏幕上的控件拜访设置，Android提供了5种布局方式，分别为：线性布局（LinearLayout）、表格布局（TableLayout）、相对布局（RelativeLayout）、单帧布局（FrameLayout）和绝对布局（AbsoluteLayout）。可以理解为ViewGroup。最常用的是两种：线性布局、相对布局。以下详细介绍：

1.线性布局

线性布局是Android默认的布局方式，分为垂直线性布局和水平线性布局，分别表示为android:orientation="vertical"和android:orientation="horizontal"。前者表示控件以垂直方式排列，即每行放一个控件；后者表示控件按照水平方式排列，即所有控件都放在同一行，超出部分会被遮盖。

以下为一个复杂布局演示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/a">>
    <Button android:id="@+id/Button01"
        android:layout_height="wrap_content"
        android:text="上面"
        android:layout_width="fill_parent"></Button>
    <LinearLayout android:id="@+id/LinearLayout01"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:orientation="horizontal">
        <Button android:id="@+id/Button03"
            android:layout_height="wrap_content"
            android:text="左边"
            android:layout_width="wrap_content"></Button>
            <Button android:id="@+id/Button02"
                android:layout_height="fill_parent"
                android:text="右边"
                android:layout_width="wrap_content"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/LinearLayout02"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <Button android:id="@+id/Button05"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="左边"
            android:layout_width="wrap_content"></Button>
        <Button android:id="@+id/Button04"
            android:layout_height="wrap_content"
            android:text="右边"
            android:layout_weight="5"
            android:layout_width="wrap_content"></Button>
    </LinearLayout>
    
</LinearLayout>

放到布局中的View控件，需要设置其主要的布局属性：
①android:layout_height属性：设置控件的高度；
②android:layout_width属性：设置控件的宽度；
关于layout_height和layout_width属性共有三种取值，fill_parent和match_parent属性表示强制性使控件扩展，条件允许的情况下，尽可能多的占满空间，wrap_parent表示显示控件的全部内容即可。
③android:layout_gravity属性：设置控件显示的位置，默认取值top，表示顶部对齐。如果希望居中对齐，可取值为center_vertical表示垂直居中，或center_horizontal表示水平居中；
④android:layout_margin属性：设置控件的上、下、左、右边框的边距；
⑤android:layout_marginBottom属性：设置控件下边框的边距，如"5.0dip"，表示5个像素；
⑥android:layout_marginLeft属性：设置控件左边框的边距；
⑦android:layout_marginRight属性：设置控件右边框的边距；
⑧android:layout_marginTop属性：设置控件的上边框的边距；
⑨android:layout_weight属性：默认为0，表示只在屏幕上占据需要显示的空间大小。若大于0，则和其他值大于0的视图按照取值的比例来分割可用空间。eg：如果屏幕上控件较为一致，可以全设置为1，则空间将会被等比划分，较为规范好看。

2.相对布局

相对布局，在这个容器内的子元素可以使用彼此之间的相对位置或者容器间的相对位置来进行定位。使用相对布局的好处是位置控制比较灵活。演示如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#F0F0F0"
    android:padding="10px">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:text="请输入："/>

    <EditText
        android:id="@+id/txt01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv01"/>

    <Button
        android:id="@+id/btn01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/txt01"
        android:text="确认"/>

    <Button
        android:id="@+id/btn02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txt01"
        android:layout_marginRight="30dp"
        android:layout_toLeftOf="@id/btn01"
        android:text="取消"/>
</RelativeLayout>

相对布局的主要属性包括4类： a.设置控件与控件之间的位置关系（如下表）：属性的取值为某个控件的ID，eg：android:layout_above="@+id/xx","xx"为某个Button按钮的ID

属性名称	描述
android:layout_above	将该控件放在给定ID控件的上面
android:layout_below	将该控件放在给定ID控件的下面
android:layout_toLeftOf	将该控件放在给定ID控件的左边
android:layout_toRightOf	将该控件放在给定ID控件的右边

b.设置控件之间的对齐属性（如下表）：属性的取值为某个控件的ID，eg：android:layout_alignLeft="@+id/xx","xx"为某个Button按钮的ID

属性名称	描述
android:layout_alignBaseline	将该控件的Baseline与给定ID控件的Baseline对齐
android:layout_alignTop	将该控件的顶部与给定ID控件的顶部对齐
android:layout_alignBottom	将该控件的底部与给定ID控件的底部对齐
android:layout_alignLeft	将该控件的左边缘与给定ID控件的左边缘对齐
android:layout_alignRight	将该控件的右边缘与给定ID控件的右边缘对齐

c.设置控件与父控件对齐的属性及描述（如下表）：属性的取值为true或false，eg：android:layout_alignParentBottom="true",表示将该控件底部与父控件底部对齐

属性名称	描述
android:layout_alignParentTopjiang	将该控件的顶部与父控件的顶部对齐
android:layout_alignParentBottom	将该控件的底部与父控件的底部对齐
android:layout_alignParentLeft	将该控件的左边边缘与父控件的左边边缘对齐
android:layout_alignParentRight	将该控件的右边边缘与父控件的右边边缘对齐

a.设置控件与控件之间的位置关系（如下表）：属性的取值为true和false，eg：android:layout_centerInParent="true",表示将该控件放在父控件水平方向和垂直方向的中心

属性名称	描述
android:layout_centerHorizontal	将该控件置于水平方向的中心
android:layout_centerVertical	将该控件置于垂直方向的中心
android:layout_centerInParent	将该控件放在父控件水平方向和垂直方向的中心