2. 程式人生 > >佈局優化include與merge

佈局優化include與merge

阿新 • • 發佈：2019-01-31

Android 官方提供了三個用來優化佈局的標籤，分別是include、merge與ViewStub，其中ViewStub是動態載入檢視到記憶體，大家可以查閱：Android UI佈局優化之ViewStub

一、include佈局重用：

在Android的應用程式開發中，標題欄是必不可少的一個元素，大部分頁面都要用到，而且佈局都是一樣的，這時候使用include標籤就顯得極其的方便。使用時通常需要注意以下幾點。

  1. include標籤的layout_*屬性會替換掉被include檢視的根節點的對應屬性。
  2. include標籤的id屬性會替換掉被include檢視的根節點id

下面例子中，titlebar_layout.xml為標題欄佈局，而activity_main.xml為主介面佈局，activity_setting.xml為設定頁面佈局，這這兩個介面中都include了titlebar_layout.xml檢視。 titlebar_layout.xml: titlebar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/preference_activity_title_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="2dip"
    android:background="@drawable/zns_activity_title_bg"
 
>

    <TextView
        android:id="@+id/preference_activity_title_text"
        android:layout_width="match_parent"
        android:layout_height="45dip"
        android:gravity="center"
        android:text="123"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <ImageView

 
        android:id="@+id/preference_activity_title_image"
        android:layout_width="30dip"
        android:layout_height="25dip"
        android:layout_gravity="center_vertical"
        android:scaleType="fitCenter"
        android:layout_marginLeft="5dip"
        android:src="@drawable/common_menu_selector_white" />
</FrameLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

主介面：
主介面

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

    <include layout="@layout/titlebar_layout"></include>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="這是內容區域"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="#ffffff"/>
</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

當然，其他介面使用include同樣能包含該標題欄。

一、通過merge減少檢視節點：

merge翻譯成中文是合併的意思，在Android中通過使用merge能夠減少檢視的節點數，
從而減少檢視在繪製過程消耗的時間，達到提高UI效能的效果。使用merge時通常需要注意以下幾點：

  1. merge必須放在佈局檔案的根節點上。
  2. merge並不是一個ViewGroup，也不是一個View，它相當於聲明瞭一些檢視，等待被新增。
  3. merge標籤被新增到A容器下，那麼merge下的所有檢視將被新增到A容器下。
  4. 因為merge標籤並不是View，所以在通過LayoutInflate.inflate方法渲染的時候， 第二個引數必須指定一個父容器，且第三個引數必須為true，也就是必須為merge下的檢視指定一個父親節點。
  5. 如果Activity的佈局檔案根節點是FrameLayout，可以替換為merge標籤，這樣，執行setContentView之後，會減少一層FrameLayout節點。
  6. 自定義View如果繼承LinearLayout，建議讓自定義View的佈局檔案根節點設定成merge，這樣能少一層結點。
  7. 因為merge不是View，所以對merge標籤設定的所有屬性都是無效的。

其中第一點，我們看看LayoutInflate類的原始碼說明：

} else if (TAG_MERGE.equals(name)) {
    // 如果merge不是根節點，報錯
    throw new InflateException("<merge /> must be the root element");
}
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

其中第三點，常用在自定義View中遇到，附上系統LayoutInflate類，對於該現象的原始碼：

if (TAG_MERGE.equals(name)) {
    // 如果是merge標籤，指定的root為空，或則attachToRoot為false，則丟擲異常資訊
    if (root == null || !attachToRoot) {
        throw new InflateException("<merge /> can be used only with a valid "
                + "ViewGroup root and attachToRoot=true");
    }

    rInflate(parser, root, attrs, false, false);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

針對第五點，做一下對比：
佈局檔案1：

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="頂部Button" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="底部Button" />

</merge>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

效果1：
效果一

佈局檔案2：

<?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">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="頂部Button" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="底部Button" />

</FrameLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

效果2：
效果二

我們可以看到，如果使用merge，明顯少了一個FrameLayout節點，這也算一個檢視優化技巧。

下面對第六條（自定義View如果繼承LinearLayout，建議讓自定義View的佈局檔案根節點設定成merge，這樣能少一層結點）進行分析：
先看看效果，就是一個線性佈局，上下各一個TextView，看看使用merge和不使用merge的檢視節點，
以及使用merge的時候layoutInflate類的注意點。
效果圖：
效果圖
第一種情況（不使用merge）：
佈局檔案：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:background="#000000"
        android:gravity="center"
        android:text="第一個TextView"
        android:textColor="#ffffff" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:background="#ffffff"
        android:gravity="center"
        android:text="第一個TextView"
        android:textColor="#000000" />

</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

程式碼：

/**
 * 自定義的View，豎直方向的LinearLayout
 */
public class MergeLayout extends LinearLayout {

    public MergeLayout(Context context) {
        super(context);
        LayoutInflater.from(context).inflate(R.layout.merge_activity, this, true);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

檢視樹：
檢視樹一

我們發現，MergeLayout這個自定義控制元件的下面並不是直接跟著兩個TextView，
而是多了一個LinearLayout。

第二種情況（使用merge）：
注意因為為merge標籤的設定的屬性都不會生效，所以原來LinearLayout標籤上的屬性需要轉移到Java程式碼中設定。
佈局檔案：

<?xml version="1.0" encoding="utf-8"?>
<!-- 習慣性的標記一下，MergeLayout佈局 android:orientation="vertical" -->
<merge xmlns:android="http://schemas.android.com/apk/res/android" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:background="#000000"
        android:gravity="center"
        android:text="第一個TextView"
        android:textColor="#ffffff" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:background="#ffffff"
        android:gravity="center"
        android:text="第一個TextView"
        android:textColor="#000000" />

</merge>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

個人習慣在用merge的時候在旁邊標明使用到的屬性，以防忘記。

java程式碼中需要設定orientation屬性：

/**
 * 自定義的View，豎直方向的LinearLayout
 */
public class MergeLayout extends LinearLayout {

    public MergeLayout(Context context) {
        super(context);
        // 設定為數值方向的佈局
        setOrientation(VERTICAL);
        LayoutInflater.from(context).inflate(R.layout.merge_activity, this, true);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

再看看檢視樹：
檢視樹二
我們發現，LinearLayout節點被去掉了。但是最終顯示給使用者的介面卻是一樣的。

總結

1. 使用include標籤可以增加布局的複用性，提高效率。
2. 使用merge標籤可以減少檢視樹中的節點個數，加快檢視的繪製，提高UI效能。
3. merge標籤的使用，看上去一次只減少一個節點，但是當一個佈局巢狀很複雜的時候，
節點的個數可能達到幾百個，這個時候，如果每個地方都多一個節點，檢視的繪製時間相應的也就變長了很多。

相關推薦

佈局優化include與merge

Android 官方提供了三個用來優化佈局的標籤，分別是include、merge與ViewStub，其中ViewStub是動態載入檢視到記憶體，大家可以查閱：Android UI佈局優化之ViewStub 一、include佈局重用：在Android的應用程式開發中，標題

android開發佈局優化—include、merge、viewstub原始碼分析總結

儘管Android SDK為開發者提供了各種各樣的小部件來提供小型且可重用的互動元素，但開發者可能仍然需要重新使用特殊佈局的較大元件。這就是我們所謂的佈局複用。要有效地重新使用完整的佈局，可以使用和標籤在當前佈局中嵌入另一個佈局。 重複使用佈局非常有用，因為它

Android 佈局優化 include+merge+ViewStub標籤詳解

include 、merge、ViewStub標籤詳解 一.include標籤 include標籤常用於將佈局中的公共部分提取出來供其他layout使用，以實現佈局模組化。 程式碼 1.1.公共Layout <?xml versio

Android佈局優化——抽象佈局：include、merge 、ViewStub

<font color="#000"><font face="Arial">((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);  

Andorid 詳解-佈局優化，Android與Linux關係

這篇文章的由來——閒來無事隨便翻找了下Boss 招聘，發現一家公司，在騰訊創業大廈，距離住所很近。最主要的是招聘簡介裡所介紹的內容：團隊成員來自 北大，清華，北郵 BAT等知名網路公司。。。然後我膨脹的自信心，想嘗試下看看自己的水平，抽了一天調休，就過去了。結果 被完虐，各種完虐，第一個問題

Android佈局優化之merge標籤詳解

我們都知道View的繪製流程需要經歷measure、layout、draw這個三個過程，如果佈局巢狀層次比較深的話，每一步都需要進行遍歷所有子View進行對應的measure、layout、draw過程，由此就會降低繪製效率，巢狀越多，耗時就越多；其實不光光只會影響view的繪製效率，同

（二）佈局渲染流程與原理 —— 優化卡頓

一、CPU 和 GPU 1.區別 CPU 需要很強的通用性來處理邏輯計算、記憶體管理、顯示操作等，都使得CPU的內部結構異常複雜。因此，在沒有 GPU 的時代，CPU 的實際運算效能跟不上今天覆雜三維遊戲的要求，這時候 GPU 的設計出來了。GP

抽象佈局——include、merge 、ViewStub

   在佈局優化中，Androi的官方提到了這三種佈局<include />、<merge />、<ViewStub />，並介紹了這三種佈局各有的優勢，下面也是簡單說一下他們的優勢，以及怎麼使用，記下來權當做筆記。 1、佈局重用&l

Android 佈局優化（merge使用）

目的：減少佈局層數 效果：減少檢視樹中的節點個數，加快檢視的繪製，提高UI效能# 何時使用： 子檢視不需要指定任何針對父檢視的佈局屬性 假如需要在LinearLayout裡面嵌入一個佈局（或者檢視），而恰恰這個佈局（或者檢視）的根節點也是Linear

hbase優化操作與建議

global locks 讀寫 wke filesize 默認 apach 鏈接 連接 一、服務端調優 　　1、參數配置 　　　　1）、hbase.regionserver.handler.count：該設置決定了處理RPC的線程數量，默認值是10，通常可以調大，

數據庫優化思路與方向

每隔一秒 order 驗證 自動 上線 mysql group by hand 連接 一、基礎優化mysql> show status like 'valus'connections //鏈接參數uptime //上線時間slow_queries /

PHP中include()與require()的區別說明

靜態頁 檢查 服務器 code 中斷 完全 變量 方式 返回值 require 的使用方法如 require("MyRequireFile.php"); 。這個函數通常放在 PHP 程序的最前面，PHP 程序在執行前，就會先讀入 require 所指定引入的文件，使它變成

redmine在linux上的mysql性能優化方法與問題排查方案

mon 5.5 rdquo prot 針對 home erl 如何 數據信息 iredmine的linux服務器mysql性能優化方法與問題排查方案 問題定位： 客戶端工具： 1. 瀏覽器inspect-tool的network timing工具

OpenCV學習筆記（31）KAZE 演算法原理與原始碼分析（五）KAZE的原始碼優化及與SIFT的比較

  KAZE系列筆記： 1.  OpenCV學習筆記（27）KAZE 演算法原理與原始碼分析（一）非線性擴散濾波 2.  OpenCV學習筆記（28）KAZE 演算法原理與原始碼分析（二）非線性尺度空間構建 3.  Op

Django模板結構優化{% include %}和{% extend %}標籤

{% include %}標籤 在拉勾網中我們可以發現，他的每個網頁的頭部和尾部都是一樣的，那麼他是每個html檔案中都寫了這些程式碼嗎？ 答案肯定是否定的。這個時候就需要用到我們的{% include %}標籤了。 新建一個專案，然後在裡面新建一個template_include_

佈局之extendedLayout與sizeToFit

iOS 7以後在ViewController裡面引進了一系列屬性用於管理頁面佈局。 extendedLayout有幾個相似的引數： edgesForExtendedLayout automaticallyAdjustsScrollViewInsets extendedLayoutI

web---JSP中動態include與靜態include的區別？

1. 動態include <jsp:include page="目標jsp"> 它的原理是使用了 request.getRequestDispatcher(目標jsp).include(request,response) 來實現頁面包含，其本質是將 源jsp 和 目標

盒模型佈局相關-基礎與語法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000; background-color: #ffffff } span.s1 { } 佈局相關屬性 p.p

晚期(執行期)優化——Java與C/C++編譯器比較

文章目錄 單從編譯和執行上講為什麼說C/C++編譯器比Java編譯器快？ 因為Java中的即時編譯器是要佔用使用者程式的執行時間的。 Java是一門型別安全的語言，會進行很多的檢查行為。如陣列是否越界、檢查空指標等 雖然java中沒有vir

jsp 動態INCLUDE與靜態 INCLUDE

動態 INCLUDE 用 jsp:include 動作實現 <jsp:include page="included.jsp" flush="true" /> 它總是會檢查所含檔案中的變化 , 適合用於包含動態