Android UI學習 - FrameLayou和布局優化

FrameLayout

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

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" > 
 
    <ImageView 
        android:id="@+id/image" 
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent" 
        android:scaleType="center" 
        android:src="@drawable/candle" 
        /> 
    <TextView 
        android:id="@+id/text1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:textColor="#00ff00" 
        android:text="@string/hello" 
        /> 
    <Button 
        android:id="@+id/start" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="bottom" 
        android:text="Start" 
        /> 
</FrameLayout> 

效果圖

                 

布局優化

     使用tools裡面的hierarchyviewer.bat來查看layout的層次。在啟動模擬器啟動所要分析的程序，再啟動hierarchyviewer.bat，選擇模擬器以及該程序，點擊“Load View Hierarchy”，就會開始分析。可以save as png。      <merge> 減少視圖層級結構      從上圖可以看到存在兩個FrameLayout，紅色框住的。如果能在layout文件中把FrameLayout聲明去掉就可以進一步優化布局代碼了。 但是由於布局代碼需要外層容器容納，如果 直接刪除FrameLayout則該文件就不是合法的布局文件。這種情況下就可以使用<merge> 標簽了。 修改為如下代碼就可以消除多余的FrameLayout了：

<?xml version="1.0" encoding="utf-8"?> 
<merge  xmlns:android="http://schemas.android.com/apk/res/android"> 
    <ImageView 
        android:id="@+id/image" 
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent" 
        android:scaleType="center" 
        android:src="@drawable/candle" 
        /> 
    <TextView 
        android:id="@+id/text1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:textColor="#00ff00" 
        android:text="@string/hello" 
        /> 
    <Button 
        android:id="@+id/start" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="bottom" 
        android:text="Start" 
        /> 
</merge> 

<merge>也有一些使用限制： 只能用於xml layout文件的根元素；在代碼中使用LayoutInflater.Inflater()一個以merge為根元素的 布局文件時候，需要使用View inflate (int resource, ViewGroup root, boolean attachToRoot)指定一個ViewGroup 作為其容器，並且要設置attachToRoot 為true。   <include> 重用layout代碼      如果在某個布局裡面需要用到另一個相同的布局設計，可以通過<include> 標簽來重用layout代碼：

<?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"> 
         
    <include android:id="@+id/layout1" layout="@layout/relative" /> 
    <include android:id="@+id/layout2" layout="@layout/relative" /> 
    <include android:id="@+id/layout3" layout="@layout/relative" /> 
 
</LinearLayout> 

效果圖

     這裡要注意的是，"@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屬性來重新定義引用的layout id。 例如：

<ViewStub android:id="@+id/stub" 
          android:inflatedId="@+id/subTree" 
          android:layout="@layout/mySubTree" 
          android:layout_width="120dip" 
          android:layout_height="40dip" /> 

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

ViewStub stub = (ViewStub) findViewById(R.id.stub); 
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

 

本文出自 “學習Android” 博客，請務必保留此出處http://android.blog.51cto.com/268543/308090