Android UI 使用Merge,include和 ViewStub--優化(1)


原文出處:http://blog.csdn.net/hmg25/article/details/6203130

FrameLayout 先來看官方文檔的定義:FrameLayout是最簡單的一個布局對象。它被定制為你屏幕上的一個空白備用區域,之后你可以在其中填充一個單一對象 — 比如,一張你要發布的圖片。所有的子元素將會固定在屏幕的左上角;你不能為FrameLayout中的一個子元素指定一個位置。后一個子元素將會直接在前一個子元素之上進行覆蓋填充,把它們部份或全部擋住(除非后一個子元素是透明的)。 
我的理解是,把FrameLayout當作畫布canvas,固定從屏幕的左上角開始填充圖片,文字等。看看示例,原來可以利用 android:layout_gravity來設置位置的:

FrameLayout的布局結構
 1 01    <?xml
 2 02    version="1.0"
 3 03    encoding="utf-8"?>
 4 04     
 5 05    <FrameLayout
 6 06    xmlns:android="http://schemas.android.com/apk/res/android"
 7 07    android:layout_width="fill_parent"
 8 08    android:layout_height="fill_parent"
 9 09    >
10 10     
11 11    <ImageView
12 12    android:id="@+id/image"
13 13    android:layout_width="fill_parent"
14 14    android:layout_height="fill_parent"
15 15    android:scaleType="center"
16 16    android:src="@drawable/candle"
17 17    />
18 18    <TextView
19 19    android:id="@+id/text1"
20 20    android:layout_width="wrap_content"
21 21    android:layout_height="wrap_content"
22 22    android:layout_gravity="center"
23 23    android:textColor="#00ff00"
24 24    android:text="@string/hello"
25 25    />
26 26    <Button
27 27    android:id="@+id/start"
28 28    android:layout_width="wrap_content"
29 29    android:layout_height="wrap_content"
30 30    android:layout_gravity="bottom" android:text="Start"
31 31    />
32 32    </FrameLayout>

 


   

 

效果圖

  


布局優化 使用tools里面的hierarchyviewer.bat來查看layout的層次。在啟動模擬器啟動所要分析的程序,再啟動hierarchyviewer.bat,選擇模擬器以及該程序,點擊“Load View Hierarchy”,就會開始分析。可以save as png。 

<merge> 減少視圖層級結構
從上圖可以看到存在兩個FrameLayout,紅色框住的。如果能在layout文件中把FrameLayout聲明去掉就可以進一步優化布局代碼了。 但是由於布局代碼需要外層容器容納,如果
直接刪除FrameLayout則該文件就不是合法的布局文件。這種情況下就可以使用<merge> 標簽了。
修改為如下代碼就可以消除多余的FrameLayout了:

使用merge優化的布局
 1 01    <?xml
 2 02    version="1.0"
 3 03    encoding="utf-8"?>
 4 04     
 5 05    <merge xmlns:android="http://schemas.android.com/apk/res/android">
 6 06    <ImageView
 7 07    android:id="@+id/image"
 8 08    android:layout_width="fill_parent"
 9 09    android:layout_height="fill_parent"
10 10    android:scaleType="center"
11 11    android:src="@drawable/candle"
12 12    />
13 13    <TextView
14 14    android:id="@+id/text1"
15 15    android:layout_width="wrap_content"
16 16    android:layout_height="wrap_content"
17 17    android:layout_gravity="center"
18 18    android:textColor="#00ff00"
19 19    android:text="@string/hello"
20 20    />
21 21    <Button
22 22    android:id="@+id/start"
23 23    android:layout_width="wrap_content"
24 24    android:layout_height="wrap_content"
25 25    android:layout_gravity="bottom"
26 26    android:text="Start"
27 27    />
28 28    </merge>

 


   

 

<merge>也有一些使用限制: 只能用於xml layout文件的根元素;在代碼中使用LayoutInflater.Inflater()一個以merge為根元素的
布局文件時候,需要使用View inflate (int resource, ViewGroup root, boolean attachToRoot)指定一個ViewGroup 作為其容器,並且要設置attachToRoot 為true。

<include> 重用layout代碼
如果在某個布局里面需要用到另一個相同的布局設計,可以通過<include> 標簽來重用layout代碼:

使用include優化的布局文件
 1 01    <?xml
 2 02    version="1.0"
 3 03    encoding="utf-8"?>
 4 04     
 5 05    <LinearLayout
 6 06    xmlns:android="http://schemas.android.com/apk/res/android"
 7 07    android:orientation="vertical"
 8 08    android:layout_width="fill_parent"
 9 09    android:layout_height="fill_parent">
10 10     
11 11    <include
12 12    android:id="@+id/layout1"
13 13    layout="@layout/relative"
14 14    />
15 15    <include
16 16    android:id="@+id/layout2"
17 17    layout="@layout/relative"
18 18    />
19 19    <include
20 20    android:id="@+id/layout3"
21 21    layout="@layout/relative"
22 22    />
23 23     
24 24    </LinearLayout>
25  

 


效果圖


這里要注意的是,"@layout/relative"不是引用Layout的id,而是引用res/layout/relative.xml,其內容是前面文章介紹RelativeLayout的布局代碼。
另外,通過<include>,除了可以覆寫id屬性值,還可以修改其他屬性值,例如android:layout_width,android:height等。

<viewstub> 延遲加載
(轉自http://rainhomepage.appspot.com/2010/01/use-viewstub-to-optimize-the-layout-of)

ViewStub 是一個不可見的,大小為0的View,最佳用途就是實現View的延遲加載,在需要的時候再加載View,可Java中常見的性能優化方法延遲加載一樣。

當調用ViewStub的setVisibility函數設置為可見或則調用 inflate初始化該View的時候,ViewStub引用的資源開始初始化,然后引用的資源替代ViewStub自己的位置填充在ViewStub的 位置。因此在沒有調用setVisibility(int) 或則 inflate()函數之前 ViewStub一種存在組件樹層級結構中,但是由於ViewStub非常輕量級,這對性能影響非常小。 可以通過ViewStub的inflatedId屬

ViewStub優化布局
1 1    <ViewStub
2 2    android:id="@+id/stub"
3 3     
4 4    android:inflatedId="@+id/subTree"
5 5    android:layout="@layout/mySubTree"
6 6    android:layout_width="120dip"
7 7    android:layout_height="40dip"
8 8    />

 

性來重新定義引用的layout id。 例如:

 
   

 

上面定義的ViewStub ,可以通過id “stub”來找到,在初始化資源“mySubTree”后,stub從父組件中刪除,然后"mySubTree"替代stub的位置。初始資源"mySubTree"得到的組件可以通過inflatedId 指定的id "subTree"引用。 然后初始化后的資源被填充到一個120dip寬、40dip高的地方。 

推薦使用下面的方式來初始化ViewStub:

viewstub的使用
1    ViewStub stub = (ViewStub) findViewById(R.id.stub);
2    View inflated = stub.inflate();

 


   

 

當調用inflate()函數的時候,ViewStub 被引用的資源替代,並且返回引用的view。 這樣程序可以直接得到引用的view而不用再次調用函數 findViewById()來查找了。

ViewStub目前有個缺陷就是還不支持 <merge /> 標簽。

layoutopt (Layout Optimization工具)
這工具可以分析所提供的Layout,並提供優化意見。在tools文件夾里面可以找到layoutopt.bat。
用法
layoutopt <list of xml files or directories>
參數
一個或多個的Layout xml文件,以空格間隔;或者多個Layout xml文件所在的文件夾路徑
例子
layoutopt G:/StudyAndroid/UIDemo/res/layout/main.xml
layoutopt G:/StudyAndroid/UIDemo/res/layout/main.xml G:/StudyAndroid/UIDemo/res/layout/relative.xml
layoutopt G:/StudyAndroid/UIDemo/res/layout


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM