Android 基本布局

浏览数：23 / 时间：2015年06月11日

在android中，一个美观、操作简单的界面由多个控件组成。多个控件要有序的摆放在界面上，需要借助android布局来实现。布局一种可以放置多个控件的容器，他可以按照一定的规律调整内部控件的相对位置，来使你的界面更精美、易用。我们经常用到的布局大概有四类：

1.LinearLayout

2.RelativeLayout

3.GridLayout

4.TableLayout

Android LinearLayout

LinearLayout又称作线性布局，又是一种非常常用的线性布局。正如它名字所描述一样，这个布局会将它所包含的控件在线性方向上依次呈现。在LinearLayout布局里面的控件都是在一个方向上线性排列，要么是水平horizontally，要么是竖直vertically。

那么，LinearLayout的方向设计只有2种：

Vertical
Horizontal

默认的方向是水平的Horizontal。

打开我们的页面布局的xml文件，

输入以下代码：

<?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="horizontal" >
    
    <Button 
        android:id="@+id/btn1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="button 1"/>
    
    <Button 
        android:id="@+id/btn2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="button 2"/>
    
    <Button 
        android:id="@+id/btn3"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="button 3"/>
    
    

</LinearLayout>

LinearLayout可以有2种显示方式，通过设置LinearLayout的android:orientation来设置。上面这种是水平对其的，显示出来的效果如下：

你可以更改android:orientation为android:orientation="vertical"；就可以显示如下内容：

代码可以在这里下载：androidLinearLayout Sample Code

Android RelativeLayout

RelativeLayout又称作相对布局，也是一种非常常用的布局。就像它的名字一样，这种布局方式更加灵活，他可以通过相对定位的方式让控件出现在布局的任何位置。正因为如此，RelativeLayout的属性非常多，我们需要在理解的基础上去记忆。RelativeLayout可以把一个控件摆放在另一个控件的左边（toLeftOf),右边(toRightOf)，上面(above)，下面(below)都是相对位置；也可以与其父布局的相对位置摆放，中间，水平，竖直，或者是任意父布局的边对齐。

与父布局的相对位置

layout_alignParentXXX-这是子控件和父布局的几种摆放位置。主要有四种值：

1.layout_alignParentLeft(左边对齐）

2.layout_alignParentRight（右边对齐）

3.layout_alignParentTop（顶部对齐）

4.layout_alignParentBottom（底部对齐）

除了这四种基本的摆放布局之外，还有一些组合的，比如像laytout_alignParentStart、layout_alignParentEnd，layout_alignParentStart就相当于layout_alignParentLeft和layout_alignParentTop,layout_alignParentEnd就不用说了吧！

还有就是layout_centerInParent，就是把控件放在父布局的中间位置。

与兄弟控件的相对位置

layout_toXXXOf就是说与兄弟控件以何种方式对齐的，XXX代表了Left，Right，Start，End。当然在对齐的时候你需要指明是与那个控件对齐的，每个控件都有一个ID，你只需要指明ID就行了，比如：

android:layout_toLeftOf="@id/text"就是放在ID位text的左边。

还有俩种就是：layout_above（上面）和layout_below（下面）。

新建一个工程在布局文件里面输入以下代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="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"
    tools:context=".MainActivity" >
    
    <!-- 放在父布局的左上角 -->
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="btn1" />
    
    <!-- 放在父布局的右上角 -->
     <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="btn2" />
     
     <!-- 放在父布局的左下角 -->
     <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="btn3" />
     
     <!-- 放在父布局的右下角 -->
      <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn4"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="btn4" />

      <!-- 放在父布局的中间 -->
      <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/pic"
        android:src="@drawable/ic_launcher"
        android:layout_centerInParent = "true"/>
      
      <!-- 放在pic的下面 -->
      <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="below"
        android:layout_below="@id/pic"
        android:layout_centerInParent = "true"/>
    
      <!-- 放在pic的上面 -->
      <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="above"
        android:layout_above="@id/pic"
        android:layout_centerInParent = "true"/>
    
      <!-- 放在pic的左边 -->
      <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="left"
        android:layout_toLeftOf="@id/pic"
        android:layout_centerInParent = "true"/>
    
      <!-- 放在pic的右边 -->
      <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="right"
        android:layout_toRightOf="@id/pic"
        android:layout_centerInParent = "true"/>

</RelativeLayout>

就会得到这样的布局：

代码可以在这里下载：RelativeLayout Sample Code

Android GirdLayout

GirdLayout就是一种一个表格的方式呈现布局。这个比较简单，可以用来做一个九宫格解锁。

新建一个项目，在布局xml里面写入如下代码：

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnCount="3"
    android:gravity="center"
    android:orientation="horizontal"
    android:rowCount="3" >
   
    <TextView android:text="1" android:padding="5dp"/>
    <TextView android:text="2" android:padding="5dp"/>
    <TextView android:text="3" android:padding="5dp"/>
    <TextView android:text="4" android:padding="5dp"/>
    <TextView android:text="5" android:padding="5dp"/>
    <TextView android:text="6" android:padding="5dp"/>
    <TextView android:text="7" android:padding="5dp"/>
    <TextView android:text="8" android:padding="5dp"/>
    <TextView android:text="9" android:padding="5dp"/>
</GridLayout>

就会得到如下的布局：

代码可以在这里下载：GridLayout Sample Code

Android TableLayout

就像这个名字一样，TableLayout允许我们用表格的方式来排列控件，但是这种布局不很常用。大概了解一下就行了。既然是表格那就一定有行和列，在设计表格的时候我们尽量应该让每一行都拥有相同的列数，这样的表格是最简单的。但是在实际中，总不是我们所想的那样，所以当某一行一定要有不相等的列数时，就可以通过合并单元格方式来应对。

新建一个项目，在布局xml文件中输入如下代码：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"
    tools:context=".MainActivity" >

    <TableRow>
        <TextView 
            android:layout_height="wrap_content"
            android:text="Account"/>
        <EditText
            android:id="@+id/account"
            android:layout_height="wrap_content"
            android:hint="Input your account"/>
    </TableRow>
    
    <TableRow>
        <TextView 
            android:layout_height="wrap_content"
            android:text="Passwd"/>
        <EditText
            android:id="@+id/passwd"
            android:layout_height="wrap_content"
            android:inputType="textPassword"/>
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/login"
            android:layout_height="wrap_content"
            android:text="login"/>     
    </TableRow>

</TableLayout>