.Net碼農學Android---五分鍾了解布局


在android中應用的界面是以xml來組織的,這一點和WPF相似,通過配置xml文件我們可以靈活的構建出你自己想要的界面。

而在所有的xml界面文件中,根節點必須是布局,即先有布局,然后在布局中組織控件或嵌套布局,android中的布局有5種,熟悉各種布局的使用對我們以后開發中更好的組織界面大有益處,以下簡單介紹。

  • TableLayout

表格布局,就是類似我們在網頁中以表格來組織控件的布局。以N行N列的形式排列出相應的控件。

 1  <TableLayout  2         android:layout_width="wrap_content"
 3  android:layout_height="wrap_content"
 4  android:layout_alignLeft="@+id/textView1"
 5  android:layout_centerHorizontal="true"
 6  android:layout_centerVertical="true" >
 7 
 8         <TableRow  9             android:id="@+id/tableRow1"
10  android:layout_width="wrap_content"
11  android:layout_height="wrap_content" >
12 
13             <Button 14                 android:layout_width="wrap_content"
15  android:layout_height="wrap_content"
16  android:text="1行1列" />
17 
18             <Button 19                 android:layout_width="wrap_content"
20  android:layout_height="wrap_content"
21  android:text="1行2列" />
22         </TableRow>
23 
24         <TableRow 25             android:id="@+id/tableRow2"
26  android:layout_width="wrap_content"
27  android:layout_height="wrap_content" >
28 
29             <Button 30                 android:layout_width="wrap_content"
31  android:layout_height="wrap_content"
32  android:text="2行1列" />
33 
34             <Button 35                 android:layout_width="wrap_content"
36  android:layout_height="wrap_content"
37  android:text="2行2列" />
38         </TableRow>
39 
40         <TableRow 41             android:id="@+id/tableRow3"
42  android:layout_width="wrap_content"
43  android:layout_height="wrap_content" >
44 
45             <Button 46                 android:layout_width="wrap_content"
47  android:layout_height="wrap_content"
48  android:text="3行1列" />
49 
50             <Button 51                 android:layout_width="wrap_content"
52  android:layout_height="wrap_content"
53  android:text="3行2列" />
54         </TableRow>
55     </TableLayout>

  • LineLayout

線性布局,比較簡單,就是以水平或垂直的方式一行一個或一列一個的形式擺放控件。

 1   <LinearLayout  2         android:layout_width="fill_parent"
 3  android:layout_height="fill_parent"
 4  android:orientation="vertical" >//水平或垂直
 5 
 6         <Button  7             android:layout_width="fill_parent"
 8  android:layout_height="wrap_content"
 9  android:text="1行" />
10 
11         <Button 12             android:layout_width="fill_parent"
13  android:layout_height="wrap_content"
14  android:text="2行" />
15 
16         <Button 17             android:layout_width="fill_parent"
18  android:layout_height="wrap_content"
19  android:text="3行" />
20     </LinearLayout>

  • RelativeLayout

相對布局,最為靈活得分一種布局,用於組織一些復雜界面,在此布局中的子元素里與位置相關的屬性將生效。例如android:layout_below,  android:layout_above, android:layout_centerVertical等。注意在指定位置關系時,引用的ID必須在引用之前,先被定義,否則將出現異常。

 1  <RelativeLayout  2         android:layout_width="fill_parent"
 3  android:layout_height="fill_parent"
 4  android:orientation="vertical" >
 5 
 6         <Button  7             android:id="@+id/text_01"
 8  android:layout_width="50dp"
 9  android:layout_height="50dp"
10  android:layout_alignParentBottom="true"
11  android:gravity="center"
12  android:text="1" />
13 
14         <Button 15             android:id="@+id/text_02"
16  android:layout_width="50dp"
17  android:layout_height="50dp"
18  android:layout_above="@id/text_01"//相對布局中的特有屬性,xx之上/之下/之左/之右等
19  android:layout_centerHorizontal="true"
20  android:gravity="center"
21  android:text="2" />
22 
23         <Button 24             android:id="@+id/text_03"
25  android:layout_width="50dp"
26  android:layout_height="50dp"
27  android:layout_above="@id/text_01"
28  android:layout_toLeftOf="@id/text_02"//相對布局中的特有屬性,在xx的左邊
29  android:gravity="center"
30  android:text="3" />
31     </RelativeLayout>

  • AbsoluteLayout

絕對布局,在此布局中的子元素的android:layout_x和android:layout_y屬性將生效,用於描述該子元素的坐標位置,一經設置變不能改變位置,適用一些不經常變化的控件或界面。

 1 <AbsoluteLayout  2         android:layout_width="fill_parent"
 3  android:layout_height="fill_parent"
 4  android:orientation="vertical" >
 5 
 6         <Button  7             android:layout_width="50dp"
 8  android:layout_height="50dp"
 9  android:layout_x="50dp"
10  android:layout_y="50dp"
11  android:background="#999999"
12  android:gravity="center"
13  android:text="1" />
14 
15         <Button 16             android:layout_width="50dp"
17  android:layout_height="50dp"
18  android:layout_x="90dp"
19  android:layout_y="90dp"
20  android:background="#ff654321"
21  android:gravity="center"
22  android:text="2" />
23 
24         <Button 25             android:layout_width="50dp"
26  android:layout_height="50dp"
27  android:layout_x="125dp"
28  android:layout_y="125dp"
29  android:background="#fffedcba"
30  android:gravity="center"
31  android:text="3" />
32     </AbsoluteLayout>

  • FrameLayout

 幀布局,網上說的有些別扭,我自己理解就類似css中的z-index,可以實現遮罩,即有層的效果。注意:所有的幀默認都是從屏幕左上角開始繪制,然后按照控件的聲明順序,依次疊加,層級逐漸升高。 

 1 <FrameLayout  2         android:layout_width="fill_parent"
 3  android:layout_height="fill_parent"
 4  android:orientation="vertical" >
 5 
 6         <TextView  7             android:layout_width="fill_parent"
 8  android:layout_height="fill_parent"
 9  android:background="#999999"
10  android:gravity="center"
11  android:text="1" />
12 
13         <TextView 14             android:layout_width="200dp"
15  android:layout_height="100dp"
16  android:background="#ff654321"
17  android:gravity="center"
18  android:text="2" />
19 
20         <TextView 21             android:layout_width="50dp"
22  android:layout_height="50dp"
23  android:background="#fffedcba"
24  android:gravity="center"
25  android:text="3" />
26     </FrameLayout>

五大布局已經介紹完畢,有些簡單,(因為這個布局我覺得確實也沒什么好說的,結合配圖我覺得已經很能說明問題了)。我在寫這個系列之前也說了“我並不想做重復性的工作”,類似這種基礎的東西,網上很多人寫的比我好也很詳細,我只是想把自己在學習過程中認為有必要和大家分享的一些經驗和技巧寫出來,所以你可以看到我並沒有寫什么HelloWorld之類的,因為與其把時間花在這種已經泛濫的內容上,倒不如多花時間去貢獻一些獨有的,或被大家忽略的內容上。

寫技術博客真的很費時間,得理順思路、組織語言、寫Demo、截圖、排版等等,有時候真羡慕那些可以一周一篇甚至幾天一篇得大牛們。最近學的內容和點都比較多,看着大篇凌亂的筆記,一時間都不知道該從哪去寫,自己更新的有些慢,不過自己還是會堅持的,一起加油!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM