第二章 第二節：Android界面佈局

Android用戶界面佈局簡介

佈局定義了一個用戶界面（UI）中的視覺結構

類似於div嵌套

• Android界面佈局：控制子視圖對象（View對象或 ViewGroup對象）在界面中的顯示方式（即如何顯示這 些View控件或ViewGroup）。
• Android中內置的常用佈局方式有

1. – LinearLayout：線性佈局
2. – RelativeLayout：相對佈局
3. – TableLayout：表格佈局
4. – GridLayout：網格佈局
5. – FrameLayout：幀佈局

---

1. Android中線性佈局的使用

線性佈局（LinearLayout）是一種 重要的界面佈局中，所有的子元素都按 照垂直或水平的順序在界面上排列 ，不會跨行

Android中佈局創建的方式有兩種：
–通過XML文件
–通過Java代碼

使用XML文件創建用戶界面佈局的基本流程

1. 建立XML文件（res / layout / ***.xml文件）
2. 在XML文件中設置界面佈局 • 選擇根元素（一般爲佈局方式） • 添加View控件或ViewGroup控件（嵌套添加）
3. 在Activity中設置佈局文件（setContentView方法

fill_parent已棄用
layout_weight是比重的意思，共佔母體的比例

使用Java代碼方式實現

不推薦，僅此一次
 基本格式： 
 –先創建佈局元素的對象（LinearLayout） 
 –設置佈局屬性 
 –爲佈局元素添加子元素（View控件或其它佈局元素） 
 –使用setContentView( )方法加載佈局對象




public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);//引用外界佈局文件

        //用Java純代碼方式實現LinearLayout
        1.  創建佈局
        LinearLayout ll=new LinearLayout(this);
        
        2.  設置佈局屬性
        ll.setOrientation(LinearLayout.HORIZONTAL);
        
		3.  創建視圖控件
        Button btn=new Button(this);
        btn.setText("按鈕哦");

        控件對象加入到佈局當中
        ll.addView(btn);

        //視圖對象顯示到界面， 在Activity的onCreate( )回調函數中
        setContentView(ll);
    }
}

---

---

• Android中通過XML文件創建佈局：
    – 優點：界面與邏輯控制代碼相分離，同一個佈局文件可適用於 多個Activity 
    – 缺點：在程序運行前確定界面的佈局形式，運行中不易更改 

• Android中通過Java代碼創建佈局：  
    – 優點：在程序運行過程中確定界面的佈局形式，界面可伴隨程 序運行過程中修改 
    – 缺點：界面與邏輯控制代碼在一起，同一個佈局文件僅能用於 當前Activity

---

2. Android中相對佈局的使用

相對佈局（RelativeLayout）是一種 非常靈活的佈局方式，能夠通過指定 界面元素與其它元素的相對位置關係， 確定界面中所有元素的佈局位置 –

特點：能夠最大程度保證在各種屏幕 類型的手機上正確顯示界面佈局

XML文件中佈局元素的常用屬性

<?xml version="1.0" encoding="utf-8"?>
下面這行是創建佈局文件時自己改的，自動添加
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

	插入圖片，可以放在res--drawable
    <ImageView
        android:id="@+id/img1"                    加ID確定相對座標
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"      相對於父母居中
        android:background="@drawable/charger"    用背景圖片方式插入圖片
        />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/house"
            android:layout_above="@+id/img1"       相對於參照物   上
            android:layout_alignLeft="@+id/img1"   相對於參照物   左對齊
            />


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/house"
            android:layout_toLeftOf="@+id/img1"     相對於參照物   左
            android:layout_centerVertical="true"    相互對父母容器規定的排列方式   居中
            />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/house"
            android:layout_below="@+id/img1"          相對    下
            android:layout_alignRight="@+id/img1"/>   相對    左對齊

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/house"·     
            android:layout_toRightOf="@+id/img1"      相對    右
            android:layout_alignBottom="@+id/img1"/>  相對    下


	    <Button
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_alignParentBottom="true"       相對父母  最下面
	        android:layout_alignParentRight="true"        相對父母  最右面
	        android:text="想睡覺"/>

</RelativeLayout>

---

---

---

3. Android中表格佈局的使用

表格佈局（TableLayout）也是一種常用的界面佈局，
繼承了LinearLayout，採用行和列的形式來管理UI組件

• 表格的邊界對用戶是不可見的

• 表格佈局還支持嵌套，可以將另一個表格佈局放置在前一個 表格佈局的單元格中，也可以在表格佈局中添加其他界面布 局，例如線性佈局、相對佈局等等

TableLayout元素的XML屬性 （屬性值全爲數字，圖片錯了）

屬性值全爲數字，圖片錯了

//TableRow不會自動換行
    <TableRow>   必須結合這個使用
        <Button android:text="1"/>
        <Button android:text="2"/>
        <Button android:text="3"/>
        <Button android:text="4"/>
    </TableRow>

    <TableRow>
        <Button android:text="5"/>
        <Button android:text="6"/>
        <Button android:text="7"
            android:layout_column="3"/>     設置在的位置，從0開始定位
    </TableRow>


    <TableRow>
        <Button android:text="5"
            android:layout_span="2"/>
        <Button android:text="7"
            android:layout_column="2"
            android:layout_span="2"/>       設置橫向的跨度
    </TableRow>

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="2,1"   自動伸展列
    android:shrinkColumns="0"      自動收縮列
    android:collapseColumns="1"    隱藏那些列
    >
    
    

//TableRow不會自動換行
    <TableRow>
        <Button android:text="1"/>
        <Button android:text="2"/>
        <Button android:text="3"/>
        <Button android:text="4"/>
        <Button android:text="4"/>
    </TableRow>
    <TableRow>
        <Button android:text="5"/>
        <Button android:text="6"/>
        <Button android:text="7"
            android:layout_column="3"/>
    </TableRow>

</TableLayout>

---

---

4. Android中網格佈局的使用

網格佈局（GridLayout）是Android4.0新增的佈局管理器
上來就指定一個整體大小

它把整個容器劃分成rows*columns個網格

每個網格可以放置一個組件

也可以設置一個組件橫跨多少列、或者設置一個組件縱跨多少行

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"      內容自適應
    android:layout_height="wrap_content"     內容自適應
    android:columnCount="4"            規定一共幾列，必須寫
    android:rowCount="3">              規定應該幾行，可以多可以少，可以不寫

    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="4"/>
    <Button android:text="5"
        android:textSize="30sp"/>      調整字體大小
    <Button android:text="7"
        android:layout_gravity="fill"   填充內容
        android:layout_columnSpan="3"   控制幾列
        android:layout_rowSpan="2"/>    控制幾行
    <Button android:text="8"/>
    <Button android:text="9"/>
    <Button android:text="10"/>
    <Button android:text="11"/>
    <Button android:text="12"/>
    <Button android:text="13"
        android:layout_gravity="fill"    填滿一行
        android:layout_columnSpan="4"   />


</GridLayout>

---

---

5. Android中幀佈局的使幀佈局

幀佈局（FrameLayout）又稱爲框架佈局，是最簡單的界面布 局，所有放在佈局內的控件，都按照層次堆疊在屏幕左上角。

如果有多個控件，後放置的子元素將遮擋先放置的控件，即默 認情況下FrameLayout裏的控件是左上角對齊。 –

FrameLayout 就像畫布，固定從屏幕的左上角開始填充圖片， 文字等。

    //View類型是所有類型的基類類型
    <View
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@android:color/background_dark"   背景色
        android:foreground="@drawable/charger"                設置前景土圖片，這是分層顯示的關鍵
        android:foregroundGravity="right"/>                   前景圖片的位置，相對父容器來說的
        使用時注意原始圖片大小。
        //foreground前景圖片,使得元素不被遮擋，永遠在最上方
        //android:background="@android:color/background_dark"


    <View
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@android:color/holo_blue_bright"/>
</FrameLayout>

---

---

補充

• minSdkVersion：當前APK所能安裝的最低手機API Level •

• compileSdkVersion：編譯當前APK的sdk版本，默認使 用當前有API Level中最高的

• targetSdkVersion：此APK兼容的最新的手機API Level， 同compileSdkVersion

• 屏幕尺寸： 3.2寸、4寸-4.8寸、5寸、7寸、10寸 •

• 屏幕的分辨率： • 480x800, 480x854, 540x960, 720x1280, 800x1280

• 屏幕密度：點數/inch

• density值表示每個英寸有多個顯示點 •

• 分辨率：屏幕長寬的顯示點數 –

  • QVGA屏density=120 –
  • WQVGA屏density=120 –
  • HVGA屏density=160 –
  • WVGA屏density=240

• px(pixels)-像素：不同的設備顯示效果相同。 •

• dip(device independent pixels)-設備獨立像素：這個和 設備的硬件有關，一般我們爲了支持WCGA、HVGA和 QVGA推薦使用這個，不依賴像素，等同於dp。 •

• pt(points)-磅：1pt=1/72英寸 •

• in(inches)-英寸 •

• mm(millimeters)-毫米 •

• sp(scaled pixels)-放大像素：主要用於字體顯示

• 字體大小一般使用sp，此單位的字體能夠根據用戶的設 置而自動縮放 •

• 空間等相對距離一般使用dp，隨密度變化而變化 •

• px與實際像素有關，與密度有關，不建議使用