1.使用<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值。下面是另外一個示例:
<div class="dp-highlighter bg_c-sharp" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 687px; overflow: auto; padding-top: 1px; margin: 18px 0px !important; background-color: rgb(231, 229, 220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);"><strong>[c-sharp]</strong> <a target=_blank href="http://blog.csdn.net/chenlaic/article/details/6090069#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/chenlaic/article/details/6090069#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 584px; top: 895px; width: 18px; height: 18px; z-index: 99;"></div><div style="position: absolute; left: 652px; top: 969px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-c" style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><include android:layout_width=</span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"fill_parent"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">layout=</span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"@layout/image_holder"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> /> </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><include android:layout_width=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"256dip"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> layout=</span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"@layout/image_holder"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> /> </span></span></li></ol></div>
<strong>2.使用<merge /> 標籤來減少視圖層級結構 </strong> 在Android layout文件中需要一個頂級容器來容納其他的組件,而不能直接放置多個組件,例如如下的代碼: <div class="dp-highlighter bg_c-sharp" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 687px; overflow: auto; padding-top: 1px; margin: 18px 0px !important; background-color: rgb(231, 229, 220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);"><strong>[c-sharp]</strong> <a target=_blank href="http://blog.csdn.net/chenlaic/article/details/6090069#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/chenlaic/article/details/6090069#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 584px; top: 1144px; width: 18px; height: 18px; z-index: 99;"></div><div style="position: absolute; left: 652px; top: 1192px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-c" style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><FrameLayout xmlns:android=</span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"http://schemas.android.com/apk/res/android"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:layout_width=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"fill_parent"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:layout_height=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"fill_parent"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">> </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <ImageView </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:layout_width=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"fill_parent"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:layout_height=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"fill_parent"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:scaleType=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"center"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:src=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"@drawable/golden_gate"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> /> </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> <TextView </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:layout_width=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"wrap_content"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:layout_height=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"wrap_content"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> android:text=<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"Golden Gate"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> /> </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"> </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"></FrameLayout> </span></li></ol></div>
單獨將<merge />標籤做個介紹,是因爲它在優化UI結構時起到很重要的作用。目的是通過刪減多餘或者額外的層級,從而優化整個Android Layout的結構。
3.將通過一個例子來了解這個標籤實際所產生的作用,這樣可以更直觀的瞭解<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>
我們可以很明顯的看到由紅色線框所包含的結構出現了兩個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結構。
4.除了上邊的例子外,meger還有另外一個用法
當應用Include或者ViewStub標籤從外部導入xml結構時,可以將被導入的xml用merge作爲根節點表示,這樣當被嵌入父級結構中後可以很好的將它所包含的子集融合到父級結構中,而不會出現冗餘的節點。
另外有兩點需要特別注意:
- <merge />只可以作爲xml layout的根節點。
- 當需要擴充的xml layout本身是由merge作爲根節點的話,需要將被導入的xml layout置於 viewGroup中,同時需要設置attachToRoot爲True。(更多說明請參見inflate()文檔)