開篇

Android是一個運行在移動終端上的操作系統(tǒng)，跟傳統(tǒng)PC最大的不同所在就是移動終端的資源緊缺問題“比較”明顯，當(dāng)然對于一些屌絲機型，應(yīng)該用“非常“來形容才靠譜。所以經(jīng)常會出現(xiàn)在一些比較缺乏青春活力的老型機上，運行一些軟件被異常終止的情況；然而作為互聯(lián)網(wǎng)廠家來說，廣大的屌絲機用戶肯定是一大筆用戶資源，這是能放棄的市場嗎？！當(dāng)然不行o(╯□╰)o，所以我們要盡可能得提高軟件的效率來贏取客戶的回眸一笑了，屌絲也是客戶！

這篇博客主要介紹如何在UI設(shè)計上提高效率，減少資源的利用，畢竟在終端資源短缺的今天，效率始終為王。我們評判一個UI界面不是認為有多復(fù)雜才給力，或者說有多炫才靠譜，一個簡約而又不平凡的高效UI界面才是一個灰常牛逼的界面設(shè)計。

引入

在android應(yīng)用中，采用硬編碼方式編寫界面并不是一個提倡的方法。當(dāng)然硬編碼編寫的界面比基于XML文件的軟編碼界面高效靈活一些，但是非常不容易維護，錯綜復(fù)雜的代碼更會讓程序埋雷重重，說不定哪天就把應(yīng)用炸的慘不忍睹。所以如果非常必要非常肯定要采用代碼編寫硬編碼界面之外，其他情況還是采用易于維護的XML來編寫比較好。

所以文中對于UI優(yōu)化設(shè)計歸結(jié)到底也就是對XML布局文件的優(yōu)化設(shè)計。

在谷歌給我們的開發(fā)環(huán)境中，存在這么一個非常好用的工具——hierarchyviewer，估計很多人都沒搭理過這個藏在偏僻角落的小工具吧；它能非常容易的幫我們分析UI界面的結(jié)構(gòu)和構(gòu)造效率，這個工具的位置就在sdk/tools/文件夾。

樓下上圖：

大家好，我是圖~

這是分析的是一個布局上只有一個TextView組件的XML界面，圖告訴我們，構(gòu)造這個界面總共用了四個組件，也就是需要繪制四次組件，自然每一次繪制組件都需要耗費資源。

下面步入狂拽酷炫吊炸天的主題部分。。。。

盡量用最少的步驟完成布局

我是社會好青年，我為國家省資源；當(dāng)然作為組件來說也需要這個覺悟，每個組件的繪制都會多多少少耗費終端的資源。所以我們在這里可不能聽老祖宗的話：韓信點兵多多益善了，精兵簡政才是UI設(shè)計的唯一出路。不相信？行！下面就開始給個對比的例子。

[[121125]]

這不簡單嗎？幾行代碼不是分分鐘的事情嗎？

<RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:gravity="center" > 
    <Button 
        android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/btn_backgroup" 
         /> 
    <ImageView 
        android:id="@+id/imageView1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true" 
        android:layout_centerVertical="true" 
        android:src="@drawable/header_back" /> 
</RelativeLayout> 

也別急著看代碼，多累多傷眼睛呀，直接上個hierarchyviewer里面的圖來瞧瞧唄

一個小小的按鈕就用了3個組件來繪制，這就是3N的復(fù)雜度了呀，如果有5個這樣的按鈕就要15個組件，如果有10個按鈕就要有30個，如果有N++個，哎 呀媽的，不敢想象下去了。既然這樣，我們是不是應(yīng)該考慮一下優(yōu)化優(yōu)化，翻翻資料我們發(fā)現(xiàn)原來是可以不用這么多組件來實現(xiàn)的這個按鈕的。

Button 
    android:id="@+id/button1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/btn_backgroup" 
    android:drawableLeft="@drawable/header_back" 
    android:gravity="center" 
    android:padding="10dp" 
    /> 

還是原來的按鈕，還是原來的味道，復(fù)雜度從3N降低到N！?。∧愀艺f這樣的效率你不想去提升？？？？

小結(jié)一個：在我們設(shè)計UI布局時，應(yīng)該從使用盡量少的組件的前提下入手，由于系統(tǒng)組件的封裝比較完善，把多個簡單的組件交由一個復(fù)雜一點的組件來實現(xiàn)，是可以得到比較好的效率的。因為每個組件都得需要獨自進行繪制過程，多個組件繪制浪費的資源不僅僅謀害了我們的應(yīng)用，更深深打擊了用不起高端機的屌絲用戶的自尊心——”他媽的，這軟件又不能用！“。

你不干活？把你辭了。

我們還記剛開始給的一個圖嗎？我們在布局中使用的到僅僅是一個TextView，而RelativeLayout貌似啥子活兒都沒干的樣子。。。。。。

我們從來都不提倡吃空餉不干活，軟件界的潛規(guī)則也是這樣的。出于構(gòu)建和諧社會的正義感，我們當(dāng)然不能坐視RelativeLayout這種站著茅坑不拉屎的流氓行為，所以我們就需要借助一個解決措施——<merge>標(biāo)簽，它能幫我們干掉一些不需要的根節(jié)點。為了擁有更好的即視感，所以我用了一個更為復(fù)雜點的布局（其實一點都不復(fù)雜）、、

主布局XML文件：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/layout1" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    > 
    <ImageView android:id="@+id/image1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:src="@drawable/bg" 
        /> 
    <com.net168.text.MyLayout  
        android:id="@+id/layout2" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        > 
    </com.net168.text.MyLayout> 
</FrameLayout> 

組合控件布局XML文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    > 
    <Button android:id="@+id/button2" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="button2" 
        /> 
    <TextView android:id="@+id/text1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="text1" 
        android:textColor="#ff0000" 
        /> 
</LinearLayout> 

這個界面很丑的，不忍直視：

丑歸丑，我們還是需要繼續(xù)用神器hierarchyviewer看看這個XML生成的界面結(jié)構(gòu)圖來探索一下丑女內(nèi)心豐富多彩的世界~~~~~~~

我靠。。。。三個組件的布局竟然用了六層嵌套布局，瞬間有了一種大花姑娘嫁給老光棍的一種深深的浪費感。我們開始看圖說話，第一層和第二層的組件是系統(tǒng)都會自動生成的，這個是板上釘釘沒法商量的事情，除非你去底層跟他們好好談?wù)劇?span style="color: #ff0000;">但是~但是這個第三層的FrameLayout和第五層的LinearLayout完完全全是在自我秀存在感而已，所以我們要狠下心做掉他們，怎么來呢？用<merge>標(biāo)簽。

由于<merge>標(biāo)簽只能作為根元素，所以我們可以將這兩個根元素都稍加修改，如下：

主布局XML文件：

<merge xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/layout1" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    > 
    <ImageView android:id="@+id/image1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:src="@drawable/bg" 
        /> 
    <com.net168.text.MyLayout  
        android:id="@+id/layout2" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        > 
    </com.net168.text.MyLayout> 
</merge> 

組合控件布局XML文件：

<merge xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    > 
    <Button android:id="@+id/button2" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="button2" 
        /> 
    <TextView android:id="@+id/text1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="text1" 
        android:textColor="#ff0000" 
        /> 
</merge> 

PS：注意需要在組合控件的類中加上一句setOrientation(LinearLayout.HORIZONTAL)來保證自組件的水平排列。

繼續(xù)用神器看看結(jié)構(gòu)：

呼呼呼~~是不是從六層降低到了四層結(jié)構(gòu)，好一股小清新的感覺呀，我都感覺飄飄然了，自然效率的提升是毋容置疑滴。。。。。

小結(jié)一個：<merge>標(biāo)簽?zāi)馨俜职俅?lt;FrameLayout>這個布局組件，對于不復(fù)雜的其他布局組件如線性布局等組合組件中，可以在繼承子類中對其屬性進行設(shè)置后也可以使用<merge>標(biāo)簽，<merge>標(biāo)簽不占資源，自然在生成界面時也不會生成對應(yīng)的組件。另外需要注意一點是<merge>只能作為根元素，對于需要用inflate生成布局文件時，必須指定一個ViewGroup作為其父元素，并且要設(shè)置inflate的attachToRoot參數(shù)為true。（參照inflate(int, ViewGroup, boolean)）。

本文鏈接：http://www.cnblogs.com/net168/archive/2014/10/09/4004950.html