android布局 及 布局屬性

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->1、幀布局 FrameLayout：

是最簡單的一個布局對象。在他裡面的的所有顯示對象愛你過都將固定在螢幕的左上方，不能指定位置，但允許有多個顯示對象，只是後一個會直接覆蓋在前一個之上顯示，會把前面的組件部分或全部擋住。的例子裡，FrameLayout中放了3個ImageView組件，第一個是藍色的，第二個是綠色的，第三個是樹狀圖（透明的png格式）。ImageView就相當於Html中的img標籤，接下來會講到這個組件。

下面看一個FrameLayout的例子：

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout android:id="@+id/FrameLayout01"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView android:id="@+id/ImageView01" android:src="@drawable/p1"
android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>

<ImageView android:id="@+id/ImageView02" android:src="@drawable/p2"
android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>

<ImageView android:id="@+id/ImageView03" android:src="@drawable/p3"
android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>

</FrameLayout>

 

2、線性布局 LinearLayout：

線性布局是所有布局中最常用的類之一，也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls類的父類。LinearLayout可以讓它的子項目垂直或水平的方式排成一行（不設定方向的時候預設按照垂直方向排列）。

下面看一個LinearLayout的例子：別被例子的長度嚇住，仔細看一下其實就是一個LinearLayout中放5個TextView標籤而已，TextView相當於Html標籤中的Label。

<?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:gravity="center_horizontal"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="給小寶寶起個名字："
android:textSize="20px"
android:textColor="#0ff"
android:background="#333"

/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="遙遙是男孩的小名"
android:textSize="20px"
android:textColor="#0f0"
android:background="#eee"
android:layout_weight="3"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="瑤瑤是女孩的小名"
android:textColor="#00f"
android:textSize="20px"
android:background="#ccc"
android:layout_weight="1"
/>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="海因是男孩的大名"
android:textColor="#f33"
android:textSize="20px"
android:background="#888"
android:layout_weight="1"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="海音是女孩的大名"
android:textColor="#ff3"
android:textSize="20px"
android:background="#333"
android:layout_weight="1"
/>
</LinearLayout>

3、絕對布局 AbsoluteLayout

絕對位置AbsoluteLayout，又可以叫做座標布局，可以直接指定子項目的絕對位置，這種布局簡單直接，直觀性強，但是由於手機螢幕尺寸差別比較大，使用絕對位置的適應性會比較差。

下面我們舉一個例子看看：例子裡的機器人圖片大小是250X250，可以看到我們使用android:layout_x和android:layout_y來指定子項目的縱橫座標。

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

<ImageView
android:src="@drawable/android"
android:layout_y="40dip"
android:layout_width="wrap_content"
android:layout_x="35dip"
android:id="@+id/ImageView01"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/TextView01"
android:text="Android2.2 學習指南"
android:textColor="#0f0"
android:textSize="28dip"
android:layout_y="330dip"
android:layout_x="35dip">
</TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/TextView02"
android:text="圖文並茂，理論清晰，操作性強"
android:textColor="#333"
android:textSize="18dip"
android:layout_y="365dip"
android:layout_x="35dip">
</TextView>
</AbsoluteLayout>

4、相對布局 RelativeLayout

相對布局 RelativeLayout 允許子項目指定它們相對於其父元素或兄弟元素的位置，這是實際布局中最常用的布局方式之一。它靈活性大很多，當然屬性也多，操作難度也大，屬性之間產生衝突的的可能性也大，使用相對布局時要多做些測試。

下面我們用相對布局再做一次上面的例子，首先放置一個圖片，其它兩個文本分別相對上一個元素定位：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout android:id="@+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff"
xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView android:id="@+id/ImageView01"
android:src="@drawable/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dip"
>
</ImageView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView01"
android:text="Android2.2 學習指南"
android:textColor="#0f0"
android:textSize="28dip"
android:layout_below="@id/ImageView01"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip">
</TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView02"
android:text="圖文並茂，理論清晰，操作性強"
android:textColor="#333"
android:textSize="18dip"
android:layout_below="@id/TextView01"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip">
</TextView>
</RelativeLayout>

在這個介面中，我們應用了一個 LinearLayout的布局，它是垂直向下擴充的 ，所以建立的布局XML檔案，以
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
節點作為開頭。一個版面配置容器裡可以包括0或多個版面配置容器。
解釋一下LinearLayout中的標籤：
（1）android:orientation="vertical" 表示豎直方式對齊
（2）android:orientation="horizontal"表示水平方式對齊
（3）android:layout_width="fill_parent"定 義當前視圖在螢幕上 可以消費的寬 度，fill_parent即填充整個螢幕。

（4）android:layout_height="wrap_content": 隨著文字欄位的不同    而 改變這個視圖的寬度或者高度。有點自動化佈建框度或者高度的意思    

layout_weight預設值是零，用於給一個線性布局中的諸多視圖的重要度賦值。比如說我們在 水平方向上有一個文字標籤和兩個文本編輯元素，該文字標籤並無指定layout_weight值，所以它將佔據需要提供的最少空間  ；如果兩個文本編輯元素每一個的layout_weight值都設定為1， 則兩者平分在父視圖布局剩餘的寬度(因為我們聲明這兩者的重要度相等)。如果兩個文本編輯元素其中第一個的layout_weight值設定為1，而 第二個的設定為2，則剩餘空間的三分之一分給第二個，三分之二分給第一個(正比劃分)。(僅在LinearLayou中有效)。

RelativeLayout布局：允許子項目指定他們相對於其它元素或父元素的位置（通過ID指定）。

　RelativeLayout用到的一些重要的屬性： 

    第一類:屬性值為true或false  僅RelativeLayout中有效
    android:layout_centerHrizontal  水平置中 
     android:layout_centerVertical   垂直置中 
    android:layout_centerInparent    相對於父元素完全置中 
    android:layout_alignParentBottom 貼緊父元素的下邊緣 
    android:layout_alignParentLeft   貼緊父元素的左邊緣 
    android:layout_alignParentRight  貼緊父元素的右邊緣 
    android:layout_alignParentTop    貼緊父元素的上邊緣 
    android:layout_alignWithParentIfMissing  如果對應的兄弟元素找不到的話就以父元素做參照物 

    第二類：屬性值必須為id的引用名“@id/id-name” 僅RelativeLayout中有效
    android:layout_below      在某元素的下方 
    android:layout_above      在某元素的的上方 
    android:layout_toLeftOf   在某元素的左邊 
    android:layout_toRightOf  在某元素的右邊 

    android:layout_alignTop   本元素的上邊緣和某元素的的上邊緣對齊 
    android:layout_alignLeft  本元素的左邊緣和某元素的的左邊緣對齊 
    android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊 
    android:layout_alignRight  本元素的右邊緣和某元素的的右邊緣對齊 

    第三類：屬性值為具體的像素值，如30dip，40px (任何布局都有效)
    android:layout_marginBottom              離某元素底邊緣的距離 
    android:layout_marginLeft                   離某元素左邊緣的距離 
    android:layout_marginRight                 離某元素右邊緣的距離 
    android:layout_marginTop                   離某元素上邊緣的距離 

FrameLayout是最簡單的一個布局對象：是一個架構配置樣式，可以用include標籤載入定義的另一個layout檔案，所有的子項目將會固定在螢幕的左上方；你不能為FrameLayout中的一個子項目指定一個位置。後一個子項目將會直接在前 一個子項目之上進行覆蓋填充，把它們部份或全部擋住（除非後一個子項目是透明的）。

EditText的android:hint 

設定EditText為空白時輸入框內的提示資訊。 

android:gravity　 
android:gravity屬性是對該view 內容的限定．比如一個button 上面的text.  你可以設定該text 在view的靠左，靠右等位置．以button為例，android:gravity="right"則button上面的文字靠右 

android:layout_gravity 
android:layout_gravity是用來設定該view相對與起父view 的位置．比如一個button 在linearlayout裡，你想把該button放在靠左、靠右等位置就可以通過該屬性設定．以button為例，android:layout_gravity="right"則button靠右 

android:layout_alignParentRight 
使當前控制項的右端和父控制項的右端對齊。這裡屬性值只能為true或false，預設false。 

android:scaleType： 
android:scaleType是控製圖片如何resized/moved來匹對ImageView的size。ImageView.ScaleType / android:scaleType值的意義區別： 

CENTER /center  按圖片的原來size置中顯示，當圖片長/寬超過View的長/寬，則截取圖片的置中部分顯示 

CENTER_CROP / centerCrop  按比例擴大圖片的size置中顯示，使得圖片長(寬)等於或大於View的長(寬) 

CENTER_INSIDE / centerInside  將圖片的內容完整置中顯示，通過按比例縮小或原來的size使得圖片長/寬等於或小於View的長/寬 

FIT_CENTER / fitCenter  把圖片按比例擴大/縮小到View的寬度，置中顯示 

FIT_END / fitEnd   把圖片按比例擴大/縮小到View的寬度，顯示在View的下部分位置 

FIT_START / fitStart  把圖片按比例擴大/縮小到View的寬度，顯示在View的上部分位置 

FIT_XY / fitXY  把圖片不按比例擴大/縮小到View的大小顯示 

MATRIX / matrix 用矩陣來繪製，動態縮小放大圖片來顯示。 

** 要注意一點，Drawable檔案夾裡面的圖片命名是不能大寫的。

 

我們再把上面的例子重新做一遍，這一次多放一些屬性在裡面，大家實驗一下：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout android:id="@+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#cfff" 色彩的設定是argb,第一個c是透明度
xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView android:id="@+id/ImageView01"
android:src="@drawable/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dip"
android:layout_centerHorizontal="true">
</ImageView>

<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView01"
android:text="Android2.2 學習指南"
android:textColor="#0f0"
android:textSize="28dip"
android:layout_below="@id/ImageView01"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip">
</TextView>

<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView02"
android:text="圖文並茂，理論清晰，操作性強"
android:textColor="#333"
android:textSize="18dip"
android:layout_below="@id/TextView01"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip">
</TextView>

<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView03"
android:text="alignTop"
android:textColor="#333"
android:textSize="18dip"
android:layout_alignTop="@id/ImageView01" 和ImageView01上邊緣對齊
android:layout_centerHorizontal="true">
</TextView>

<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView04"
android:text="alignLeft"
android:textColor="#333"
android:textSize="18dip"
android:layout_alignLeft="@id/ImageView01"
android:layout_centerHorizontal="true">
</TextView>

<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView05"
android:text="alignRight"
android:textColor="#333"
android:textSize="18dip"
android:layout_alignRight="@id/ImageView01"
android:layout_centerHorizontal="true">
</TextView>

<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/TextView06"
android:text="alignBottom"
android:textColor="#333"
android:textSize="18dip"
android:layout_alignBottom="@id/ImageView01"
android:layout_centerHorizontal="true">
</TextView>
</RelativeLayout>