Android游戲開發-布局管理

2012/5/16 星期三 下午

  我們都知道，系統控件一般都會搭載進布局里的，在Android呢，提供了5種布局類型，通過這五種布局之間的相互組合可以構建各種復雜的布局。然而一個游戲當中，界面的布局是至關重要的一部分，一個漂亮的界面更能吸引玩家的眼球，并不是這個游戲的可玩性有多么的強，對于手機來說，無論是應用軟件還是游戲，我認為手機里面的資源始終是有限的，不能什么樣的游戲和軟件都能移植到手機當中，然而一個好的界面能與用戶得到很好的交互，那應該算是一個比較好的應用了。

  接下來，我還是繼續學習Android游戲開發中的界面布局管理這一塊，通過寫博客來鞏固自己學習到的東西，好記性不如爛筆頭嘛。

  Layout(布局),上面提到Android提供了5種類型的布局類型，有哪5種呢？

  第一個：LinearLayout（線性布局）

  第二個：RelativeLayout（相對布局）

  第三個：TableLayout（表格布局）

  第四個：AbsoluteLayout（絕對布局）

  第五個：FrameLayout（單幀布局）

下面通過5個實例來學習這5種布局

創建項目分別為：

=>>Layout_01(線性布局)

=>>Layout_02(相對布局)

=>>Layout_03(表格布局)

=>>Layout_04(絕對布局)

=>>Layout_05(單幀布局)

 

那好，接下來精彩不斷

@線性布局，是5種布局最常用的一種，從字面上也比較好理解，就是布局呈線性的，這種布局在顯示組件的時候會默認保持組件之間的間隔以及組件之間的互相對齊。線性布局顯示組件的方式有兩種方式：垂直和水平，是通過orientation來設定的。

話先不多說，先建立一個項目：Layout_01

項目主要修改的是布局文件:main.xml

說明：這里只是為了展示布局的效果，控件的事件監聽沒有實現，所以只修改布局文件

運行項目效果：

=>>首先是垂直排列(vertical)

修改main.xml代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
    <Button 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button2"
        />
    <Button 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button3"
        />

</LinearLayout>

 

=>>接著是水平排列(horizontal)

修改main.xml代碼

說明：這里要修改每個按鈕的填充形式，改為自適應內容的形式(wrap_content),不然只會看到button1，其他兩個就因為超出屏幕導致無法看到。

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        />
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"
        />

</LinearLayout>

 

=>>在談談布局嵌套，這里是一個線性布局里頭嵌套另一個線性布局

項目運行效果：

修改布局文件main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
   	<LinearLayout 
   	    android:orientation="vertical"
   	    android:layout_width="fill_parent"
   	    android:layout_height="fill_parent"
   	    >
   	    <Button 
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="Button2"
        	/>
    	<Button 
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="Button3"
        	/>
   	    
   	</LinearLayout>
</LinearLayout>

代碼說明：這里button2和button3放在了嵌套的LinearLayout中，最外層的LinearLayout放置了button1，最外層的LinearLayout設置成水平方向horizontal,嵌套的LineaarLayout設置成垂直方向vertical。所以會看到Button1與Button2、Button3是以水平方向排列，Button2、Button3是以垂直方向排列。

下面總結線性布局里頭一些常用的屬性：

  android:id - 為控件指定相應的ID
  android:text - 指定控件當中顯示的文字，需要注意的是，這里盡量使用string.xml
  android:gravity - 指定控件的基本位置，比如說居中，居右等位置
  android:textSize - 指定控件當中字體的大小
  android:background - 指定控件所用的背景色，RGB命名法
  android:layout_width - 指定控件的寬度
  android:layout_height - 指定控件的高度

  android:layout_weight - 指定控件的占用比例
  android:padding - 指定控件的內邊距，也就是說控件當中的內容
  android:sigleLine - 如果設置為真的話，則將控件的內容顯示在一行當中

 

下面繼續在Layout_01項目修改main.xml來使用這些屬性

項目運行效果：

 

修改main.xml代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <!--
    	android:id - 為控件指定相應的ID
    	android:text - 指定控件當中顯示的文字，需要注意的是，這里盡量使用string.xml
    	android:gravity - 指定控件的基本位置，比如說居中，居右等位置
    	android:textSize - 指定控件當中字體的大小
    	android:background - 指定控件所用的背景色，RGB命名法
    	android:width - 指定控件的寬度
    	android:height - 指定控件的高度
    	android:padding - 指定控件的內邊距，也就是說控件當中的內容
    	android:sigleLine - 如果設置為真的話，則將控件的內容顯示在一行當中
    	-->

 	<TextView
 	    android:id="@+id/firstText"
 	    android:text="第一行"
 	    android:gravity="center_vertical"
 	    android:textSize="15pt"
		android:background="#aa0000"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:paddingLeft="10dip"
		android:paddingTop="20dip"
		android:paddingRight="30dip"
		android:paddingBottom="40dip"
		android:layout_weight="2"
		android:singleLine="true"
		/>
 	<TextView 
 	    android:id="@+id/secondText"
 	    android:text="第二行"
 	    android:gravity="center_vertical"
 	    android:textSize="15pt"
 	    android:background="#0000aa"
 	    android:layout_width="fill_parent"
 	    android:layout_height="wrap_content"
 	    android:layout_weight="1"
 	    />
		
</LinearLayout>

 

 

再解釋其中一些屬性的作用：

=>>layout_weight,默認為零，其屬性表示當前當前還有多大視圖就占據多大視圖；如果其值高于零，則表示將父視圖中的可用的空間進行分割，分割的大小視當前屏幕整體布局的Layout_weight值與每個組件Layout_weight值占用比例來定。

=>>grivity:每個組件默認其值為左上角對齊，其屬性可以調整組件對齊方式比如向左、向右或者居中對齊等。

=>>padding:邊距的填充，也稱內邊距。其邊距屬性有：

   android:paddingTop,設置上邊距

   android:paddingBottom,設置下邊距

   android:paddingLeft,設置左邊距

   android:paddingRight,設置右邊距

   android:padding則表示周圍四方向各內邊距統一調整。

邊距屬性值為具體數字

=>>layout_margin,外邊距，其上下左右屬性為：

  android:layout_marginTop,設置上邊距

  android:layout_marginBottom,設置下邊距

  android:layout_marginLeft,設置左邊距

  android:layout_marginRight,設置右邊距

  android:layout_margin則表示設置四方向邊距統一調整

 

這里說明一下padding與layout_margin的區別：

padding內邊距指的是當前布局與包含的組件之間的邊距

layout_margin外邊距指的是與其他組件之間的邊距。

 

呼呼，挺多內容的，接下來是RelativeLayout(相對布局)

RelativeLayout(相對布局)是除線性布局之外最常用的，它相對于線性布局來說比較靈活，在進行組件布局的時候用線性布局往往需要進行布局嵌套，而相對布局就不會那么麻煩，每個組件都可以指定與其它組件或父組件的位置，只是必須通過ID來進行指定。

創建項目：Layout_02(相對布局)

項目運行效果：

從項目運行結果可以看到:Button1在界面左上角，Button2在Button1下面，Button3在Button2下面并且對齊Button2右邊緣，Button4在Button3下面并且對齊父組件右邊緣對齊，Button5在Button4下面并且在水平方向的中央位置。

布局文件代碼：

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/btn1"
        />
    <Button 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/btn2"
        android:layout_below="@id/btn1"
        />
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"
        android:id="@+id/btn3"
        android:layout_below="@id/btn2"
        android:layout_alignRight="@id/btn2"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button4"
        android:id="@+id/btn4"
        android:layout_below="@id/btn3"
        android:layout_alignParentRight="true"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button5"
        android:id="@+id/btn5"
        android:layout_below="@id/btn4"
        android:layout_centerHorizontal="true"
        />
         
 </RelativeLayout>

 

知識補充：

 

 

 

表1-1 組件之間的位置關系

屬性名稱	作用
android:layout_above	將組件放在指定ID組件的上方
android:layout_below	將組件放在指定ID組件的下方
android:layout_toLeftOf	將組件放在指定ID組件的左方
android:layout_toRightOf	將組件放在指定ID組件的右方

 

 

 

 

 

 

表1-2 組件對齊方式

屬性名稱	作用
android:layout_alignBaseline	將該組件放在指定ID組件進行中心線對齊
android:layout_alignTop	將該組件放在指定ID組件進行頂部對齊
android:layout_alignBottom	將該組件放在指定ID組件進行底部對齊
android:layout_alignLeft	將該組件放在指定ID組件進行左邊緣對齊
android:layout_alignRight	將該組件放在指定ID組件進行右邊緣對齊

 

 

 

 

 

 

 

 

 

 

 

 

 

 

表1-3 當前組件與父組件的對齊方式

屬性名稱	作用
android:layout_alignParentTop	該組件與父組件進行頂部對齊
android:layout_alignParentBottom	該組件與父組件進行底部對齊
android:layout_alignParentLeft	該組件與父組件進行左邊緣對齊
android:layout_alignParentRight	該組件與父組件進行右邊緣對齊

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

表1-4 組件放置的位置

屬性名稱	作用
android:layout_centerHorizontal	將該組件放置在水平方向中央的位置
android:layout_centerVertical	將該組件放置在垂直方向的中央的位置
anroid:layout_centerInParent	將該組件放置在父組件的水平中央及垂直中央的位置

 

 

 

第3 part-TableLayout(表格布局)

TableLayout(表格布局),顧名思義就是像表格一樣布局，通常情況下，TableLayout有多個TableRow組成，每個TableRow就是一行，定義幾個TableRow就是定義幾行；

創建項目：Layout_03(表格布局)

項目運行效果:

修改布局文件：

main.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TableRow>
        <Button android:text="Button1"/>
        <Button android:text="Button2"/>
        <Button android:text="Button3"/>
    </TableRow>
    <TableRow>
        <Button android:text="Button4"/>
        <Button android:text="Button5"/>
        <Button android:text="Button6"/>
    </TableRow>
    <TableRow>
        <Button android:text="Button7"/>
        <Button android:text="Button8"/>
        <Button android:text="Button9"/>
    </TableRow>
</TableLayout>

 

TableLayout就那么簡單，TableLayout中也有幾個常用屬性：

（1）shrinkColumns屬性：以0為序，當TableRow里面的控件布滿布局時，，指定列自動延伸以填充可用部分；當TableRow里面的控件還沒有布滿布局時，shrinkColumns不起作用。

在布局文件中添加shrinkColumns屬性代碼：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:shrinkColumns="2">

指定第3列填充可用部分，運行項目效果如圖：

沒有發生變化，因為TableRow里面的控件還沒有布滿布局，現在再修改布局文件如下：

 

現在可以看到，shinkColumns屬性起作用了。

  

  <TableRow>
        <Button android:text="Button1"/>
        <Button android:text="Button2"/>
        <Button android:text="Button3333333333333333333333333"/>
    </TableRow>

 

（2）strechColumns屬性，以第0行為序，指定列對空白部分進行填充。

在布局中添加strechColumns屬性代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="2">

 

android:strechColumns:指定第3列填充空白部分

 

（3）collapseColumns屬性：以0行為序，隱藏指定的列

在布局中添加collapseColumns屬性代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:collapseColumns="2">

 

運行效果如圖：

android:collapseColumns="2":指定第3列隱藏

 

(4)layout_column屬性：以0行為序，設置組件顯示指定列

(5)layout_span屬性：以第0行為序，設置組件顯示占用的列數。

修改布局代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TableRow>
        <Button android:text="Button1"
            android:layout_span="3"/>
        <Button android:text="Button2"/>
        <Button android:text="Button3"/>
    </TableRow>
    <TableRow>
        <Button android:text="Button4"
            android:layout_column="2"/>
        <Button android:text="Button5"
            android:layout_column="0"/>
        <Button android:text="Button6"/>
    </TableRow>
    <TableRow>
        <Button android:text="Button7"/>
        <Button android:text="Button8"/>
        <Button android:text="Button9"/>
    </TableRow>
</TableLayout>

 

運行效果：

從效果圖可知：Button1被設置了占用了3列，Button4被設置顯示在地3列，但代碼指定Button5顯示在第一列，但沒有按照設定顯示，這樣可知TableRow在表格布局中，一行里的組件都會自動放在前一組件的右側，依次排列，只要確定了所在列，其后面的組件就無法在進行設置位置。

 

第4 part AbsoluteLayout(絕對布局)

AbsoluteLayout(絕對布局)布局用法如其名，組件的位置可以準確的指定其在屏幕的x/y坐標位置。雖然可以精確的去規定坐標，但是由于代碼的書寫過于剛硬，使得在不同的設備，不同分辨率的手機移動設備上不能很好的顯示應有的效果，所以此布局不怎么被推薦使用。

創建項目：Layout_04(絕對布局)

修改布局文件代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="Button1"
        android:layout_x="100dp"
        />
    <Button 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:layout_y="100dp"
        />
    
    </AbsoluteLayout>

 

項目運行效果：

運行效果說明：Button1的x坐標設定為了100像素，Button2的y坐標設定為了100像素。

 

第5 part FrameLayout(單幀布局)

FrameLayout(單幀布局),據說是五種布局中最簡單的一種，因為單幀布局在新定義組件的時候都會將組件放置屏幕的左上角，即使在此布局中定義多個組件，后一個組件總會將前一個組件所覆蓋，除非最后一個組件是透明的。

創建項目：Layout_05

修改布局文件代碼如下：

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <Button 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="Button2"
        />
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"
        />
    
</FrameLayout>

項目運行效果：

效果圖說明：可以看到3個按鈕組件都有重疊的部分，單幀布局不會像線性布局那樣每個組件之間自動對齊且組件之間都有間隙