1. 程式人生 > Android入門教學 >Android 幀佈局 FrameLayout

Android 幀佈局 FrameLayout

1. FrameLayout 的特性

FrameLayout 是最簡單且最高效的佈局形式,不過 FrameLayout 的使用頻率相比其他的 Layout 來講要更少很多,主要是因為很多時候它只是作為一個容器來顯示單個 View 或者多個 View 重疊的場景。

用過 Photoshop 的朋友對“圖層”的概念應該比較熟悉,我們可以插入很多個圖層,後新增的圖層會擋住先新增的圖層,然後針對每個圖層我們可以任意的設定它在整個圖片中的位置。同樣的,我們可以設定 FrameLayout 內部 View 所處的位置,與 RelativeLayout 相似,可以設定放置在上下左右,同樣也可以設定邊距。如果放置了多個 View,那麼他們會按照放置的順序依次疊加,後加入 View 的會擋住前面加入的 View。

2. FrameLayout 的常用設定

在第 1 小節我們提到過,FrameLayout 可以設定內部 View 所在的位置,那麼這幾個屬性和 RelativeLayout 一樣,這裡不再重複,主要介紹一下 FrameLayout 特有又常用的兩個屬性:android:foregroundandroid:foregroundGravity

2.1 前景影象

android:foreground: 設定 FrameLayout 的前景影象
前景影象會置於 FrameLayout 內部所有 View 的層級之上,直接設定圖片的資源 id 即可,如下:

android:foreground="@drawable/emercy"

2.2 前景位置

android:foregroundGravity: 設定 FrameLayout 前景圖片的擺放位置,設定方式與 RelativeLayout 中的 View 一樣,如:

android:foregroundGravity="bottom|right"

3. 通過 XML 完成一個 FrameLayout

我們的 FrameLayout 需要滿足以下要求:

  • 一個圖片,作為 FrameLayout 的前景;
  • 一個 Android Logo 圖片資源(ImageView);
  • 一個文字資源,和 Logo 重疊,可以看到後新增的 View 會擋住前面新增的 View;
  • 一個文字資源,和前景圖片重疊,可以看到前景圖片時鐘會在內部 View 之上顯示。

完成以上功能的佈局程式碼比較簡單:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/emercy"
    android:foregroundGravity="bottom|right"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:background="#4C374A"
        android:padding="10dp"
        android:text="Welcome to iMooc"
        android:textColor="#FFFFFF"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:background="#1E64D8"
        android:padding="10dp"
        android:text="Emercy Android"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />
</FrameLayout>

效果如下:

FrameLayout示例

這就是 FrameLayout 的基本用法。

4. FrameLayout 的適用場景

到這裡,基本上你已經掌握了 FrameLayout 的用法,可能你會有所疑惑,看起來 FrameLayout 也沒有什麼特別好的地方,似乎完全可以被 RelativeLayout 替代,所以很多人在開發過程中,往往會忘記還有這麼個 Layout。其實越是往後學你越會發現,FrameLayout 的簡單不僅僅體現在使用上,更大的優勢是在於其效能。當你的螢幕上控制元件不太多時,比如 Android 的桌面 Widget,或者 Home 應用,大多都是直接採用 FrameLayout 完成的佈局。

事實上,還有一處是 FrameLayout 用的最多的地方,也是一個非常隱蔽的地方。如果我們開啟 Hierarchy Viewer 或者類似的 View 分析工具,我們可以看到Android的每一個頁面都是在一個 FrameLayout 中完成的佈局,也就是無論你定義的佈局有多複雜,最終都會被放到一個 FrameLayout 當中顯示,這也體現了 FrameLayout 的強大,在今後的學習工作中,希望大家一定不要忽視了 FrameLayout,在此為大家埋下一個伏筆。

5. 小結

這裡需要再次強調:FrameLayout 是最簡單,最高效的佈局方式。它的佈局方式很容易理解,我們通過它可以將內部的 View 防止到任意的方位,如果內部有多個 View,那麼按照防止順序,後加入的View會擋住前面加入的 View。