Android 經常使用佈局

複習鞏固一下這些基礎的知識。參考了老羅的視頻和文檔。

這塊地方若是作應用開發的話，基本上每一個都會要用到。

• 5種佈局

android提供了5種佈局，分別是FrameLayout（框架佈局），LinearLayout（線性佈局），RelativeLayout（相對佈局），TableLayout (表格佈局），AbsoluteLayout(絕對佈局)等。

 

在Android系統中，可視化控件都是從Android.view.View繼承的。在設置點擊監聽的時候要選擇View的監聽，不要選成了Dialog的監聽。

開發者能夠經過xml的方式來佈局這些view，基本上app的開發都是使用的這一種，相似與J2ee中的jsp。

也能夠徹底使用java代碼來建立View，這個在各類開發sdk中會用到，方便用戶集成。

 

這篇文章主要講解xml的佈局方式。

• xml定義視圖

Xml佈局文件是android系統中定義的視圖經常使用方法，全部的佈局文件必須包含在res/layout目錄中。定義XML佈局的命名和定義注意事項以下：

xml佈局文件必須是以xml文件名結束，命名必須是符合java的規範

xml佈局文件的根節點必須是包含android的命名空間，命名空間必須是xmlns:android=http://schemas.android.com/apk/res/android

爲xml文件佈局中的標籤指定的id須要使用這樣的格式： android:id=「@+id/標籤名稱「該標記會保存在R文件中。android:id=「@id/標籤名稱「表示引發已經聲明過的ID。

每個視圖的id都會在R類中生成與之對應的變量，所以視圖ID的值必須是符合java規範的

• 使用XML佈局文件定義視圖

若是是要使用xml佈局文件，一般須要oncreate方法中使用setContentView來加載指定的xml佈局文件

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

得到xml佈局文件注意一下幾點：

使用findViewById以前須要使用setContentView先加載xml文件、佈局文件會拋出異常信息。也就是說findViewById方法要在setContentView以後才能使用。

全部的的xml文件佈局文件的視圖id都在R類生成相對應的變量

 

• Android中長度單位介紹

Android表示單位長度的方式一般有三種表示方式。

px：表示屏幕實際的象素。例如，320*480的屏幕在橫向有320個象素，在縱向有480個象素。

dp(dip): 是屏幕的物理尺寸。大小爲1英寸的1/72。

sp（與刻度無關的像素）：與dp相似，可是能夠根據用戶的字體大小首選項進行縮放。

具體能夠參考下： http://www.cnblogs.com/greatverve/archive/2011/12/28/android-dip-dp-sp-pt-px.html

 

設計技巧：

若是設置表示長度、高度等屬性時能夠使用dp 或sp。但若是設置字體，須要使用sp。

dp是與密度無關，sp除了與密度無關外，還與scale無關

若是使用dp和sp，系統會根據屏幕密度的變化自動進行轉換。

 

• Android佈局中經常使用屬性介紹

layout_margin是控件邊緣相對於父控件的邊距

 

layout_padding是控件內容相對於控件邊緣的邊距

gravity和layout_gravity的區別

android:gravity與android:layout_gravity

他們的區別在於：android:gravity用於設置View組件的對齊方式，而android:layout_gravity用於設置Container組件的對齊方式。

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical" android:layout_width="fill_parent"
 4     android:layout_height="fill_parent">
 5     <Button android:id="@+id/button" android:layout_width="wrap_content"
 6         android:layout_marginTop="30dp" android:layout_marginLeft="40dp"
 7         android:layout_marginRight="60dp" android:layout_marginBottom="100dp"
 8         android:layout_height="wrap_content" android:text="測試按鈕一"></Button>
 9 
10     <Button android:id="@+id/button2" android:layout_width="wrap_content"
11         android:layout_height="wrap_content" android:paddingLeft="20sp"
12         android:paddingTop="5sp" android:text="測試按鈕一"></Button>
13 
14     <Button android:id="@+id/button3" android:layout_width="wrap_content"
15         android:layout_gravity="right" android:layout_height="wrap_content"
16         android:text="測試按鈕一"></Button>
17     <Button android:id="@+id/button3" android:layout_width="wrap_content"
18         android:layout_gravity="center" android:layout_height="wrap_content"
19         android:text="測試按鈕二"></Button>
20 </LinearLayout>

View Code

效果圖：

• 線性佈局

線性佈局是最經常使用的佈局線性佈局在xml文件中使用<LinearLayout>來定義

線性佈局能夠分爲水平和垂直的方向的佈局，能夠經過android:orientation=「vertical」來定義方向，該屬性能夠有horizontal和vertical兩個方向。

<LinearLayout>標籤中有一個很重要的屬性gravity，該屬性用於控制佈局中視圖的位置，若是設置多個值須要使用  | 進行分隔。

android:layout_weight權重的描述 layout_weight 用於給一個線性佈局中的諸多視圖的重要度賦值。 全部的視圖都有一個layout_weight值，默認爲零，意思是須要顯示 多大的視圖就佔據多大的屏幕空 間。若賦一個高於零的值，則將父視 圖中的可用空間分割，分割大小具體取決於每個視圖的layout_weight 值以及該值在當前屏幕布局的總體 layout_weight值和在其它視圖屏幕布 局的layout_weight值中所佔的比率而定。layout_weight越小，顯示比例越大

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:orientation="vertical" android:layout_width="match_parent"
  4     android:layout_height="match_parent" android:background="#FFFFFF">
  5 
  6     <LinearLayout android:orientation="horizontal"
  7         android:layout_width="match_parent" android:layout_height="wrap_content">
  8         <EditText android:id="@+id/msg" android:layout_width="match_parent"
  9             android:layout_height="wrap_content"></EditText>
 10     </LinearLayout>
 11     <!-- 佈局能夠嵌套佈局 -->
 12     <LinearLayout android:orientation="horizontal"
 13         android:layout_width="match_parent" android:layout_height="wrap_content">
 14         <Button android:layout_width="match_parent"
 15             android:layout_height="wrap_content" android:text="mc"
 16             android:layout_weight="1"></Button>
 17         <Button android:layout_width="match_parent"
 18             android:layout_weight="1" android:layout_height="wrap_content"
 19             android:text="m+"></Button>
 20         <Button android:layout_width="match_parent"
 21             android:layout_weight="1" android:layout_height="wrap_content"
 22             android:text="m-"></Button>
 23         <Button android:layout_width="match_parent"
 24             android:layout_weight="1" android:layout_height="wrap_content"
 25             android:text="mr"></Button>
 26     </LinearLayout>
 27 
 28     <LinearLayout android:orientation="horizontal"
 29         android:layout_width="match_parent" android:layout_height="wrap_content">
 30         <Button android:layout_width="match_parent"
 31             android:layout_height="wrap_content" android:text="C"
 32             android:layout_weight="1"></Button>
 33         <Button android:layout_width="match_parent"
 34             android:layout_height="wrap_content" android:text="+/-"
 35             android:layout_weight="1"></Button>
 36         <Button android:layout_width="match_parent"
 37             android:layout_height="wrap_content" android:text="/"
 38             android:layout_weight="1"></Button>
 39         <Button android:layout_width="match_parent"
 40             android:layout_height="wrap_content" android:text="*"
 41             android:layout_weight="1"></Button>
 42     </LinearLayout>
 43     <LinearLayout android:orientation="horizontal"
 44         android:layout_width="match_parent" android:layout_height="wrap_content">
 45         <Button android:layout_width="match_parent"
 46             android:layout_height="wrap_content" android:text="7"
 47             android:layout_weight="1"></Button>
 48         <Button android:layout_width="match_parent"
 49             android:layout_height="wrap_content" android:text="8"
 50             android:layout_weight="1"></Button>
 51         <Button android:layout_width="match_parent"
 52             android:layout_height="wrap_content" android:text="9"
 53             android:layout_weight="1"></Button>
 54         <Button android:layout_width="match_parent"
 55             android:layout_height="wrap_content" android:text="-"
 56             android:layout_weight="1"></Button>
 57     </LinearLayout>
 58     <LinearLayout android:orientation="horizontal"
 59         android:layout_width="match_parent" android:layout_height="wrap_content">
 60         <Button android:layout_width="match_parent"
 61             android:layout_height="wrap_content" android:text="4"
 62             android:layout_weight="1"></Button>
 63         <Button android:layout_width="match_parent"
 64             android:layout_height="wrap_content" android:text="5"
 65             android:layout_weight="1"></Button>
 66         <Button android:layout_width="match_parent"
 67             android:layout_height="wrap_content" android:text="6"
 68             android:layout_weight="1"></Button>
 69         <Button android:layout_width="match_parent"
 70             android:layout_height="wrap_content" android:text="+"
 71             android:layout_weight="1"></Button>
 72     </LinearLayout>
 73 
 74     <LinearLayout android:orientation="horizontal"
 75         android:layout_width="match_parent" android:layout_height="wrap_content">
 76         <LinearLayout android:layout_weight="3"
 77             android:orientation="vertical" android:layout_width="wrap_content"
 78             android:layout_height="wrap_content">
 79 
 80             <LinearLayout android:orientation="horizontal"
 81                 android:layout_width="match_parent" android:layout_height="wrap_content">
 82                 <Button android:layout_width="match_parent"
 83                     android:layout_height="wrap_content" android:text="1"
 84                     android:layout_weight="1"></Button>
 85                 <Button android:layout_width="match_parent"
 86                     android:layout_height="wrap_content" android:text="2"
 87                     android:layout_weight="1"></Button>
 88                 <Button android:layout_width="match_parent"
 89                     android:layout_height="wrap_content" android:text="3"
 90                     android:layout_weight="1"></Button>
 91             </LinearLayout>
 92 
 93             <LinearLayout android:orientation="horizontal"
 94                 android:layout_width="match_parent" android:layout_height="wrap_content">
 95                 <Button android:layout_width="0px" android:layout_height="wrap_content"
 96                     android:text="0" android:layout_weight="2"></Button>
 97                 <Button android:layout_width="0px" android:layout_height="wrap_content"
 98                     android:text="." android:layout_weight="1"></Button>
 99             </LinearLayout>
100         </LinearLayout>
101         <LinearLayout android:orientation="horizontal"
102             android:layout_width="wrap_content" android:layout_weight="1"
103             android:layout_height="match_parent">
104             <Button android:layout_width="match_parent"
105                 android:layout_height="match_parent" android:text="="
106                 android:layout_weight="1"></Button>
107         </LinearLayout>
108     </LinearLayout>
109 </LinearLayout>

View Code

顯示效果圖：

 

在xml裏面有一個android:layout_width="0px" 的讓人很困惑，google一下。

參考連接http://www.cnblogs.com/mybkn/articles/2535519.html 解釋的很清楚：

傳統的layout_weight使用方法是將當前控件的layout_width和layout_height都設置成fill_parent,這樣就能夠把控件的顯示比例徹底交給layout_weight；這樣使用的話，就出現了layout_weight越小，顯示比例越大的狀況。不過對於2個控件還好，若是控件過多，且顯示比例也不相同的時候，控制起來就比較麻煩了，畢竟反比不是那麼好肯定的。

    因而就有了如今最爲流行的 0px設值法。看似讓人難以理解的layout_height=0px的寫法，結合layout_weight，卻能夠使控件成正比例顯示，輕鬆解決了當前Android開發最爲頭疼的碎片化問題之一。

 

• 框架佈局FrameLayOut

框架佈局是最簡單的佈局方式、全部添加到這個佈局中的視圖都是以層疊的方式顯示。第一個添加到框架佈局中的視圖顯示在最底層，最後一個被放在最頂層，上一層的視圖會覆蓋下一層的視圖，所以框架佈局相似堆棧佈局。

屬性值 描述
top 將視圖放到屏幕的頂端
Buttom 將視圖放到屏幕的底端
Left 將視圖放在屏幕的左側
Right 將視圖放在屏幕的右側
Center_vertical 將視圖按照垂直方向居中顯示
horizontal_vertical 將視圖按照水平方向居中顯示

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6 
 7     <ImageView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:layout_gravity="center"
11         android:background="@drawable/background" >
12     </ImageView>
13 
14     <ImageView
15         android:layout_width="85dp"
16         android:layout_height="85dp"
17          android:layout_gravity="center"
18         android:layout_marginBottom="80dip"
19       
20         android:background="@drawable/superman" >
21     </ImageView>
22 
23     <ImageView
24         android:layout_width="63dp"
25         android:layout_height="46dp"
26         android:layout_gravity="center"
27         android:layout_marginTop="80dip"
28         android:background="@drawable/bird" >
29     </ImageView>
30 
31 </FrameLayout>

View Code

效果圖：

 

• RelativeLayout相對佈局

RelativeLayout能夠設置某一個視圖相對於其餘視圖的位置，這些位置能夠包括上下左右等

屬性 說明
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左邊
android:layout_toRightOf 在某元素的右邊

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:gravity="center" android:layout_width="fill_parent"
 4     android:layout_height="fill_parent">
 5 
 6     <Button android:id="@+id/button1" android:layout_width="wrap_content"
 7         android:layout_height="wrap_content" android:text="Button1"
 8         android:textSize="16dp"></Button>
 9 
10     <Button android:layout_width="wrap_content" android:id="@+id/button2"
11         android:layout_height="wrap_content" android:text="Button2"
12         android:textSize="16dp" android:layout_toRightOf="@id/button1"
13         android:layout_below="@id/button1"></Button>
14 
15     <Button android:id="@+id/button3" android:layout_width="wrap_content"
16         android:layout_height="wrap_content" android:text="Button3"
17         android:textSize="16dp" android:layout_toLeftOf="@id/button2"
18         android:layout_below="@id/button2"></Button>
19 
20     <Button android:id="@+id/button4" android:layout_width="wrap_content"
21         android:layout_height="wrap_content" android:text="Button4"
22         android:textSize="16dp" android:layout_toRightOf="@id/button2"
23         android:layout_above="@id/button2"></Button>
24         
25     <Button android:id="@+id/button5" android:layout_width="wrap_content"
26         android:layout_height="wrap_content" android:text="Button5"
27         android:textSize="16dp" android:layout_toRightOf="@id/button2"
28         android:layout_below="@id/button2"></Button>
29 </RelativeLayout>

View Code

 

效果圖：

 

• 絕對佈局AbsoluteLayout

所謂絕對佈局（AbsoluteLayout），是指屏幕中全部控件的擺放由開發人員經過設置控件的座標來指定，控件容器再也不負責管理其子控件的位置。因爲子控件的位置和佈局都是經過座標來指定，所以AbsoluteLayout類中沒有特殊的屬性和方法。 能夠經過android:layout_x和android:layout_y屬性能夠設置視圖的橫座標和縱座標的位置。

 

 

• TableLayout佈局

在TableLayout佈局中，一個列的寬度由該列中最寬的那個單元格指定，而表格的寬度是由父容器指定的。在TableLayout中，能夠爲列設置三種屬性： Shrinkable：若是一個列被標識爲Shrinkable，則該列的寬度能夠進行收縮，以使表格可以適應其父容器的大小。 Stretchable：若是一個列被標識爲Stretchable，則該列的寬度能夠進行拉伸，以使填滿表格中的空閒空間。 Collapsed：若是一個列被標識爲Collapsed，則該列會被隱藏 注意：一個列能夠同時具備Shrinkable屬性和Stretchable屬性，在這種狀況下，該列的寬度將任意拉伸或收縮以適應父容器

TableLayout繼承自LinearLayout類，除了繼承來自父類的屬性和方法，TableLayout類中還包含表格佈局所特有的屬性和方法，以下表：

屬性名稱 對應方法 描述
android:collapseColumns setColumnCollapsed(int,boolean) 設置指定列號的列屬性爲Collapsed
android:shrinkColumns setShrinkAllColumns(boolean) 設置指定列號的列屬性爲Shrinkable
android:stretchColumns setStretchAllColumns(boolean) 設置指定列號的列屬性爲Stretchable

注意：TableLayout中所謂的列序號是從0開始計算的。setShrinkAllColumns和setStretchAllColumns實現的功能是將表格中的全部列設置爲Shrinkable或Stretchable。

它是由多個TableRow對象組成，每一個TableRow能夠有0個或多個單元格，每一個單元格就是一個View。這些TableRow，單元格不能設置layout_width,寬度默認是fill_parent的，只有高度layout_height能夠自定義，默認是wrap_content。  

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical" android:layout_width="fill_parent"
 4     android:layout_height="fill_parent">
 5 
 6     <TableLayout android:id="@+id/tablelayout1"
 7         android:layout_width="fill_parent" android:layout_height="wrap_content"
 8         android:background="#FFFFFF" android:stretchColumns="0">
 9         <TableRow android:id="@+id/tablerow1" android:layout_width="fill_parent"
10             android:layout_height="wrap_content">
11             <TextView android:id="@+id/textview1" android:layout_width="wrap_content"
12                 android:layout_height="wrap_content" android:background="#fd8d8d"
13                 android:textColor="#000000" 
14                 android:padding="4px" 
15                 android:text="表格佈局的使用"
16                 android:layout_centerInParent="true">
17             </TextView>
18         </TableRow>
19     </TableLayout>
20 
21     <TableLayout android:id="@+id/mytablelayout2"
22         android:layout_width="match_parent" android:layout_height="wrap_content"
23         android:stretchColumns="0,1,2,3">
24 
25         <TableRow android:id="@+id/tablerow2" android:layout_width="fill_parent"
26             android:layout_height="wrap_content">
27             <Button android:id="@+id/button1" android:layout_width="wrap_content"
28                 android:layout_height="wrap_content" android:text="Button1"></Button>
29             <Button android:id="@+id/button1" android:layout_width="wrap_content"
30                 android:layout_height="wrap_content" android:text="Button2"></Button>
31             <Button android:id="@+id/button1" android:layout_width="wrap_content"
32                 android:layout_height="wrap_content" android:text="Button3"></Button>
33             <Button android:id="@+id/button1" android:layout_width="wrap_content"
34                 android:layout_height="wrap_content" android:text="Button4"></Button>
35         </TableRow>
36     </TableLayout>
37 
38     <TableLayout android:id="@+id/tablelayout3"
39         android:layout_width="fill_parent" android:layout_height="wrap_content"
40         android:stretchColumns="0">
41         <TableRow android:id="@+id/tablerow3" android:layout_width="fill_parent"
42             android:layout_height="wrap_content">
43 
44             <EditText android:text="查詢" android:layout_width="match_parent"
45                 android:layout_height="match_parent" android:id="@+id/textview1"></EditText>
46         </TableRow>
47     </TableLayout>
48 </LinearLayout>

View Code

效果圖：