Android學習筆記（三） UI佈局

每個佈局都有其適合的方式，另外，這幾個佈局元素能夠相互嵌套應用，作出美觀的界面。

1、線性佈局（LinearLayout）

    線性佈局，這個東西，從外框上能夠理解爲一個div，他首先是一個一個從上往下羅列在屏幕上。每個LinearLayout裏面又可分爲垂直佈局（android:orientation="vertical"）和水平佈局（android:orientation="horizontal" ）。當垂直佈局時，每一行就只有一個元素，多個元素依次垂直往下；水平佈局時，只有一行，每個元素依次向右排列。
    linearLayout中有一個重要的屬性 android:layout_weight="1"，這個weight在垂直佈局時，表明行距；水平的時候表明列寬；weight值越大就越大。

在XML文件中修改

<?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">
    <Button android:text="Up" 
        android:id="@+id/Button03" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"></Button>
        
    <LinearLayout 
        android:orientation="horizontal" 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">        
    <Button android:text="left" 
        android:id="@+id/Button01" 
        android:width="120px"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"></Button>    
    <Button 
        android:text="right" 
        android:id="@+id/Button02" 
        android:width="120px"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"></Button>
    </LinearLayout>
</LinearLayout>

效果以下:

 

 

2、相對佈局（RelativeLayout）

 

  相對佈局能夠理解爲某一個元素爲參照物，來定位的佈局方式。

                android：layout_方向 = id  表示 在這個id對應的控件的方向上（上|下）

                android：layout_align方向  = id 表示和這個控件的（上下左右）對齊

                android： layout_to方向Of  = id 表示在這個控件的左或者右
eg:

                android:layout_below="@id/la1"/>            將當前控件放置於id爲la1 的控件下方。

                android:layout_alignParentRight="true"     使當前控件的右端和父控件的右端對齊。這裏屬性值只能爲true或false，默認false。
               
                android:layout_marginLeft="10dip"          使當前控件左邊空出相應的空間。
               
                android:layout_toLeftOf="@id/true"         使當前控件置於id爲true的控件的左邊。
               
                android:layout_alignTop="@id/ok"           使當前控件與id爲ok的控件上端對齊。
               

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="請輸入信息"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView2"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/editText1"
        android:text="取消" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_toLeftOf="@+id/button2"
        android:text="肯定" />

</RelativeLayout>

 

3、使用表格佈局（TableLayout）來佈局屏幕

 

 

3、表格佈局（TableLayout）

 

    表格佈局相似Html裏面的Table。每個TableLayout裏面有表格行TableRow，TableRow裏面能夠具體定義每個元素。每一個TableRow 都會定義一個 row （事實上，你能夠定義其它的子對象，這在下面會解釋到）。TableLayout 容器不會顯示row 、cloumns 或cell 的邊框線。每一個 row 擁有0個或多個的cell ；每一個cell 擁有一個View 對象。表格由列和行組成許多的單元格。表格容許單元格爲空。單元格不能跨列，這與HTML 中的不同。

 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TableRow android:gravity="center" >

        <Button
            android:id="@+id/Button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button01" >
        </Button>
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/Button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" >
        </Button>
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/Button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="Button3" >
        </Button>

        <Button
            android:id="@+id/Button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="Button4" >
        </Button>
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/Button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="Button5" >
        </Button>
    </TableRow>

</TableLayout>

4、層佈局（FrameLayout）

 

    層佈局是最簡單的一種佈局方法，它在屏幕上設置一個空白備用區域。不能爲FrameLayout中的一個子元素制定一個位置，後一個子元素將會直接在前一個子元素之上進行覆蓋填充，把他們部分或所有擋住。

在FrameLayout佈局裏，定義任何空間的位置相關的屬性都毫無心義。控件自動的堆放在左上角，根本不聽你的控制。因此通常比較少用

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView   
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:textSize="50sp"  
    android:textColor="#000000"  
    android:text="第一層"/>  
<TextView   
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:textSize="40sp"  
    android:textColor="#ffff00"  
    android:text="第二層"/>  
<TextView   
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:textSize="30sp"  
    android:textColor="#ff00ff"  
    android:text="第三層"/>  
<TextView   
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:textSize="20sp"  
    android:textColor="#00ffff"  
    android:text="第四層"/>  

</FrameLayout>

效果圖