Android UI 優化 使用和 標籤

weixin_33816946發表於2016-05-09

使用<include /> 標籤來重用layout程式碼

如果在一個專案中需要用到相同的佈局設計,可以通過<include /> 標籤來重用layout程式碼,該標籤在Android開發文件中沒有相關的介紹。在android主屏程式中 用到了這個標籤:

<com.android.launcher.Workspace  android:id="@+id/workspace"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  launcher:defaultScreen="1">  <include android:id="@+id/cell1" layout="@layout/workspace_screen" />  <include android:id="@+id/cell2" layout="@layout/workspace_screen" />  <include android:id="@+id/cell3" layout="@layout/workspace_screen" /></com.android.launcher.Workspace>

這樣可以多次引用一個佈局片段而不用重複的複製、貼上。通過include標籤也可以覆寫一些屬性的值,例如上面的示例就覆寫了引用的layout中的id值。下面是另外一個示例:

<include android:layout_width="fill_parent" layout="@layout/image_holder" /><include android:layout_width="256dip" layout="@layout/image_holder" />使用<merge /> 標籤來減少檢視層級結構在Android layout檔案中需要一個頂級容器來容納其他的元件,而不能直接放置多個元件,例如如下的程式碼:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <ImageView

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:scaleType="center"

        android:src="../../@drawable/golden_gate" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Golden Gate" />

</FrameLayout>


單獨將<merge />標籤做個介紹,是因為它在優化UI結構時起到很重要的作用。目的是通過刪減多餘或者額外的層級,從而優化整個Android Layout的結構。

將通過一個例子來了解這個標籤實際所產生的作用,這樣可以更直觀的瞭解<merge/>的用法。

建立一個簡單的Layout,其中包含兩個Views元素:ImageView和TextView 預設狀態下我們將這兩個元素放在FrameLayout中。其效果是在主檢視中全屏顯示一張圖片,之後將標題顯示在圖片上,並位於檢視的下方。以下是xml程式碼:

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

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"

        android:scaleType="center"
        android:src="../../@drawable/golden_gate" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dip"
        android:layout_gravity="center_horizontal|bottom"

        android:padding="12dip"

        android:background="#AA000000"
        android:textColor="#ffffffff"

        android:text="Golden Gate" />

</FrameLayout>

應用上邊的Layout執行的檢視為:

啟動 tools> hierarchyviewer.bat工具檢視當前UI結構檢視:

Android

 

我們可以很明顯的看到由紅色線框所包含的結構出現了兩個framelayout節點,很明顯這兩個完全意義相同的節點造成了資源浪費(這裡可以提醒大家在開發工程中可以習慣性的通過hierarchyViewer檢視當前UI資源的分配情況),那麼如何才能解決這種問題呢(就當前例子是如何去掉多餘的frameLayout節點)?這時候就要用到<merge />標籤來處理類似的問題了。我們將上邊xml程式碼中的framLayout替換成merge:

 

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"

        android:scaleType="center"
        android:src="../../@drawable/golden_gate" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dip"
        android:layout_gravity="center_horizontal|bottom"

        android:padding="12dip"

        android:background="#AA000000"
        android:textColor="#ffffffff"

        android:text="Golden Gate" />

</merge>

執行程式後在Emulator中顯示的效果是一樣的,可是通過hierarchyviewer檢視的UI結構是有變化的,當初多餘的 FrameLayout節點被合併在一起了,或者可以理解為將merge標籤中的子集直接加到Activity的FrameLayout跟節點下(這裡需要提醒大家注意:所有的Activity檢視的根節點都是frameLayout)。如果你所建立的Layout並不是用framLayout作為根節點(而是應用LinerLayout等定義root標籤),就不能應用上邊的例子通過merge來優化UI結構。

Android

除了上邊的例子外,meger還有另外一個用法

當應用Include或者ViewStub標籤從外部匯入xml結構時,可以將被匯入的xml用merge作為根節點表示,這樣當被嵌入父級結構中後可以很好的將它所包含的子集融合到父級結構中,而不會出現冗餘的節點。

另外有兩點需要特別注意:

<merge />只可以作為xml layout的根節點。 
當需要擴充的xml layout本身是由merge作為根節點的話,需要將被匯入的xml layout置於 viewGroup中,同時需要設定attachToRoot為True。

相關文章