android菜鳥學習筆記6----android布局(一)

標籤：

Android應用的UI組件都是繼承自View類，View類表示的就是一個空白的矩形地區。常用的組件如TextView、Button、EditText等都直接或間接繼承自View。

此外，View還有一個重要的子類ViewGroup，該類可以用來包含多個View組件，本身也可以當做一個View組件被其他的ViewGroup所包含，由此，可以構建出非常複雜的UI介面。

常用的布局管理器如FrameLayout、LinearLayout、RelativeLayout等都直接繼承自ViewGroup。

在Android應用中，Activity就相當於傳統案頭開發中的Form，剛建立出來就是一個空白的螢幕，因此，要顯示UI介面時，就需要調用setContentView()方法傳入要顯示的視圖執行個體或者布局資源。

如：

傳入一個布局資源：

setContentView(R.layout.main);

傳入一個View執行個體：

TextView myTv = new TextView(this);

setContentView(myTv);

myTv.setText(“hello, world”);

因為setContentView()只能接受一個View執行個體，要顯示複雜的UI介面，就需要用到ViewGroup來包含多個多個View執行個體，然後將ViewGroup執行個體傳給setContentView。ViewGroup是個抽象類別，一般直接使用的都是它的子類，被稱之為布局管理器。

Android有兩種方式編寫UI介面，一種是在xml布局資源檔中，另一種是直接在代碼中編寫，如上面的傳入一個View執行個體的做法就是直接在代碼中編寫，這是傳統的Form編程的做法。現在比較推薦的是在xml布局資源檔中編寫UI介面，這樣一來就可以將應用展示層與邏輯層相分離，無需修改代碼就可以修改展示層。

要編寫複雜的UI介面，需要掌握android中常用的布局管理器。主要有：

AbsoluteLayout：絕對布局

FrameLayout：幀布局

LinearLayout：線性布局

RelativeLayout：相對布局

TableLayout：表格版面配置

GridLayou：網格布局(Android 4.0添加的新的布局管理器)

1.LinearLayout 線性布局

線性布局就是放在其中的View組件將進行線性對齊排列，可以設定是垂直排列還是水平排列。

建立一個布局資源檔的方法：

右擊res/layout，然後在彈出的菜單中選擇new，然後選擇Android Xml File，要建立LinearLayout布局檔案，就選擇LinearLayout作為其根節點即可。

linear_layout.xml代碼如下：

 1 <?xml version="1.0" encoding="utf-8"?> 2  3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4  5     android:layout_width="match_parent" 6  7     android:layout_height="match_parent" 8  9     android:orientation="vertical">10 11     <Button12 13         android:layout_width="match_parent"14 15         android:layout_height="wrap_content"16 17         android:text="aaaaaa"18 19         />20 21     <Button22 23         android:layout_width="match_parent"24 25         android:layout_height="wrap_content"26 27         android:text="bbbbbb"28 29         />30 31     <Button32 33         android:layout_width="match_parent"34 35         android:layout_height="wrap_content"36 37         android:text="cccccc"38 39         />40 41     <Button42 43         android:layout_width="match_parent"44 45         android:layout_height="wrap_content"46 47         android:text="dddddd"48 49         />50 51 </LinearLayout>

 

activity中代碼如下：

1 protected void onCreate(Bundle savedInstanceState) {2 3            // TODO Auto-generated method stub4 5            super.onCreate(savedInstanceState);6 7            setContentView(R.layout.linear_layout);8 9 }

 

顯示效果：

 

常用的幾個屬性：

1）orientation屬性：設定LinearLayout中組件的相片順序，可以取值vertical或者horizontal表示垂直排成一列或者水平排成一行。

上面代碼中，如果把orientation設定為horizontal。顯示則變為：

 

因為只顯示一行，而第一個Button的寬度就是充滿父元素，所以只顯示出來了第一個Button。

2）layout_width屬性：設定在父元素中該組件的寬度，可以取值wrap_content、match_parent或者fill_parent。其中wrap_content表示寬度能夠包裹該組件中的內容即可，fill_parent和match_parent含義相同表示寬度充滿父元素，現在，更常使用match_parent，而很少用fill_parent。

如上面代碼中把所有的Button的layout_width都設定為wrap_content，則顯示效果如下：

 

3）layout_height屬性：設定在父元素中該組件的寬度，取值同layout_width。

4）grativity屬性：設定該容器內組件的對齊。

如在LinearLayout節點中添加屬性：android:gravity="center_vertical"

則顯示效果如下：

 

該屬性的取值可以是：top、bottom、left、right、center、center_vertical、center_horizontal等值，或者這些值相或(即位或運算 | )

如：android:gravity="bottom|right" 顯示效果

 

5）layout_gravity屬性：當前控制項在父元素的位置。

如將aaaaaa那個Button中layout_gravity設定為”center”，其效果將會與其所處容器即LinearLayout中的gravity屬性效果進行疊加，顯示如下：

 

垂直上進行了置中，水平上還是排在bbbbbb的左邊

6）layout_weight屬性：在子控制項中設定父元素中多出來的額外空間的分配權重。

 

此時，如果只在aaaaaa這個button中設定layout_weight屬性，可以設定為任意值，習慣設定為1。則aaaaaa這個button會展開佔據剩下的空間，顯示如下：

 

如果同時在aaaaaa和dddddd兩個button中都設定layout_weight屬性，且第一個設定為1，第二個設定為2，則之前多出來的剩餘空間會分給aaaaaa 1/3，分給dddddd 2/3，即各自的權重值/總的權重值，即為各自所分得的剩餘空間的比例，顯示如下：

 

7）weightSum屬性：設定容器中剩餘空間的總的權重值，這個屬性是LinearLayout中的屬性，而layout_weight是各個子控制項中的屬性，若不設定，則預設為各個子控制項layout_weight屬性值的總和。

若如上面aaaaaa的layout_weight值為1，dddddd的layout_weight的值為2，同時在LinearLayout中設定weightSum值為6，則仍會有一半的剩餘空間，aaaaaa只分得原來剩餘空間的1/6，dddddd分得2/6，顯示如下：

 

8）visibility屬性：控制是否顯示，取值可以是invisible、visible、gone。visible表示顯示出來，invisible和gone不顯示出來，其中invisible不顯示，但控制項仍然存在，佔用著空間，而gone表示控制項不存在了，也就不佔用空間了。

如：cccccc設定visibility屬性為gone，顯示如下：

 

若改為invisible：

 

LinearLayout設定invisible：

 

2.RelativeLayout：相對布局

顧名思義，即根據各控制項的相對位置進行布局，相對位置，可以是子控制項A相對父控制項的位置，也可以是子控制項A相對於子控制項B的位置。

右擊res/layout，然後在彈出的菜單中選擇new，然後選擇Android Xml File，要建立RelativeLayout布局檔案，就選擇RelativeLayout作為其根節點即可。檔案名稱為relative_layout.xml。

代碼如下：

 1 <?xml version="1.0" encoding="utf-8"?> 2  3 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 4  5     android:layout_width="match_parent" 6  7     android:layout_height="match_parent" > 8  9     <Button10 11         android:id="@+id/aa"12 13         android:layout_width="wrap_content"14 15         android:layout_height="wrap_content"16 17         android:layout_centerInParent="true"18 19         android:text="aaaaaa"20 21        22 23         />24 25     <Button26 27         android:id="@+id/bb"28 29         android:layout_width="wrap_content"30 31         android:layout_height="wrap_content"32 33         android:layout_toRightOf="@id/aa"34 35         android:layout_alignTop="@id/aa"36 37         android:text="bbbbbb"38 39         />40 41     <Button42 43         android:id="@+id/cc"44 45         android:layout_width="wrap_content"46 47         android:layout_height="wrap_content"48 49         android:layout_toLeftOf="@id/aa"50 51         android:layout_alignBottom="@id/aa"52 53         android:text="cccccc"54 55         />56 57     <Button58 59         android:id="@+id/dd"60 61         android:layout_width="wrap_content"62 63         android:layout_height="wrap_content"64 65         android:layout_above="@id/aa"66 67         android:layout_alignLeft="@id/aa"68 69         android:text="dddddd"70 71         />72 73     <Button74 75         android:id="@+id/ee"76 77         android:layout_width="wrap_content"78 79         android:layout_height="wrap_content"80 81         android:layout_below="@id/aa"82 83         android:layout_alignLeft="@id/aa"84 85         android:text="eeeeee"86 87         />88 89 </RelativeLayout>

 

修改FirstActivity中setContentView(R.layout.relative_layout);

顯示效果：

 

aaaaaa在父容器中置中顯示

bbbbbb在aaaaaa的右邊顯示，並且與aaaaaa頂部對齊

ccccccc在aaaaaa的左邊顯示，並且與aaaaaa頂部對齊

dddddd在aaaaaa的上面顯示，並且與aaaaaa靠左對齊

eeeeee在aaaaaa的下面顯示，並且與aaaaaa靠左對齊

主要屬性：均為設定父子相對位置，或者子控制項與子控制項的相對位置

android:layout_toRightOf 在指定控制項的右邊

android:layout_toLeftOf  在指定控制項的左邊

android:layout_above          在指定控制項的上邊

android:layout_below           在指定控制項的下邊

android:layout_alignBaseline  跟指定控制項水平對齊

android:layout_alignLeft  跟指定控制項靠左對齊

android:layout_alignRight 跟指定控制項靠右對齊

android:layout_alignTop  跟指定控制項頂部對齊

android:layout_alignBottom   跟指定控制項底部對齊

android:layout_alignParentLeft     是否跟父布局靠左對齊

android:layout_alignParentTop    是否跟父布局頂部對齊

android:layout_alignParentRight   是否跟父布局靠右對齊

android:layout_alignParentBottom     是否跟父布局底部對齊

android:layout_centerVertical       在父布局中垂直置中

android:layout_centerHorizontal   在父布局中水平置中

android:layout_centerInParent     在父布局中置中

 

android菜鳥學習筆記6----android布局(一)