【ALearning】第四章 Android Layout組件布局(一)

標籤：android   layout   布局   

       本章我們將進行Android布局組件的學習，在前一章節，我們也初步使用LinearLayout布局，接下來我們就對布局檔案進行更詳細的學習與瞭解，並在案例的使用過程中去深入體會。

        Android的介面是有布局和組件協同完成的，布局好比是建築裡的架構，而組件則相當於建築裡的磚瓦。組件按照布局的要求依次排列，就組成了使用者所看見的介面。Android的五大布局分別是LinearLayout（線性布局）、FrameLayout（單幀布局）、RelativeLayout（相對布局）、AbsoluteLayout（絕對布局）和TableLayout（表格布局）。

1、線性布局(LinearLayout)
       線性布局的形式可以分為兩種，第一種橫向線性布局 第二種縱向線性布局，總而言之都是以線性形式 一個個排列出來的，純線性布局的缺點是很不方便修改控制項的顯示位置，所以開發中經常會以線性布局與相對布局嵌套的形式設定布局。
2、幀布局(FrameLayout)
       原理是在控制項中繪製任何一個控制項都可以被後繪製的控制項覆蓋，最後繪製的控制項會蓋住之前的控制項。
3、絕對布局(AbsoluteLayout)
      使用絕對布局可以設定任意控制項的 在螢幕中 X Y 座標點，和幀布局一樣後繪製的控制項會覆蓋住之前繪製的控制項。
4、相對布局(RelativeLayout)
      相對布局是android布局中最為強大的，首先它可以設定的屬性是最多了，其次它可以做的事情也是最多的。android手機螢幕的解析度五花八門所以為了考慮螢幕自適應的情況所以在開發中建議大家都去使用相對布局 它的座標取值範圍都是相對的所以使用它來做自適應螢幕是正確的。
5、表格布局(TableLayout)
      在表格布局中可以設定TableRow 可以設定 表格中每一行顯示的內容 以及位置 ，可以設定顯示的縮排，對齊的方式。

【部落格專欄：http://blog.csdn.net/column/details/alearning.html】

LinearLayout （線性布局）       LinearLayout按照垂直或者水平的順序依次排列子項目，每一個子項目都位於前一個元素之後。不僅LinearLayout布局可以嵌套使用，其他的布局方式也可以嵌套使用。LinearLayout中的子項目屬性android:layout_weight的作用是描述該子項目在剩餘空間中佔有的大小比例，預設值就為0。
本例拓展的屬性配置是：

• android:layout_weight   權重

       如果LinearLayout中有兩個不等長的文字框(TextView等)，那麼他們的android:layout_weight值分別為1和2，那麼第一個文字框將佔據剩餘空間的三分之二，第二個文字框將佔據剩餘空間中的三分之一。android:layout_weight遵循數值越小，重要度越高的原則。本例示範時android:layout_weight都為1，所以兩個LinearLayout平均分配寬度。
【布局檔案】activity_linearlayout.xml

<LinearLayout 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:gravity="center"    android:orientation="vertical"    tools:context=".MainActivity" >    <!-- 單個LinearLayout -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#99CCFF"        android:orientation="horizontal" >        <TextView            android:layout_width="match_parent"            android:layout_height="80dp"            android:gravity="center"            android:text="#99CCFF" />    </LinearLayout>    <!-- 單個LinearLayout下包含兩個水平平均分布的LinearLayout -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="#CCFF66"            android:orientation="vertical" >            <TextView                android:layout_width="match_parent"                android:layout_height="60dp"                android:gravity="center"                android:text="#CCFF66" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="#FF9900"            android:orientation="vertical" >            <TextView                android:layout_width="match_parent"                android:layout_height="60dp"                android:gravity="center"                android:text="#FF9900" />        </LinearLayout>    </LinearLayout>    <!-- 以上兩種情況的疊加 -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="#CC99CC"            android:orientation="vertical" >            <TextView                android:layout_width="match_parent"                android:layout_height="120dp"                android:gravity="center"                android:text="#CC99CC" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:orientation="vertical" >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="#CC9933"                android:orientation="horizontal" >                <TextView                    android:layout_width="match_parent"                    android:layout_height="60dp"                    android:gravity="center"                    android:text="#CC9933" />            </LinearLayout>            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="#99CCCC"                android:orientation="horizontal" >                <TextView                    android:layout_width="match_parent"                    android:layout_height="60dp"                    android:gravity="center"                    android:text="#99CCCC" />            </LinearLayout>        </LinearLayout>    </LinearLayout></LinearLayout>

效果：

FrameLayout （幀布局）        FrameLayout是五大布局中最簡單的一個布局，在這個布局中，整個介面被當成一塊空白備用地區，所有的子項目都不能被指定放置的位置，它們統統放於這塊地區的左上方，並且後面的子項目直接覆蓋在前面的子項目之上，將前面的子項目部分和全部遮擋。
本例拓展的屬性配置是：

• android: gravity 指定控制項的基本位置

註：該屬性之前也有介紹過，本例特殊之處，旨在說明如果給此屬性指定兩個參數時，可以用採用以下格式，以“|”串連。

android:gravity="bottom|center"

【布局檔案】activity_framelayoutt.xml

<?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_height="match_parent"        android:background="#99CCFF"        android:layout_width="match_parent"        android:gravity="bottom|center"        android:text="第一層\n【#99CCFF】"/>         <TextView android:layout_height="200dp"         android:background="#CC99CC"        android:layout_width="200dp"        android:gravity="bottom|center"        android:text="第二層\n【#CC99CC】"/>     <TextView android:layout_height="100dp"        android:layout_width="100dp"        android:gravity="bottom|center"        android:background="#99CCCC"        android:text="第三層\n【#99CCCC】"/>     </FrameLayout>

效果：
AbsoluteLayout （絕對布局）        AbsoluteLayout是絕對位置布局。在此布局中的子項目的android:layout_x和android:layout_y屬性將生效，用於描述該子項目的座標位置。螢幕左上方為座標原點（0,0），第一個0代表橫座標，向右移動此值增大，第二個0代表縱座標，向下移動，此值增大。在此布局中的子項目可以相互重疊。在實際開發中，通常不採用此布局格式，因為它的介面代碼過於剛性，以至於有不能很好的適配各種各樣的終端裝置。
本例拓展的屬性配置是：

• android:layout_x 指定控制項的x軸的位置
• android:layout_y 指定控制項的y軸的位置

【布局檔案】activity_absolutelayout.xml。

<?xml version="1.0" encoding="utf-8"?><AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="30dp"        android:layout_y="30dp"        android:background="#009966"        android:text="#009966" />    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="90dp"        android:layout_y="80dp"        android:background="#CC6699"        android:text="#CC6699" />    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="30dp"        android:layout_y="180dp"        android:background="#3366CC"        android:text="#3366CC" />    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="180dp"        android:layout_y="90dp"        android:background="#FFCC99"        android:text="#FFCC99" />    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_x="240dp"        android:layout_y="200dp"        android:background="#FF6666"        android:text="#FF6666" /></AbsoluteLayout>

效果：

參考資料

1、http://blog.chinaunix.net/uid-23544029-id-2985631.html

2、http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html

3、http://blog.csdn.net/jzp12/article/details/7590591