android 五大布局檔案

標籤：android   檔案夾   layout   項目   

android中為了適應各種布局的格式，提供了5種布局格式：

LinearLayout（線性布局）FrameLayout（幀布局）RelativeLayout（相對布局）TableLayout（表格版面配置）AbsoluteLayout(絕對布局)。

在android的項目中，我們要設計出讓人耳目一新的介面，無時無刻都要用到這些布局格式。這些布局檔案主要是以xml檔案的格式存在，並且儲存在/res/layout目錄下。此檔案夾下存著我們寫的各種布局檔案。例如：/res/layout/activity_main.xml.

下面我們詳細介紹一下5種布局檔案：

1. FrameLayout(幀布局)

     此布局是最簡單的布局形式，所添加的組件都是層疊的方式顯示，第一個控制項在最底層，最後添加的控制項在視圖顯示的最上層，有點類似堆棧的形式。下面給出自己的一個執行個體：

 <?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:background="@drawable/background"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="300dip"        android:orientation="vertical" >        <Button            android:id="@+id/start"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="startAnimation"            />        <Button            android:id="@+id/stop"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="reversestartAnimation"            />            </LinearLayout>    <!-- windmill layout -->    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent" >        <FrameLayout            android:id="@+id/windmill_layout"            android:layout_width="match_parent"            android:layout_height="80dip" >            <ImageView                android:id="@+id/im_roof"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center"                android:src="@drawable/windmill_roof" />            <ImageView                android:id="@+id/im_fan"                android:layout_width="104dp"                android:layout_height="106dp"                android:layout_gravity="center"                android:src="@drawable/windmill_fan" />        </FrameLayout>        <ImageView            android:id="@+id/im_window"            android:layout_width="80dip"            android:layout_height="80dip"            android:layout_alignParentBottom="true"            android:layout_centerHorizontal="true"            android:layout_marginBottom="20dp"            android:src="@drawable/windmill_window" />    </RelativeLayout></LinearLayout>

這是在RelativeLayout中嵌套一個FrameLayout布局。並且FrameLayout布局中有兩個互相重疊的imageView對象。

2. AbsoluteLayout（絕對布局）

此布局中的子控制項需要指定其座標的相對位置的橫縱座標，否則此布局會像FrameLayout布局一樣被排在左上方。此布局不能自動適應螢幕尺寸，所以少用，這裡簡單介紹一下定義。

3.TableLayout（表格版面配置）

定義：把子控制項元素放置在行和列中，並且不顯示行列和儲存格邊界線。每一行就是一個TableRow，也可以是一個View對象。在TableRow裡面每天加一個控制項，代表一列。

屬性參數說明：

android：layout_colum :設定控制項在TableRow中所處的列。

android: layout_span:設定此控制項所跨越的列數。

android：collapseColumns:TableLayout指定的列隱藏，多列隱藏，逗號將隱藏類隔開。

android:StretchColumns:指定的列為可以伸展的列，多列伸展，用逗號隔開。

android：shrinkColmns：設定指定的列為可收縮的列。

4.LinearLayout（線性布局）

定義：在一個方向上（垂直或者水平）對齊所有子項目，一個垂直列表中每一行都只有一個子項目，一個水平列表只是一列高度。

<?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="wrap_content"    android:gravity="center_vertical"    android:orientation="vertical" >    <TextView        android:id="@+id/catalog"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#E0E0E0"        android:textColor="#454545"        android:layout_weight="1.0"        android:paddingLeft="5dip"        android:paddingTop="5dip"        android:paddingBottom="5dip"        android:text="A"/>    <TextView        android:id="@+id/title"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_gravity="center_vertical"        android:gravity="center_vertical"        android:layout_weight="1.0"        android:textColor="#336598"        android:layout_marginLeft="5dip"        android:paddingTop="10dip"        android:paddingBottom="10dip"        android:text="hhhh"/></LinearLayout>

 

 5.RelativeLayout（相對布局）

定義：根據布局中子控制項會根據他們設定的參照控制項和參數進行相對布局。參照控制項可以是父控制項，也可以是其他的子控制項，但是被參照的空間必須在參照它的控制項之前定義。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/umeng_socialize_comment_item"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="#ffffff"    android:padding="5dp" >    <!-- 頭像 -->    <RelativeLayout        android:id="@+id/umeng_socialize_comment_item_profile_gp"        android:layout_width="50dp"        android:layout_height="130dp"        android:layout_marginLeft="8dp"        android:gravity="center" >        <ImageView            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:background="@null" />        <ImageView            android:id="@+id/umeng_socialize_comment_avatar"            android:layout_width="48dp"            android:layout_height="48dp"            android:layout_marginTop="8dp"            android:layout_centerVertical="true"            android:src="@drawable/umeng_socialize_default_avatar"            android:scaleType="fitXY" />    </RelativeLayout>    <TextView        android:id="@+id/umeng_socialize_comment_item_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="8dp"        android:layout_marginTop="5dp"        android:layout_toRightOf="@id/umeng_socialize_comment_item_profile_gp"        android:ellipsize="end"        android:ems="10"        android:maxLines="1"        android:textColor="@color/umeng_socialize_list_item_textcolor"        android:textSize="14sp"         />    <!-- A123456789B123456789C123456789D123456789E123456789F123456789G123456789H123456789 -->    <TextView        android:id="@+id/umeng_socialize_comment_item_content"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="8dp"        android:layout_marginTop="0dp"        android:layout_toRightOf="@id/umeng_socialize_comment_item_profile_gp"        android:layout_below="@id/umeng_socialize_comment_item_name"        android:maxLength="35"        android:layout_marginRight="18dp"        android:scrollHorizontally="false"        android:ellipsize="end"        android:textColor="#646464"        android:textSize="12sp" />    <TextView        android:id="@+id/umeng_socialize_comment_item_time"        android:layout_marginTop="0dp"        android:layout_marginLeft="8dp"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/umeng_socialize_comment_item_content"        android:layout_toRightOf="@id/umeng_socialize_comment_item_profile_gp"        android:textColor="@color/umeng_socialize_text_time"        android:textSize="10sp" />    <ImageView        android:id="@+id/umeng_socialize_comment_item_has_location"       android:layout_marginTop="0dp"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_height="18dp"        android:layout_width="18dp"        android:scaleType="fitXY"        android:visibility="invisible"        android:src="@drawable/umeng_socialize_location_ic"/>    </RelativeLayout>

 相對布局中的屬性參數比較多，也比較重要的布局格式。介紹一下relativeLayout布局的屬性參數：

android:layout_centerHorizontal 水平置中

android：layout_centervertical 垂直置中

android:layout_centerInParent 相對於父元素完全置中

android: layout_alignparentBottom 貼近父元素的下邊緣

android:layout_alignparentLeft 

android:layout_alignParentRight

android:layout_alignparentTop

android:layout_alignwithparentifmissing 如果對應的兄弟元素找不到，就以父元素作為參照物

 

android：layout_below="id/id-name" 在某元素下面

android:layot_top

android:layout_toLeftof

android:layout_toRightof

 

android:layout_alignTop 本元素的上邊緣和某元素的上邊緣對齊

android：layout_alignBottom

android:layout_alignLeft

android:layout_alignRight

 

android:layout_marginBottom 離某元素底邊緣的距離

android:layout_margintop

android:layout_marginleft

android:layout_marginright

 

 

本文出自 “Bigoppoer” 部落格，請務必保留此出處http://bigoppoer.blog.51cto.com/9971842/1649858

android 五大布局檔案