【移動應(yīng)用開發(fā)技術(shù)】Android開發(fā)之布局

【移動應(yīng)用開發(fā)技術(shù)】Android開發(fā)之布局

為了適應(yīng)各式各樣的界面風(fēng)格，Android系統(tǒng)提供了5種布局，這5種布局分別是：LinearLayout(線性布局)TableLayout(表格布局)RelativeLayout(相對布局)AbsoluteLayout(絕對布局)FrameLayout(框架布局)利用這五種布局，可以在屏幕上將控件隨心所欲的擺放，而且控件的大小和位置會隨著屏幕大小的變化作出相應(yīng)的調(diào)整。下面是這五個布局在View的繼承體系中的關(guān)系：

一，LinearLayout(線性布局)

在一個方向上(垂直或水平)對齊所有子元素一個垂直列表每行將只有一個子元素(無論它們有多寬)一個水平列表只是一列的高度（最高子元素的高度來填充）下面是一個簡單的線性布局的例子：01<?xmlversion="1.0"encoding="utf-8"?>

02<LinearLayout

03xmlns:android="/apk/res/android"

04android:layout_width="match_parent"

05android:layout_height="match_parent"android:orientation="vertical">

06<EditTextandroid:text="EditText"

07

08android:id="@+id/editText1"

09

10android:layout_height="wrap_content"

11

12android:layout_width="fill_parent">

13

14</EditText>

15<LinearLayoutandroid:id="@+id/linearLayout1"

16

17android:layout_height="fill_parent"

18

19android:layout_width="fill_parent"

20

21android:gravity="right">

22<Buttonandroid:id="@+id/button2"

23

24android:text="Button"

25

26android:layout_width="wrap_content"

27

28android:layout_height="wrap_content"></Button>

29<Buttonandroid:text="Button"

30

31android:id="@+id/button1"

32

33android:layout_width="wrap_content"

34

35android:layout_height="wrap_content"></Button>

36</LinearLayout>

37</LinearLayout>復(fù)制代碼最外層布局為垂直線性布局，寬度為整個屏幕(fill_parent)，高度為剛好適合子控件(wrap_content)。然后依次添加一個EditText，一個水平布局的LinearLayout，在這個線性布局里面，擺放兩個Button，該線性布局的gravity屬性設(shè)置為”right”，所以里面的兩個Button靠右顯示。二，TableLayout(表格布局)把子元素放入到行與列中不顯示行、列或是單元格邊界線單元格不能橫跨行，如HTML中一樣表格布局模型以行列的形式管理子控件，每一行為一個TableRow的對象，當(dāng)然也可以是一個View的對象。TableRow可以添加子控件，每添加一個為一列。android:layout_colum官方解釋：Theindexofthecolumninwhichthischildshouldbe，也即是設(shè)置該控件在TableRow中所處的列。android:layout_span官方解釋：Defineshowmanycolumnsthischildshouldspan，也即是設(shè)置該控件所跨越的列數(shù)。android:collapseColumns官方解釋：The0basedindexofthecolumnstocollapse.Thecolumnindicesmustbeseparatedbyacomma:1,2,5.也即是將TableLayout里面指定的列隱藏，若有多列需要隱藏，請用逗號將需要隱藏的列序號隔開。android:stretchColumns官方解釋：The0basedindexofthecolumnstostretch.Thecolumnindicesmustbeseparatedbyacomma:1,2,5.Youcanstretchallcolumnsbyusingthevalue“*”instead.Notethatacolumncanbemarkedstretchableandshrinkableatthesametime.也即是設(shè)置指定的列為可伸展的列，可伸展的列會盡量伸展以填滿所有可用的空間，若有多列需要設(shè)置為可伸展，請用逗號將需要伸展的列序號隔開。android:shrinkColumns官方解釋：The0basedindexofthecolumnstoshrink.Thecolumnindicesmustbeseparatedbyacomma:1,2,5.Youcanshrinkallcolumnsbyusingthevalue“*”instead.設(shè)置指定的列為可收縮的列。當(dāng)可收縮的列太寬以至于讓其他列顯示不全時，會縱向延伸空間。當(dāng)需要設(shè)置多列為可收縮時，將列序號用逗號隔開。下面用一個例子簡單說明TableLayout的用法：01<?xmlversion="1.0"encoding="utf-8"?>

02<TableLayoutxmlns:android="/apk/res/android"

03android:layout_width="fill_parent"

04android:layout_height="fill_parent"

05android:stretchColumns="1">

06<TableRow>

07<TextView

08android:layout_column="1"

09android:padding="3dip"android:text="Row1"/>

10<TextView

11android:text="1"

12android:gravity="right"

13android:padding="3dip"/>

14</TableRow>

15<View

16android:layout_height="2dip"

17android:background="#FF909090"/>

18<TableRow>

19<TextView

20android:text="*"

21android:padding="3dip"/>

22<TextView

23android:text="Row12"

24android:padding="3dip"/>

25<TextView

26android:text="2"

27android:gravity="right"

28android:padding="3dip"/>

29</TableRow>

30<View

31android:layout_height="2dip"

32android:background="#FF909090"/>

33<TableRow>

34<TextView

35android:layout_column="1"

36android:text="Row13"

37android:padding="3dip"/>

38</TableRow>

39</TableLayout>復(fù)制代碼三、RelativeLayout(相對布局)相對布局的子控件會根據(jù)它們所設(shè)置的參照控件和參數(shù)進行相對布局。參照控件可以是父控件，也可以是其它子控件，但是被參照的控件必須要在參照它的控件之前定義。下面是一個簡單的例子：01<?xmlversion="1.0"encoding="utf-8"?>

02<?xmlversion="1.0"encoding="utf-8"?>

03<RelativeLayoutxmlns:android="/apk/res/android"

04android:layout_width="fill_parent"

05android:layout_height="fill_parent"

06>

07<AnalogClock

08android:id="@+id/aclock"

09android:layout_width="wrap_content"

10android:layout_height="wrap_content"

11android:layout_centerInParent="true"/>

12<DigitalClock

13android:id="@+id/dclock"

14android:layout_width="wrap_content"

15android:layout_height="wrap_content"

16android:layout_below="@id/aclock"

17android:layout_alignLeft="@id/aclock"

18android:layout_marginLeft="40px"/>

19<TextView

20android:layout_width="wrap_content"

21android:layout_height="wrap_content"

22android:text="當(dāng)前時間："

23android:layout_toLeftOf="@id/dclock"

24android:layout_alignTop="@id/aclock"/>

25</RelativeLayout>復(fù)制代碼四、AbsoluteLayout(絕對布局)絕對布局的子控件需要指定相對于此坐標(biāo)布局的橫縱坐標(biāo)值，否則將會像框架布局那樣被排在左上角。手機應(yīng)用需要適應(yīng)不同的屏幕大小，而這種布局模型不能自適應(yīng)屏幕尺寸大小，所以應(yīng)用的相對較少。下面以一個例子簡單說明絕對布局：01<?xmlversion="1.0"encoding="utf-8"?>

02<AbsoluteLayoutxmlns:android="/apk/res/android"

03android:layout_width="fill_parent"

04android:layout_height="fill_parent"

05>

06<TextView

07android:layout_width="wrap_content"

08android:layout_height="wrap_content"

09android:layout_x="10px"

10android:layout_y="10px"android:text="Textview"/>

11<TextView

12android:layout_width="wrap_content"

13android:layout_height="wrap_content"

14android:layout_x="30px"

15android:layout_y="30px"android:text="Textview"/>

16<TextView

17android:layout_width="wrap_content"

18android:layout_height="wrap_content"

19android:layout_x="50px"

20android:layout_y="50px"android:text="Textview"/>

21</AbsoluteLayout>復(fù)制代碼五、FrameLayout(框架布局)框架布局是最簡單的布局形式。所有添加到這個布局中的視圖都以層疊的方式顯示。第一個添加的控件被放在最底層，最后一個添加到框架布局中的視圖顯示在最頂層，上一層的控件會覆蓋下一層的控件。這種顯示方式有些類似于堆棧。下面舉一個簡單的例子01<?xmlversion="1.0"encoding="utf-8"?>

02<FrameLayoutxmlns:android="/apk/res/android"

03android:layout_width="fill_parent"android:layout_height="fill_parent">

04<LinearLayoutandroid:id="@+id/linearLayout1"

05android:layout_height="match_parent"

06android:layout_width="match_parent">

07<Buttonandroid:text="Button"

08android:id="@+id/button1"

09android:layout_width="wrap_content"

10android:layout_height="wrap_content"></Button>

11</LinearLayout>

12<LinearLayoutandroid:layout_width="match_parent"

13android:id="@+id/linearLayout3"

14android:layout_height="match_parent"

15android:gravity="bottom|right">

16<Buttonandroid:text="Button"

17android:id="@+id/button3"

18android:layout_width="wrap_content"

19android:layout_height="wrap_content"></Button>

20</LinearLayout>

21<LinearLayoutandroid:layout_height="match_parent"

22android:id="@+id/linearLayout2"

23android:layout_width="match_parent"

24android:gravity="right">

25<Buttonandroid:text="Button"

26android:id="@+id/button2"

27android:layout_width="wrap_content"

28android:layout_height="wrap_content"></Button>

29</LinearLayout>

30<LinearLayoutandroid:layout_width="match_parent"

31android:id="@+id/LinearLayout01"

32android:layout_height="match_parent"

33android:gravity="bottom|left">

34<Buttonandroid:id="@+id/Button01"

35android:text="Button"

36android:layout_width="wrap_content"

37android:layout_height="wrap_content"></Button>

38</LinearLayout>

39</FrameLayout>復(fù)制代碼下面介紹一下RelativeLayout用到的一些重要的屬性：第一類:屬性值為true或falseandroid:layout_centerHrizontal

水平居中android:layout_centerVertical

垂直居中android:layout_centerInparent

相對于父元素完全居中android:layout_alignParentBottom

貼緊父元素的下邊緣android:layout_alignParentLeft

貼緊父元素的左邊緣android:layout_alignParentRight

貼緊父元素的右邊緣android:layout_alignParentTop