天天看點
傳回

Android Layout 介紹

Android的界面是有布局群組件協同完成的，布局好比是建築裡的架構，而元件則相當于建築裡的磚瓦。元件按照布局的要求依次排列，就組成了使用者所看見的界面。

Android有五大布局，分别是：

LinearLayout（線性布局）

FrameLayout（單幀布局）

RelativeLayout（相對布局） 五種布局中最靈活的一種，相對亦是最複雜的一種

AbsoluteLayout（絕對布局）

TableLayout（表格布局）

LinearLayout

LinearLayout按照垂直或者水準的順序依次排列子元素，每一個子元素都位于前一個元素之後。如果是垂直排列，那麼将是一個N行單列的結構，每一行隻會有一個元素，而不論這個元素的寬度為多少；如果是水準排列，那麼将是一個單行N列的結構。如果搭建兩行兩列的結構，通常的方式是先垂直排列兩個元素，每一個元素裡再包含一個LinearLayout進行水準排列。

LinearLayout中的子元素屬性android:layout_weight生效，它用于描述該子元素在剩餘空間中占有的大小比例。加入一行隻有一個文本框，那麼它的預設值就為0，如果一行中有兩個等長的文本框，那麼他們的android:layout_weight值可以是同為1。如果android:layout_weight值分别為2和1，那麼第一個文本框将占據剩餘空間的三分之二，第二個文本框将占據剩餘空間中的三分之一。android:layout_weight遵循數值越大，重要度越高的原則。顯示效果如下：

Android Layout 介紹
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText 
        android:id="@+id/etFir"
        android:text="第一行"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12dp"
        android:background="#aa0000"
        android:layout_gravity="center_horizontal"
        android:paddingTop="1dp"
        android:paddingBottom="1dp"
        android:inputType="text"
        android:layout_weight="2"
        />
    <EditText 
        android:id="@+id/etSec"
        android:text="第二行"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12dp"
        android:background="#0000aa"
        android:layout_gravity="center_horizontal"
        android:paddingTop="1dp"
        android:paddingBottom="1dp"
        android:inputType="text"
        android:layout_weight="1"
        />
    
</LinearLayout>

FrameLayout

FrameLayout是五大布局中最簡單的一個布局，在這個布局中，整個界面被當成一塊空白備用區域，所有的子元素都不能被指定放置的位置，它們統統放于這塊區域的左上角，并且後面的子元素直接覆寫在前面的子元素之上，将前面的子元素部分和全部遮擋。顯示效果如下，第一個TextView被第二個TextView完全遮擋，第三個TextView遮擋了第二個TextView的部分位置。如下圖：

Android Layout 介紹
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    
    <EditText 
        android:id="@+id/etFir"
        android:text="第一行"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:textSize="12dp"
        android:background="#aa0000"
        android:layout_gravity="center_horizontal"
        android:paddingTop="1dp"
        android:paddingBottom="1dp"
        android:inputType="text"
        />
    <EditText 
        android:id="@+id/etSec"
        android:text="第二行"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12dp"
        android:background="#0000aa"
        android:layout_gravity="center_horizontal"
        android:paddingTop="1dp"
        android:paddingBottom="1dp"
        android:inputType="text"
        />
</FrameLayout>

AbsoluteLayout

AbsoluteLayout是絕對位置布局。在此布局中的子元素的android:layout_x和android:layout_y屬性将生效，用于描述該子元素的坐标位置。螢幕左上角為坐标原點（0,0），第一個0代表橫坐标，向右移動此值增大，第二個0代表縱坐标，向下移動，此值增大。在此布局中的子元素可以互相重疊。在實際開發中，通常不采用此布局格式，因為它的界面代碼過于剛性，以至于有可能不能很好的适配各種終端。顯示效果如下：

Android Layout 介紹
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    
    <EditText 
        android:id="@+id/etFir"
        android:text="第一行"
        android:layout_height="80dp"
        android:layout_width="120dp"
        android:textSize="12dp"
        android:background="#aa0000"
        android:layout_gravity="center_horizontal"
        android:paddingTop="1dp"
        android:paddingBottom="1dp"
        android:inputType="text"
        android:layout_x="0dp"
        android:layout_y="0dp"
        />
    <EditText 
        android:id="@+id/etSec"
        android:text="第二行"
        android:layout_height="80dp"
        android:layout_width="120dp"
        android:textSize="12dp"
        android:background="#0000aa"
        android:layout_gravity="center_horizontal"
        android:paddingTop="1dp"
        android:paddingBottom="1dp"
        android:inputType="text"
        android:layout_x="200dp"
        android:layout_y="200dp"
        />
</AbsoluteLayout>

RelativeLayout

RelativeLayout按照各子元素之間的位置關系完成布局。在此布局中的子元素裡與位置相關的屬性将生效。例如android：layout_below, android:layout_above等。子元素就通過這些屬性和各自的ID配合指定位置關系。注意在指定位置關系時，引用的ID必須在引用之前，先被定義，否則将出現異常。

RelativeLayout裡常用的位置屬性如下：

android:layout_toLeftOf —— 該元件位于引用元件的左方

android:layout_toRightOf —— 該元件位于引用元件的右方

android:layout_above —— 該元件位于引用元件的上方

android:layout_below —— 該元件位于引用元件的下方

android:layout_alignParentLeft —— 該元件是否對齊父元件的左端

android:layout_alignParentRight —— 該元件是否齊其父元件的右端

android:layout_alignParentTop —— 該元件是否對齊父元件的頂部

android:layout_alignParentBottom —— 該元件是否對齊父元件的底部

android:layout_centerInParent —— 該元件是否相對于父元件居中

android:layout_centerHorizontal —— 該元件是否橫向居中

android:layout_centerVertical —— 該元件是否垂直居中

RelativeLayout是Android五大布局結構中最靈活的一種布局結構，比較适合一些複雜界面的布局。下面示例就展示這麼一個情況，第一個文本框與父元件的底部對齊，第二個文本框位于第一個文本框的上方，并且第三個文本框位于第二個文本框的左方。

Android Layout 介紹
<?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="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tvFir"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#aa0000"
        android:gravity="center"
        android:text="First" />

    <TextView
        android:id="@+id/tvSec"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_above="@id/tvFir"
        android:layout_centerHorizontal="true"
        android:background="#0000aa"
        android:gravity="center"
        android:text="Second" />

    <TextView
        android:id="@+id/tvThi"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_above="@id/tvFir"
        android:layout_toLeftOf="@id/tvSec"
        android:background="#fffedcba"
        android:gravity="center"
        android:text="Third" />

</RelativeLayout>

TableLayout

TableLayout顧名思義，此布局為表格布局，适用于N行N列的布局格式。一個TableLayout由許多TableRow組成，一個TableRow就代表TableLayout中的一行。

TableRow是LinearLayout的子類，它的android:orientation屬性值恒為horizontal，并且它的android:layout_width和android:layout_height屬性值恒為MATCH_PARENT和WRAP_CONTENT。是以它的子元素都是橫向排列，并且寬高一緻的。這樣的設計使得每個TableRow裡的子元素都相當于表格中的單元格一樣。在TableRow中，單元格可以為空，但是不能跨列。

Android Layout 介紹
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    >

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:background="#ffffffff"
            android:gravity="center"
            android:padding="10dp"
            android:text="first" />

        <TextView
            android:background="#ff654321"
            android:gravity="center"
            android:padding="10dp"
            android:text="second" />

        <TextView
            android:background="#fffedcba"
            android:gravity="center"
            android:padding="10dp"
            android:text="third" />
    </TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:background="#ff654321"
            android:gravity="center"
            android:padding="10dp"
            android:text="four" />

        <TextView
            android:background="#fffedcba"
            android:gravity="center"
            android:padding="10dp"
            android:text="five" />
    </TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:background="#fffedcba"
            android:gravity="center"
            android:padding="10dp"
            android:text="six" />

        <TextView
            android:background="#ff654321"
            android:gravity="center"
            android:padding="10dp"
            android:text="seven" />

        <TextView
            android:background="#ffffffff"
            android:gravity="center"
            android:padding="10dp"
            android:text="eight" />
    </TableRow>

</TableLayout>
android Android Layout Android布局
上一篇: 入門——Layout中對齊屬性介紹
下一篇: Android Layout.xml布局屬性

繼續閱讀