Android 優化性能之 如何避免--過度繪製

可能有些人不明白什麼是過度繪製，簡單言，我們app一個頁面所顯示的效果是由像素一幀一幀繪製而成。過度繪製就是意味着這一幀被繪製多次。如果是靜態的佈局，可能影響不是很大，如果是動態的，比如ListView，GridView,ViewPager等在性能上就會差一點，常見的比如listView上下滑動，過度繪製的情況下，就會出現卡頓，或者跳躍感很明顯。 當然過度繪製肯定無法避免，我們只能減少不必要的繪製，那麼如何看的出來，一個頁面是否過度繪製呢？

下面我們來看一下，下面說的這個工具只有Android 4.2以上有此功能。

1.打開我們的手機設置--開發者選項--調試GPU過度繪製（可能有些手機不是這樣的叫法，有的是顯示GPU過度繪製，根據手機而來），選擇顯示過度繪製區域，此時手機頁面會顯示成這樣，不要驚慌。。

這裏給大家介紹下，繪製顏色的標識，從好到差：藍色(1x次繪製)-》淺綠色(2x繪製)-》淡紅色(3x繪製)-》紅色(4x繪製)。

2.怎麼減少過度繪製

一般情況下，最好把繪製控制在2次以下，3次繪製有時候是不能避免的，儘量避免，4次的繪製基本上是不允許的。

怎麼減少繪製是我們最關心的，我們來看一個圖（自己項目裏面的。。我們以圖片下面的ListView爲例子）從圖上看的出來，被繪製3次甚至4次，

我們來看下代碼：listView和item

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent" >
 5 
 6     <ListView
 7         android:id="@+id/xListView"
 8         android:layout_width="match_parent"
 9         android:layout_height="wrap_content"
10         android:layout_marginBottom="50dp"
11         android:background="@color/white"
12         android:divider="@drawable/self_center_divider"
13         android:dividerHeight="4px"
14         android:headerDividersEnabled="false"
15         android:listSelector="@drawable/item_selector"
16         android:scrollbars="none" >
17     </ListView>
18 
19 </RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:background="@color/white">

    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/self_center_item_bg">

            <ImageView
                android:id="@+id/item_img_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp" />

            <TextView
                android:id="@+id/item_text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="25dp"
                android:layout_toRightOf="@id/item_img_view"
                android:textColor="@color/text_color_darker"
                android:textSize="15sp" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/right_arrow_gray"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"/>
    </RelativeLayout>

</RelativeLayout>

紅色標記出來的，是問題的所在，背景顏色繪製了三次，最後一個是選擇器，因爲有點擊效果，我現在把前2個都給刪掉，只留最後一個，現在我們看一下圖片。看是不是達到預期的效果。。。。

這裏只是一個簡單的例子，當讓有很多原因組成，我們可以從以下幾個方面着手

第一：如果是相對比較複雜的佈局，建議使用相對佈局。

第二：如果需要多層嵌套，我們可以使用merge標籤來減少嵌套。

第三：減少背景顏色的多次繪製

第四：對於使用Selector當背景的Layout(比如ListView的Item,會使用Selector來標記點擊,選擇等不同的狀態),可以將normal狀態的color設置 爲”@android:color/transparent”,來解決對應的問題

第五：當一個頁面有多種不同的顯示效果，最常見的是listview 中的多種item佈局，我們可以採用抽取的方式

等等。。。。

下面我在爲大家簡單介紹以下Android studio自帶的工具，

首先 打開 Android Device mointor，找到 Hierarychy view （這裏我簡稱 視圖樹）

將你要查看的項目運行到模擬器或者真機上，在Android device mointor 上windows 找到當前的模擬器或者真機，找到當前的項目，

如圖：點擊當前項目某一個佈局，在View裏面會顯示當前這個佈局的各個節點圖，然後點擊3（profile node）,在視圖裏面就會顯示4上面的三個點

他們分別表示 測量 佈局 繪製，再次點擊的時候，我們就可以看到子節點上着三個圓點在變化，他有3個顏色，綠色，黃色，紅色，紅色代表着耗時最長，也就意味着我們需要優化，我們可以不斷點擊，查看 測量佈局以及繪製所需要的時間，從而優化。。。