Android布局管理器

 

Android开发中，我们为了使我们界面美观大方，显的有条理，除了使用漂亮控件，好看的样式。另外还需要布局。只有布局才能将我们的控件组合的有层次，显示的有条理。这篇文章，我们就像大家介绍一下，Android开发中的几种布局，以及简单的用法。

 

    在Android的开发中，一般常用以下几种布局方式，(LinearLayout、RelativeLayout、TableLayout)。下面我们说明一下，这几种布局的简单使用。

 

    一、LinearLayout

       LinearLayout是布局中最简单的一种布局--线性布局。该布局使控件，在水平或垂直方向上显示，通过属性的设置，我们可以使控件垂直或水平显示。下面看一下简单的代码使用。

 

    <LinearLayout xmlns: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="Link to Bluetooth?" />

 

   </LinearLayout>

 

   上边代码中使用线性布局，其中红色字体部分是用来表明该布局中控件的显示方向。vertical是表示控件为垂直方向显示。如果想显示为水平方向，只需要将属性值改为horizontal即可。

 

   二、RelativeLayout

 

    RelativeLayout布局是相对布局。也就说，使控件处于容器中一个相对的位置。也就说，我们在定义控件的坐标时，不会明确指出坐标的位置，而是，给该控件指定一个参照物，并标明，相对于参照物来说，控件在什么位置。看下边的例子。

 

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" 

    android:background="@drawable/loginbg"

    >

 

    <TextView 

        android:id="@+id/lab_username"

        android:text="@string/login_user_lab"

        android:singleLine="true"

        android:layout_width="wrap_content"

android:layout_height="wrap_content"

        android:textStyle="bold"

        android:textSize="10pt"

        android:paddingLeft="50dip"

        android:paddingTop="150dip"

        android:textColor="@color/txt_color1"

        />

    <EditText 

        android:id="@+id/user_name"

        android:layout_below="@id/lab_username"

        android:layout_width="220dip"

        android:layout_height="40dip"

        android:textSize="7pt"

        android:background="@android:drawable/editbox_background"

        android:layout_marginLeft="50dip"

        />

    

    <TextView

        android:id="@+id/lab_pwd"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:singleLine="true"

        android:textColor="@color/txt_color1"

        android:layout_below="@id/user_name"

        android:textSize="10pt"

        android:text="@string/login_pwd_lab"

        android:paddingLeft="50dip"

        android:layout_marginTop="10dip"

        android:textStyle="bold" />

    <EditText 

        android:id="@+id/user_pwd"

        android:layout_width="220dip"

        android:layout_below="@id/lab_pwd"

        android:layout_height="40dip"

        android:textSize="5pt"

        android:layout_marginLeft="50dip"

        android:password="true"

        android:background="@android:drawable/editbox_background"

        />

    

    <CheckBox 

        android:id="@+id/savepwd_chk"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="记住密码"

        android:layout_below="@id/user_pwd"

        android:layout_alignLeft="@id/user_pwd"

        android:checked="true"

        />

    

    <Button 

        android:id="@+id/log_btn"

        android:layout_below="@id/user_pwd"

        android:text="@string/login_btn"

        android:layout_width="100dip"

        android:layout_height="50dip"

        android:layout_marginLeft="48dip"

        android:layout_marginTop="54dip"

        android:layout_marginRight="12dip"

    />

    

    <Button 

        android:id="@+id/cal_btn"

        android:layout_below="@id/user_pwd"

        android:text="@string/cancel_btn"

        android:layout_width="100dip"

        android:layout_height="50dip"

        android:layout_marginTop="54dip"

        android:layout_toRightOf="@id/log_btn"

        android:layout_alignRight="@id/user_pwd"

    />

 

    <ProgressBar

        android:id="@+id/progressBar1"

        style="?android:attr/progressBarStyleHorizontal"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/user_pwd"

        android:layout_alignRight="@+id/cal_btn"

        android:layout_below="@+id/log_btn"

        android:layout_marginTop="18dp" 

        android:visibility="gone"

        />

    

</RelativeLayout>

 

大家请看，我用红色标注的代码。这些是在相对布局中特有的属性。当然，相对布局中的其他属性还有很多，远远不止这些。大家可以通过平常的使用和查阅其他资料了解。

android:layout_below="@id/lab_username"：表示该控件在指定控件的下方出现

 

android:layout_alignLeft="@id/user_pwd"：表示该控件与指定控件的左边缘对齐。

 

android:layout_toRightOf="@id/log_btn"：表示该控件的左边缘与指定控件的右边缘对齐

 

android:layout_alignRight="@id/user_pwd"：表示该控件与指定控件的右边缘对齐

 

   三、Tablelayout

     Tablelayout表格布局，与我们web页面中的table很像。每一行都有<tablerow>开始，</tablerow>结束。其中每个控件占据一列的位置。也可以在控件中定义layout_span属性来合并列。下边看代码

 

     <TableLayout

       android:id="@+id/bstablelayout"

       android:layout_width="fill_parent"

       android:layout_height="wrap_content" 

       

       >

       

       <TableRow

           android:id="@+id/tr1a"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content" 

           android:gravity="center"

           >

 

           <TextView

               android:id="@+id/stime_lab"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_marginLeft="10dip"

               android:layout_marginTop="10dip"

               android:text="开始时间:" 

               android:textColor="@color/txt_color1"

               android:textSize="6pt"

               />

           

           <EditText 

               android:id="@+id/stime_txt"

               android:inputType="text"

               android:layout_width="120dip"

               android:layout_height="30dip"

               android:background="@android:drawable/editbox_background"

               android:layout_marginLeft="10dip"

               android:layout_marginTop="10dip"

               android:textSize="6pt"

               android:enabled="false"

               />

           

            <Button 

               android:id="@+id/sdate_btn"

               android:layout_height="35dip"

               android:layout_width="80dip"

               android:text="选择日期"

               android:layout_marginLeft="1dip"

               android:layout_marginTop="12dip"

               />

       </TableRow>

       <TableRow

           android:id="@+id/tr2a"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:gravity="center"

            >

 

           <TextView

               android:id="@+id/etime_lab"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_marginLeft="10dip"

               android:layout_marginTop="10dip"

               android:text="结束时间:" 

               android:textColor="@color/txt_color1"

               android:textSize="6pt"

               />

          <EditText 

               android:id="@+id/etime_txt"

               android:inputType="text"

               android:layout_width="120dip"

               android:layout_height="30dip"

               android:background="@android:drawable/editbox_background"

               android:layout_marginLeft="10dip"

               android:layout_marginTop="10dip"

               android:textSize="6pt"

               android:enabled="false"

               />

          

          <Button 

               android:id="@+id/edate_btn"

               android:layout_height="35dip"

               android:layout_width="80dip"

               android:text="选择日期"

               android:layout_marginLeft="1dip"

               android:layout_marginTop="12dip"

               />

           

       </TableRow>

       

       <TableRow

           android:id="@+id/tr2a"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content" 

           android:gravity="center"

           >

          

           <Button 

               android:id="@+id/submit_btn"

               android:layout_height="35dip"

               android:layout_width="fill_parent"

               android:layout_span="3"

               android:text="查询"

               android:layout_marginLeft="1dip"

               android:layout_marginTop="10dip"

               />

           

       </TableRow>

       

       <TableRow

           android:id="@+id/tr2a1"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content" 

           android:gravity="center"

           >

           

           <com.inspur.bss.control.MyScrollView

       android:id="@+id/scrollView1"

       android:layout_width="fill_parent"

       android:layout_height="wrap_content" 

       android:layout_span="3"

       >        

       <RadioGroup

       android:id="@+id/station_list"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content" 

       android:scrollbars="vertical"

       android:orientation="vertical"

       >

     

    </RadioGroup>

      

   </com.inspur.bss.control.MyScrollView>

           

           

       </TableRow>

       

   </TableLayout>

 

在实际的开发中往往一种布局满足不了我们的需求，可能会几种布局合作来达到我们的想要的效果。大家可以反复练习，以便于在应用中熟练的使用。也欢迎大家一块儿交流开发中的经验和问题。

 

 

相对布局（RelativeLayout）中，子控件的位置是相对兄弟控件或父容器而决定的。出于性能考虑，在设计相对布局时，要按照控件之间的依赖关系排列。如View A的位置相当于View B来决定，则需要保证布局文件中View B在View A的前面。

在进行相对布局时，用到的布局属性有很多，首先来看属性值为true或false的属性，见下表：

相对布局中取值为true或false的属性列表

属性名称	属性说明
android:layout_centerHorizontal	当前控件位于父控件的横向中间位置
android:layout_centerVertical	当前控件位于父控件的纵向中间位置
android:layout_centerInParent	当前控件位于父控件的中央位置
android:layout_alignParentBottom	当前控件底端与父控件底端对齐
android:layout_alignParentLeft	当前控件左侧与父控件左侧对齐
android:layout_alignParentRight	当前控件右侧与父控件右侧对齐
android:layout_alignParentTop	当前控件顶端与父控件顶端对齐
android:layout_alignWithParentIfMissing	参照控件不存在或不可见时参照父控件

接下来再来看看属性值为其他控件id的属性，见下表：

相对布局中取值为其他控件id的属性及其说明

属性名称	属性说明
android:layout_toRightOf	使当前控件位于给出id控件的右侧
android:layout_toLeftOf	使当前控件位于给出id控件的左侧
android:layout_above	使当前控件位于给出id控件的上方
android:layout_below	使当前控件位于给出id控件的下方
android:layout_alignTop	使当前控件的上边界与给出id控件的上边界对齐
android:layout_alignBottom	使当前控件的下边界与给出id控件的下边界对齐
android:layout_alignLeft	使当前控件的左边界与给出id控件的左边界对齐
android:layout_alignRight	使当前控件的右边界与给出id控件的右边界对齐

最后介绍的是属性值以像素为单位的属性及说明，见下表：

相对布局中取值为像素的属性及说明

属性名称	属性说明
android:layout_marginLeft	当前控件左侧的留白
android:layout_marginRight	当前控件右侧的留白
android:layout_marginTop	当前控件上方的留白
android:layout_marginBottom	当前控件下方的留白
android:layout_margin	当前控件上下左右四个方向的留白

需要注意的是：在进行相对布局时要避免出现循环依赖，例如设置相对布局在父容器中的排列方式为WRAP_CONTENT，就不能再将相对布局的子控件设置为ALIGN_PARENT_BOTTOM。因为这样会造成子控件和父控件相互依赖和参照的错误。

下面就先来看看相对布局的效果图：

其中Main.xml代码如下：

view plain   copy

<?xml version="1.0" encoding="utf-8"?>
<!-- 声明一个相对布局 -->
<RelativeLayout
    android:id="@+id/RelativeLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 第一个ImageView控件，位于父控件的中央位置 -->
    <ImageView
        android:id="@+id/ImageView01"
        android:background="@drawable/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
    </ImageView>

    <!-- 第二个ImageView控件，位于第一个控件的右侧 -->
    <ImageView
        android:id="@+id/ImageView02"
        android:background="@drawable/down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/ImageView01"
        android:layout_alignTop="@id/ImageView01">
    </ImageView>

    <!-- 第三个ImageView控件，位于第一个控件的上方 -->
    <ImageView
        android:id="@+id/ImageView03"
        android:background="@drawable/up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/ImageView01"
        android:layout_alignLeft="@id/ImageView01">
    </ImageView>
</RelativeLayout>

Activity代码为：

view plain   copy

package com.sunchis;

import android.app.Activity;
import android.os.Bundle;

public class Android extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);          //设置屏幕
    }
}