詳細介紹安卓布局性能優(yōu)化之（include 、merge、ViewStub）

我們在日常開發(fā)中,我們可能會遇到有很多相似的布局,如果每一個XML文件都寫一次,不說麻煩,代碼也顯得冗余,而且可讀性也很差.這時候就需要include 了,本編文章將會介紹include、merge和ViewStub標簽的用法供大家學習和參考。

include標簽

include標簽常用于將布局中的公共部分提取出來供其他layout共用，以實現(xiàn)布局模塊化,也是平常我們設計布局時用的最多的

include 官方文檔

<?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="wrap_content"
           android:gravity="center_horizontal"
           android:orientation="vertical"> 
<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/textview"
        android:textSize="24sp"/> <EditText
        android:id="@+id/editText"
        android:hint="@string/divide"
        android:layout_width="300dp"
        android:layout_height="wrap_content"/> </LinearLayout> 


<?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="wrap_content"
                android:gravity="center_horizontal"
    > <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="TextView_Relative"
        android:textSize="24sp"/> <EditText
        android:id="@+id/editText"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:hint="@string/divide"/> </RelativeLayout>

<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tb_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#00f"
    app:theme="@style/AppTheme"
    app:title="這是一個ToolBar"
    app:titleTextColor="@android:color/white"/>

1.2、Activity的XML布局文件調(diào)用include標簽:

<?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">
 <!--測試layout和<include>都設置ID的情況-->
<include
        android:id="@+id/tb_toolbar"
        layout="@layout/include_toolbar"/> 
<!--如果只有單個include 這樣寫就可以,加載的布局的子View,直接findViewByID就能找到--> 
   <include layout="@layout/include_text"/> 
   <!--如果有多個include,需要添加ID屬性--> <include
        android:id="@+id/include_text1"
        layout="@layout/include_text"/> 
<!--這個layout用RelativeLayout 實現(xiàn)-->
 <!--如果要使用layout_margin這樣的屬性,要同時加上layout_w/h屬性,不然沒反應--> <include
        android:id="@+id/include_text2"
        layout="@layout/include_text_relative"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"/>
         </LinearLayout>

1.3、Activity中調(diào)用include標簽layout中的子View:

 private void initView() { 
 //如果include布局根容器和include標簽中的id設置的是不同的值，這里獲取的mToolbar值將為null 
 Toolbar mToolbar = (Toolbar) findViewById(R.id.tb_toolbar); setSupportActionBar(mToolbar); 
 //普通include標簽用法,直接拿子View屬性實現(xiàn)
  TextView textView = (TextView) findViewById(R.id.textView); textView.setText("不加ID實現(xiàn)的include標簽"); 
  //多個include標簽用法,添加ID,findViewByID找到layout,再找子控件 
  View view_include = findViewById(R.id.include_text1); TextView view_include_textView = (TextView) view_include.findViewById(R.id.textView); view_include_textView.setText("加了ID實現(xiàn)的include標簽"); 
  //多個include標簽用法,添加ID,findViewByID找到layout,再找子控件
   View view_include_Relative = findViewById(R.id.include_text2); TextView view_textView_relative = (TextView) view_include_Relative.findViewById(R.id.textView); view_textView_relative.setText("加了ID實現(xiàn)的include標簽(RelaviteLayout)"); }

==include使用注意==

  • 一個xml布局文件有多個include標簽需要設置ID,才能找到相應子View的控件,否則只能找到第一個include的layout布局,以及該布局的控件
  • include標簽如果使用layout_xx屬性,會覆蓋被include的xml文件根節(jié)點對應的layout_xx屬性,建議在include標簽調(diào)用的布局設置好寬高位置,防止不必要的bug
  • include 添加id,會覆蓋被include的xml文件根節(jié)點ID,這里建議include和被include覆蓋的xml文件根節(jié)點設置同名的ID,不然有可能會報空指針異常
  • 如果要在include標簽下使用RelativeLayout,如layout_margin等其他屬性,記得要同時設置layout_width和layout_height,不然其它屬性會沒反應

merge 標簽

merge標簽主要用于輔助include標簽,在使用include后可能導致布局嵌套過多,多余的layout節(jié)點或?qū)е陆馕鲎兟?可通過hierarchy viewer工具查看布局的嵌套情況)

官方文檔說明:merge用于消除視圖層次結(jié)構(gòu)中的冗余視圖,例如根布局是Linearlayout,那么我們又include一個LinerLayout布局就沒意義了,反而會減慢UI加載速度

merge 官方文檔

  • merge標簽常用場景:

    1.根布局是FrameLayout且不需要設置background或padding等屬性,可以用merge代替,因為Activity的ContentView父元素就是FrameLayout,所以可以用merge消除只剩一個。
    2.某布局作為子布局被其他布局include時,使用merge當作該布局的頂節(jié)點,這樣在被引入時頂結(jié)點會自動被忽略,而將其子節(jié)點全部合并到主布局中。
    3.自定義View如果繼承LinearLayout(ViewGroup),建議讓自定義View的布局文件根布局設置成merge,這樣能少一層結(jié)點。

merge標簽使用:

在XML布局文件的根布局如RelativeLayout直接改成merge即可

merge使用注意

1.因為merge標簽并不是View,所以在通過LayoutInflate.inflate()方法渲染的時候,第二個參數(shù)必須指定一個父容器,且第三個參數(shù)必須為true,也就是必須為merge下的視圖指定一個父親節(jié)點.
2.因為merge不是View,所以對merge標簽設置的所有屬性都是無效的.
3.注意如果include的layout用了merge,調(diào)用include的根布局也使用了merge標簽,那么就失去布局的屬性了
4.merge標簽必須使用在根布局
5.ViewStub標簽中的layout布局不能使用merge標簽

ViewStub 標簽

我們在做安卓項目的時候，經(jīng)常會有一個使用場景：需要在運行時根據(jù)數(shù)據(jù)動態(tài)決定顯示或隱藏某個View和布局。
上述場景，我們通常的解決方案就是：就是把可能用到的View先寫在布局里，再初始化其可見性都設為View.GONE，然后在代碼中根據(jù)數(shù)據(jù)動態(tài)的更改它的可見性。
雖然這樣的實現(xiàn)，邏輯簡單而且控制起來比較靈活；但是也存在一定的缺點耗費資源。
ViewStub 標簽最大的優(yōu)點是當你需要時才會加載,使用它并不會影響UI初始化時的性能.各種不常用的布局像進度條、顯示錯誤消息等可以使用ViewStub標簽,以減少內(nèi)存使用量,加快渲染速度.ViewStub是一個不可見的,實際上是把寬高設置為0的View.效果有點類似普通的view.setVisible(),但性能體驗提高不少
第一次初始化時,初始化的是ViewStub View,當我們調(diào)用inflate()或setVisibility()后會被remove掉,然后在將其中的layout加到當前view hierarchy中。

先來看看布局，一個是主布局，里面只定義二個ViewStub，一個用來控制TextView一個用來控制ImageView，另外就是一個是為顯示文字的做的TextView布局，一個是為ImageView而做的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:gravity="center_horizontal">
  <ViewStub 
    android:id="@+id/viewstub_demo_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dip"
    android:layout_marginRight="5dip"
    android:layout_marginTop="10dip"
    android:layout="@layout/viewstub_demo_text_layout"/>
  <ViewStub 
    android:id="@+id/viewstub_demo_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dip"
    android:layout_marginRight="5dip"
    android:layout="@layout/viewstub_demo_image_layout"/>
</LinearLayout>

為TextView的布局：

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
        <TextView
            android:id="@+id/viewstub_demo_textview"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#aa664411"
            android:textSize="16sp"/>
    </LinearLayout>

為ImageView的布局：

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/viewstub_demo_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

下面來看代碼，決定來顯示哪一個，只需要找到相應的ViewStub然后調(diào)用其infalte()就可以獲得相應想要的布局：

    public class ViewStubDemoActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.viewstub_demo_activity);
            if ((((int) (Math.random() * 100)) & 0x01) == 0) {
                // to show text
                // all you have to do is inflate the ViewStub for textview
                ViewStub stub = (ViewStub) findViewById(R.id.viewstub_demo_text);
                stub.inflate();
                TextView text = (TextView) findViewById(R.id.viewstub_demo_textview);
                text.setText("The tree of liberty must be refreshed from time to time" +
                        " with the blood of patroits and tyrants! Freedom is nothing but " +
                        "a chance to be better!");
            } else {
                // to show image
                // all you have to do is inflate the ViewStub for imageview
                ViewStub stub = (ViewStub) findViewById(R.id.viewstub_demo_image);
                stub.inflate();
                ImageView image = (ImageView) findViewById(R.id.viewstub_demo_imageview);
                image.setImageResource(R.drawable.happy_running_dog);
            }
        }
    }

ViewStub標簽使用注意

  1. ViewStub標簽不支持merge標簽
  2. ViewStub的inflate只能被調(diào)用一次,第二次調(diào)用會拋出異常,setVisibility可以被調(diào)用多次,但不建議這么做(ViewStub 調(diào)用過后,可能被GC掉,再調(diào)用setVisibility()會報異常)
  3. 為ViewStub賦值的android:layout_XX屬性會替換待加載布局文件的根節(jié)點對應的屬性

擴展:

Space組件

在ConstraintLayout出來前,我們寫布局都會使用到大量的margin或padding,但是這種方式可讀性會很差,加一個布局嵌套又會損耗性能

鑒于這種情況,我們可以使用space,使用方式和View一樣,不過主要用來占位置,不會有任何顯示效果

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容