首頁(yè)技術(shù)文章正文

Android+物聯(lián)網(wǎng)培訓(xùn)之提高UI流暢度

更新時(shí)間:2017-07-02 來(lái)源:黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院 瀏覽量:

Android中所有的界面繪制工作都是在UI線程中進(jìn)行的，提高UI流暢度的最核心根本在于釋放UI線程。即:不在主線程中做耗時(shí)的操作。
 
很多人都知道，耗時(shí)的操作要放到子線程中去做，比如訪問(wèn)網(wǎng)絡(luò)，比如讀寫sd卡。像這類操作大家都會(huì)很自然的想到使用子線程來(lái)完成耗時(shí)的操作，等操作結(jié)束之后，再通過(guò)Handler通知主線程進(jìn)行界面的更新。這是非常正確的方法。但是有一類方法，它必須得運(yùn)行在在UI線程中，就是布局文件的加載。如果這類方法花的時(shí)間太多了，也是會(huì)對(duì)流暢度產(chǎn)生很大的影響。今天我們就來(lái)講講布局文件的優(yōu)化。
 
加載布局文件，是必須在UI線程中完成的。我們通常是在onCreate方法中直調(diào)用setContentView，傳入一個(gè)布局文件的id值，或者是通過(guò)LayoutInflater來(lái)將某一個(gè)布局文件轉(zhuǎn)化成View對(duì)象。其實(shí)這兩種方式的本質(zhì)都是一樣的，都是將xml文件轉(zhuǎn)換成View對(duì)象。
我們現(xiàn)在要做的事，就是如何讓xml文件轉(zhuǎn)換成View對(duì)象所花的時(shí)間最少。做到了這點(diǎn)，就可以很大程度的提高UI的流暢度。

1、優(yōu)化布局, 減少布局的嵌套層級(jí)

   a、使用drawableXXX屬性

  
   如果要實(shí)現(xiàn)這樣一個(gè)效果，布局文件可以這樣寫
<LinearLayout  orientation="vertical">
     <ImageView/>
      <TextView/>
</LinearLayout>
   優(yōu)化后：
<TextView  drawableBottom="@drawable/contact"/>
   直接一個(gè)TextView就搞定，不需要在外面多一層LinearLayout

   b、多使用RelativeLayout，少使用LinearLayout

如果這樣的布局使用LinearLayout來(lái)做的話，那么會(huì)是以下這個(gè)效果
<LinearLayout orientation="horizontal">
    <ImageView/>
    <LinearLayout orientation="vertical">
        <LinearLayout orientation="horizontal">
            <TextView/>
            <TextView/>
        </LinearLayout>
        <TextView/>
        <LinearLayout orientation="horizontal">
            <TextView/>
            <TextView/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
這樣就莫名其妙的多出了好多個(gè)LinearLayout.
這樣過(guò)多的LinearLayout嵌套LinearLayout，會(huì)造成UI加載的非常慢。這樣的布局完全可以使用一個(gè)RelativeLayout來(lái)完成，里面的子元素根據(jù)相對(duì)于其他控件的位置即可確定。
嵌套使用LinearLayout很容易會(huì)導(dǎo)致視圖層級(jí)過(guò)深。如果使用layout_weight這個(gè)參數(shù)不斷的進(jìn)行嵌套，有可能會(huì)讓各個(gè)子View付出計(jì)算兩次的昂貴代價(jià)
優(yōu)化后代碼：
<RelativeLayout>
    <Image id=avatar layout_alignParentLeft=true />
    <TextView id=name layout_alignParentTop=true layout_toRightOf=@id/avatar />
    <TextView id=location layout_alignParentTop=true layout_toRightOf=@id/name />
    <TextView id=desc layout_below=@id/location layout_toRightOf=@id/avatar />
    ....
</RelativeLayout>

  c、使用merge標(biāo)簽

使用merge標(biāo)簽也是能夠減少一些布局的層次。merge標(biāo)簽經(jīng)常會(huì)和include標(biāo)簽相聯(lián)系。
那么什么時(shí)候使用merge標(biāo)簽?zāi)?？下面舉例子說(shuō)明。
<LinearLayout orientation="vertical">
    ......
    <include layout="@layout/include_view_layout"/>
    ......
</LinearLayout>
而include_view_layout.xml 的代碼如下：
<LinearLayout orientation="vertical">
    <Button/>
    <Button/>
</LinearLayout>
我們看到Button的父控件是LinearLayout，而include的父控件也是LinearLayout，這樣子的布局最終的結(jié)果是
<LinearLayout orientation="vertical">
    <LinearLayout orientation="vertical">
        <Button/>
        <Button/>
    </LinearLayout>
</LinearLayout>
紅色部分的LinearLayout完全是多余，于是這時(shí)候，我們就可以在include_view_layout.xml文件中使用merge標(biāo)簽了。如下：
<merge>
    <Button/>
    <Button/>
</merge>
這樣，在加載這個(gè)include標(biāo)簽的時(shí)候，系統(tǒng)會(huì)忽略merge標(biāo)簽，直接將merge標(biāo)簽內(nèi)的元素添加到外層的LinearLayout去了，達(dá)到減少層級(jí)的效果。

2、延遲加載

         在開(kāi)發(fā)某些功能時(shí)候，有時(shí)候需要?jiǎng)討B(tài)的根據(jù)條件來(lái)判斷顯示哪一個(gè)View，不顯示哪一個(gè)View。一般的做法是將所有的View都寫在布局文件中去，然后根據(jù)條件再來(lái)設(shè)置他們的可見(jiàn)度Visibility為GONE或者VISIBLE。這種做法邏輯簡(jiǎn)單，便于理解。但是缺點(diǎn)就是那些不顯示出來(lái)的View也占用了內(nèi)存，消耗了inflate的時(shí)間。因?yàn)橐粋€(gè)View，不論他的Visibility的值是什么，它都會(huì)被inflate出來(lái)，并占用內(nèi)存空間。這時(shí)候其實(shí)就可以用到延遲加載的控件ViewStub了。
     ViewStub是一個(gè)非常輕量級(jí)的控件，它占的資源非常小。注意，是ViewStub這個(gè)對(duì)象所占的資源小，但是你可以為ViewStub指定一個(gè)布局文件，這個(gè)布局文件被inflate的時(shí)候占的空間有可能很大。默認(rèn)的情況下，ViewStub的所指定的布局文件是不被inflate的，只有當(dāng)你調(diào)用了ViewStub的inflate方法時(shí)，ViewStub所指向的布局文件才會(huì)被inflate。所以ViewStub是一個(gè)延遲加載的控件。
<LinearLayout 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:gravity="center_horizontal"> 
<ViewStub  
     android:id="@+id/viewstub1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content"   
     android:layout="@layout/viewstub_layout1"/> 
<ViewStub  
     android:id="@+id/viewstub2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content"  
     android:layout="@layout/viewstub_layout2"/> 
</LinearLayout> 
 
在java代碼中使用
ViewStub stub1 = (ViewStub) findViewById(R.id.viewstub1);
ViewStub stub2 = (ViewStub) findViewById(R.id.viewstub2);
if(isLogin()) {
    stub1.inflate();
} else {
    stub2.inflate();
}
這樣就不會(huì)有浪費(fèi)資源空間去加載沒(méi)必要的控件了。

３、減少inflate的次數(shù)

         這個(gè)的典型例子就是ListView的優(yōu)化。我們說(shuō)ListView的優(yōu)化，實(shí)際上說(shuō)的就是Adapter中g(shù)etView方法的優(yōu)化，我們來(lái)看一個(gè)沒(méi)有優(yōu)化過(guò)的getView方法。
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    MyItem product = list.get(position);
    convertView = getLayoutInflater()
               .inflate(R.layout.item_record, null);
　　TextView tvDate = (TextView) convertView
                .findViewById(R.id.tvDate);
    TextView tvYongtu =  (TextView) convertView
                .findViewById(R.id.tvYongtu);
     TextView tvMoney  = (TextView) convertView
                .findViewById(R.id.tvMoney);
     tvDate.setText(product.detaildate);
     tvYongtu.setText(product.auditmessage);
     tvMoney.setText(product.detailmoney);
     return convertView;
}
我們知道，ListView中的每一個(gè)Item被顯示出來(lái)都要調(diào)用getView方法，這個(gè)Item如果滑出屏幕，又滑回來(lái)，重新顯示在界面上的時(shí)候，又會(huì)再次調(diào)用getView方法。所以getView是不斷的被調(diào)用的。而上面的代碼，只要調(diào)用了getView方法，就一定會(huì)去inflate一個(gè)布局文件，真簡(jiǎn)直就是不敢想象的非常耗時(shí)的操作。于是，利用系統(tǒng)給我們的緩存convertView進(jìn)行判斷，可以大大減少inflate的次數(shù)。其實(shí)，findViewById也是一個(gè)很耗時(shí)的操作，我們可以利用ViewHolder來(lái)減少findViewById的次數(shù)。優(yōu)化后的代碼如下：
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    MyItem product = list.get(position);
    ViewHolder holder;
    if (convertView == null) {
        convertView = getLayoutInflater().inflate(
                R.layout.item_record, null);
        holder = new ViewHolder();
        holder.tvDate = (TextView) convertView
                .findViewById(R.id.tvDate);
        holder.tvYongtu = (TextView) convertView
                .findViewById(R.id.tvYongtu);
        holder.tvMoney = (TextView) convertView
                .findViewById(R.id.tvMoney);
        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }
    holder.tvDate.setText(product.detaildate);
    holder.tvYongtu.setText(product.auditmessage);
    holder.tvMoney.setText(product.detailmoney);
    return convertView;
}
static class ViewHolder {
    TextView tvDate;
    TextView tvYongtu;
    TextView tvMoney;
}
 
推薦閱讀：

python培訓(xùn)



本文版權(quán)歸黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院
首發(fā)：http://android.itheima.com

分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！