android布局优化 工具,详解Android布局优化
怎樣才能寫(xiě)出優(yōu)秀的Android App，是每一個(gè)程序員追求的目標(biāo)。那么怎么才能寫(xiě)出一個(gè)優(yōu)秀的App呢？相信很多初學(xué)者也會(huì)有這種迷茫。一句話來(lái)回答這個(gè)問(wèn)題：細(xì)節(jié)很重要。今天我們就從最基礎(chǔ)的XML布局來(lái)談?wù)勗趺刺岣逜ndroid性能問(wèn)題吧！
也許你經(jīng)常會(huì)遇到比較復(fù)雜的布局，這種情況下，最簡(jiǎn)單的方法就是多層嵌套實(shí)現(xiàn)效果，但是最簡(jiǎn)單的方法是否是最優(yōu)的方法呢？ 這里需要打一個(gè)大大的問(wèn)號(hào)？？？？？經(jīng)驗(yàn)告訴我們，往往簡(jiǎn)單的方法，得到的結(jié)果不是最優(yōu)解，那么我們通過(guò)一個(gè)例子來(lái)研究一下怎么去優(yōu)化我們的XML布局吧，下面通過(guò)經(jīng)典微信中的“發(fā)現(xiàn)”tab頁(yè)面中的布局來(lái)看看怎么實(shí)現(xiàn)。
上面這張圖片是微信界面截圖，看到這張效果圖的第一眼會(huì)讓開(kāi)發(fā)者想到使用線性布局實(shí)現(xiàn)這種左邊圖片，右邊文字，一行白色背景效果很方便。那么我們就按照一般思路寫(xiě)出如下布局代碼：
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_eeeeee"
android:orientation="vertical"
tools:context=".MainActivity">
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@drawable/item_bg_select"
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/afe" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="@string/fiends"
android:textColor="@android:color/black"
android:textSize="16sp" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@android:color/white"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/item_bg_select"
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/afg" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="@string/scan"
android:textColor="@android:color/black"
android:textSize="16sp" />
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@color/color_e0e0e0">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/item_bg_select"
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/afh" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="@string/shake"
android:textColor="@android:color/black"
android:textSize="16sp" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@android:color/white"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/item_bg_select"
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/afd" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="@string/nearby"
android:textColor="@android:color/black"
android:textSize="16sp" />
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@color/color_e0e0e0">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/item_bg_select"
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/afb" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="@string/float_bottle"
android:textColor="@android:color/black"
android:textSize="16sp" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@android:color/white"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/item_bg_select"
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/agg" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="@string/shopping"
android:textColor="@android:color/black"
android:textSize="16sp" />
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@color/color_e0e0e0">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/item_bg_select"
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ak6" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="@string/games"
android:textColor="@android:color/black"
android:textSize="16sp" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="horizontal">
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/ala"
android:gravity="center"
android:text="@string/weixin"
android:textColor="@color/color_9e9e9e" />
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/al9"
android:gravity="center"
android:text="@string/countans"
android:textColor="@color/color_9e9e9e" />
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/alc"
android:gravity="center"
android:text="@string/finds"
android:textColor="@color/color_9e9e9e" />
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/ale"
android:gravity="center"
android:text="@string/me"
android:textColor="@color/color_9e9e9e" />
以上布局的效果圖如下：
是不是差不多實(shí)現(xiàn)了微信一樣的效果？那么我們?cè)趺磥?lái)判斷以上布局是不是最優(yōu)的呢？當(dāng)然，我們是有工具來(lái)查看的。相信很多童鞋用過(guò)了，第一個(gè)就是 Hierarchy View，第二個(gè)就是 顯示GPU過(guò)度繪制。
Hierarchy View檢測(cè)布局嵌套層次
如果你是使用AS開(kāi)發(fā)的話，你可以在 AS 工具欄中點(diǎn)擊 Tools–>Android–>Android Device Monitor–>Hierarchy View。(至于Hierarchy View怎么使用這里就不仔細(xì)介紹了)你可以通過(guò)這個(gè)工具來(lái)查看當(dāng)前布局的層次結(jié)構(gòu)，如下圖的布局的層次結(jié)構(gòu)就是上面微信的布局：
ContentFrameLayout接點(diǎn)之后就是我們上面XML代碼的布局了，從上圖可以看到，我們布局最多有 5 層，其實(shí)你從代碼中也可以看到是 5 層，那么我們是否能減少以上的布局的嵌套層次呢？答案是肯定的，廢話不多說(shuō)，我們直接上一份我優(yōu)化過(guò)的布局代碼吧。
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_eeeeee"
tools:context=".MainActivity">
android:id="@+id/tv_one"
style="@style/textStyle"
android:layout_marginTop="20dp"
android:background="@drawable/item_bg_select"
android:drawableLeft="@drawable/afe"
android:text="@string/fiends" />
android:id="@+id/lv_two"
style="@style/LinerLayoutStyle"
android:layout_below="@+id/tv_one"
app:divider="@drawable/lines"
app:dividerPadding="10dp"
app:showDividers="middle">
style="@style/textStyle"
android:background="@drawable/item_bg_select"
android:drawableLeft="@drawable/afg"
android:text="@string/scan" />
style="@style/textStyle"
android:background="@drawable/item_bg_select"
android:drawableLeft="@drawable/afh"
android:text="@string/shake" />
android:id="@+id/lv_threed"
style="@style/LinerLayoutStyle"
android:layout_below="@+id/lv_two"
app:divider="@drawable/lines"
app:dividerPadding="10dp"
app:showDividers="middle">
style="@style/textStyle"
android:background="@drawable/item_bg_select"
android:drawableLeft="@drawable/afd"
android:text="@string/nearby" />
style="@style/textStyle"
android:background="@drawable/item_bg_select"
android:drawableLeft="@drawable/afb"
android:text="@string/float_bottle" />
style="@style/LinerLayoutStyle"
android:layout_below="@+id/lv_threed"
app:divider="@drawable/lines"
app:dividerPadding="10dp"
app:showDividers="middle">
style="@style/textStyle"
android:background="@drawable/item_bg_select"
android:drawableLeft="@drawable/agg"
android:text="@string/shopping" />
style="@style/textStyle"
android:background="@drawable/item_bg_select"
android:drawableLeft="@drawable/ak6"
android:text="@string/games" />
layout="@layout/bottom_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
哇，代碼量少了很多啊，代碼也簡(jiǎn)潔了許多，讓人看著就很舒服，那么我們到底進(jìn)行了怎樣的優(yōu)化呢？從以下幾點(diǎn)總結(jié)：
使用 style 主題來(lái)定義一個(gè)通用的屬性，從而重復(fù)利用代碼，減少代碼量。上面代碼使用了兩個(gè)style，一個(gè)是textStyle 和 LinerLayoutStyle ，代碼如下：
match_parent
wrap_content
16sp
@android:color/black
20dp
20dp
center_vertical
true
match_parent
wrap_content
20dp
@android:color/white
vertical
2.減少布局嵌套的層次，上面布局使用TextView可以設(shè)置四個(gè)方向圖片來(lái)直接替代LinerLayout下包裹一個(gè)ImageView 和TextView。從而這里減少了一層嵌套布局，再次利用RelativeLayout相對(duì)布局又減少了一層橋套，提高了加載布局的效率。看圖：
從圖中看出，不僅減少了兩層嵌套布局，而且組件數(shù)目也減少，從而減少布局繪制的時(shí)間，大大提高了布局加載效率。
3.使用 LinearLayoutCompat 組件來(lái)實(shí)現(xiàn)線性布局元素之間的分割線，從而減少了使用View來(lái)實(shí)現(xiàn)分割線效果。
4.使用 include 標(biāo)簽加載底部菜單欄布局，include 標(biāo)簽的目的是重復(fù)利用布局，來(lái)減少代碼了。
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="horizontal">
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/ala"
android:gravity="center"
android:text="@string/weixin"
android:textColor="@color/color_9e9e9e"
/>
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/al9"
android:gravity="center"
android:text="@string/countans"
android:textColor="@color/color_9e9e9e" />
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/alc"
android:gravity="center"
android:text="@string/finds"
android:textColor="@color/color_9e9e9e" />
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/ale"
android:gravity="center"
android:text="@string/me"
android:textColor="@color/color_9e9e9e" />
5.使用merge減少布局嵌套層次。
使用merge的前提條件就是merge標(biāo)簽必須是當(dāng)前xml布局的根標(biāo)簽，例如：
........
也就是merge標(biāo)簽必須是當(dāng)前布局的父布局。一般merge標(biāo)簽和include結(jié)合使用來(lái)減少布局嵌套層次。例如有如下布局：兩個(gè)Button，以上一下。
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text1"/>
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button1"
android:text="text2"/>
該布局層次如下：
由上圖看出除了根布局，我們自己寫(xiě)的布局有三層，兩層都是RelativeLayout。那么能否優(yōu)化呢？
(1)首先我們可以利用include標(biāo)簽簡(jiǎn)化xml布局。結(jié)果變成如下：
android:layout_width="match_parent"
android:layout_height="match_parent">
代碼很清爽有木有，一目了然。然后layout_item布局如下：
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text1"/>
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button1"
android:text="text2"/>
到此，其實(shí)布局的嵌套層次和上面一樣沒(méi)有任何改變。那么我們利用merge標(biāo)簽來(lái)試試看結(jié)果怎樣？merge標(biāo)簽代碼如下：
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text1"/>
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button1"
android:text="text2"/>
此處僅僅把RelativeLayout標(biāo)簽換成merge標(biāo)簽，效果卻大有不同。
利用merge標(biāo)簽以后的布局層次如下：
很明顯減少了一層RelativeLayout布局，從而優(yōu)化了布局。
總結(jié)：當(dāng)父布局和子布局的根布局是同一種布局時(shí)，可以利用merge標(biāo)簽來(lái)減少一層嵌套布局。比如：你父布局是LinerLayout，此時(shí)子布局也是LinerLayout，就可以考慮使用merge來(lái)減少布局嵌套層次。
顯示GPU過(guò)度繪制
你可以在手機(jī)打開(kāi) 設(shè)置—->開(kāi)發(fā)者選項(xiàng)—->顯示GPU過(guò)度繪制，這個(gè)開(kāi)關(guān)的作用是按不同顏色值來(lái)顯示布局的過(guò)度繪制，繪制的層次從最優(yōu)到最差：藍(lán)，綠，淡紅，紅。給出一張直觀的形象圖片來(lái)表示吧
圖片從上到下代表不同層次的OverDraw，我們?cè)诓季謺r(shí)候，盡量減少紅色 Overdraw，看到更多的藍(lán)色區(qū)域。來(lái)看看微信的 Overdraw圖和我們自定義的布局Overdraw圖吧
第一張圖是 騰訊微信的Overdraw 圖，第二張圖片是我們自定義的 Overdraw 圖片。從上面兩張圖片看出，我們自己的布局和微信原版的布局 Overdraw 過(guò)度繪制情況差不多，沒(méi)啥區(qū)別。那么我們能不能去減少紅色部分的過(guò)度繪制呢？試試吧！
我們先去掉最頂端布局RelativeLayout的背景
android:background="@color/color_eeeeee"
然后修改每個(gè)item選擇資源 selector
android:background="@drawable/item_bg_select1"
之前的 item_bg_select.xml 資源是如下代碼：
修改之后的 item_bg_select1.xml資源代碼如下：
我們發(fā)現(xiàn)，新的 selector資源去除了
因?yàn)檎麄€(gè)背景是白色的，無(wú)需重復(fù)設(shè)置正常情況下item的背景顏色。
修改之后的效果圖如下：
看出，基本沒(méi)有紅色區(qū)域，從而提高布局的繪制效率。
總結(jié)：現(xiàn)在看來(lái)，我們通過(guò)減少背景顏色的設(shè)置來(lái)減少Overdraw的情況。我們自己布局過(guò)度繪制的情況比微信本身的情況有很大的改善，是不是感覺(jué)很nice～～。
懶加載布局 ViewStub
除了以上兩種方法來(lái)優(yōu)化布局，還有其他辦法來(lái)繼續(xù)優(yōu)化布局，在某些情況下，有些布局是僅在需要時(shí)才加載，比如小米手機(jī)的添加聯(lián)系人功能就有在編輯姓名的時(shí)候有一個(gè)下拉按鈕顯示更多輸入信息，看圖
遇到這種情況，我們首先想到的 就是將不常用的元素使用INVISIBLE或者GONE進(jìn)行隱藏，這樣是否真的好呢？是否達(dá)到了 布局優(yōu)化的最終效果呢？利用 INVISIBLE只是隱藏布局，但是布局還是占居當(dāng)前位置，且系統(tǒng)在加載布局的時(shí)候這一部分還是會(huì)繪制出來(lái)，同樣花費(fèi)繪制時(shí)間。那么有沒(méi)有好的辦法來(lái)解決這一問(wèn)題呢？不言而喻，我們可以使用懶加載布局 ViewStub。
ViewStub是Android為此提供了一種非常輕量級(jí)的控件。ViewStub雖說(shuō)也是View的一種，但是它沒(méi)有大小，沒(méi)有繪制功能，也不參與布局，資源消耗非常低，將它放置在布局當(dāng)中基本可以認(rèn)為是完全不會(huì)影響性能的。
下面我們來(lái)學(xué)習(xí)一下 ViewStub的使用方法吧！
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp">
android:id="@+id/et_name"
android:layout_width="150dp"
android:drawableRight="@drawable/a0e"
android:layout_height="wrap_content"
android:hint="@string/name" />
android:id="@+id/view_stub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="@layout/item_name" />
android:layout_width="150dp"
android:layout_height="wrap_content"
android:hint="@string/comp" />
android:layout_width="150dp"
android:layout_height="wrap_content"
android:hint="@string/lead" />
item_name.xml 布局如下：
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/et_name1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:hint="@string/name1" />
android:id="@+id/et_name2"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:hint="@string/name2" />
android:id="@+id/et_name3"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:hint="@string/name3" />
android:id="@+id/et_name4"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:hint="@string/name4" />
然后你在代碼中這么使用即可
findViewById(R.id.et_name).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ViewStub viewStub = (ViewStub) findViewById(R.id.view_stub);
if (null != viewStub) {
//主要是這一句顯示更多布局
View view = viewStub.inflate();
EditText name1 = (EditText) view.findViewById(R.id.et_name1);
EditText name2 = (EditText) view.findViewById(R.id.et_name2);
EditText name3 = (EditText) view.findViewById(R.id.et_name3);
EditText name4 = (EditText) view.findViewById(R.id.et_name4);
}
}
});
效果圖如下：
從效果圖可以看出，當(dāng)用戶點(diǎn)擊姓名下拉按鈕時(shí)，其他關(guān)于姓名的布局就加載出來(lái)了，而且原來(lái)的布局是顯示在ViewStub布局之下的，位置顯示沒(méi)有任何異常。當(dāng)然你可以通過(guò) setVisibility(View.VISIBLE)或者viewStub.inflate()方來(lái)來(lái)讓其顯示，通過(guò)setVisibility(View.INVISIBLE)來(lái)隱藏 ViewStub。
Android Lint 工具
這里不展開(kāi)介紹 Lint 工具，感興趣的童鞋可以自己網(wǎng)上搜索一把，這個(gè)工具主要是用來(lái)檢查工程中代碼的不合理，布局不合理，資源重復(fù)，圖片重復(fù)，等，讓開(kāi)發(fā)者進(jìn)一步優(yōu)化自己的應(yīng)用。如果你是AS 用戶，你可以在工具欄 Analyze—>Inspect Code 打開(kāi)此工具使用。
總結(jié)
以上是生活随笔為你收集整理的android布局优化 工具,详解Android布局优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： mysql 安装telnat_yum安装
- 下一篇： android 屏蔽快速点击,Andro