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

 

<?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="match_parent" >

    <ListView
        android:id="@+id/xListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"
      android:background="@color/white"
        android:divider="@drawable/self_center_divider"
        android:dividerHeight="4px"
        android:headerDividersEnabled="false"
        android:listSelector="@drawable/item_selector"
        android:scrollbars="none" >
    </ListView>

</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個顏色，綠色，黃色，紅色，紅色代表着耗時最長，也就意味着我們需要優化，我們可以不斷點擊，查看  測量布局以及繪制所需要的時間，從而優化。。。

就簡單說道這里，大家可以研究一下，有點晚了，晚安！！！