本文介紹了ConstraintLayout對于性能方面的好處并和傳統(tǒng)布局做了比較。
《錢塘湖春行》
孤山寺北賈亭西， 水面初平云腳低。
幾處早鶯爭暖樹， 誰家新燕啄春泥。
亂花漸欲迷人眼， 淺草才能沒馬蹄。
最愛湖東行不足， 綠楊陰里白沙堤。
-唐，白居易
本文首發(fā)：http://yuweiguocn.github.io/
關(guān)于ConstraintLayout的使用介紹請查看ConstraintLayout的使用。
原文鏈接：Understanding the performance benefits of ConstraintLayout
自從去年Google I/O大會(huì)發(fā)布了ConstraintLayout，我們一直在持續(xù)提升布局的穩(wěn)定性及布局編輯器的支持。我們也添加了針對ConstraintLayout的新特性來幫助你構(gòu)建不同類型的布局。例如約束鏈和設(shè)置大小比例。除了這些特性，使用ConstraintLayout有一個(gè)值得注意的性能上的好處。在這篇文章中，我們會(huì)看看ConstraintLayout帶來哪些性能提升。
Android是怎樣繪制View的？
為了更好的理解ConstraintLayout的性能，我們來回顧一下Android是怎樣繪制View的。
當(dāng)用戶讓一個(gè)Android view獲得焦點(diǎn)，Android框架會(huì)指導(dǎo)View繪制它自己。這個(gè)處理過程包括3個(gè)階段：
1.測量（Measure）
系統(tǒng)完成View樹從上到下的遍歷決定每個(gè)ViewGroup有多大和View元素是什么。當(dāng)一個(gè)ViewGroup被測量，它也會(huì)測量它的子View。
2.布局（Layout）
另一個(gè)從上到下遍歷的發(fā)生，每個(gè)ViewGroup使用在測量階段決定的大小確定子View的位置。
3.繪制（Draw）
沒錯(cuò)，又一個(gè)從上到下的遍歷。對于View樹中的每個(gè)對象，創(chuàng)建的Canvas對象用于發(fā)送繪制命令列表到GPU。這些命令包括系統(tǒng)在前兩個(gè)階段確定的ViewGroup和View對象的大小和位置。
圖1 測量階段遍歷一個(gè)View樹的示例
繪制過程中的每個(gè)階段需要從上到下遍歷View樹。因此，在View層級中互相嵌入的View越多，設(shè)備用于繪制View的所需時(shí)間和計(jì)算能力越多。通過在應(yīng)用布局保持扁平層級，你可以創(chuàng)建一個(gè)快速響應(yīng)用戶界面的應(yīng)用。
傳統(tǒng)布局層級的消耗
了解了View的繪制過程，我們使用LinearLayout和RelativeLayout創(chuàng)建一個(gè)傳統(tǒng)布局層級。
圖2 布局示例
我們創(chuàng)建一個(gè)如上圖所示的布局。如果使用傳統(tǒng)布局，XML文件包含的元素和下面類似：
<RelativeLayout>
<ImageView />
<ImageView />
<RelativeLayout>
<TextView />
<LinearLayout>
<TextView />
<RelativeLayout>
<EditText />
</RelativeLayout>
</LinearLayout>
<LinearLayout>
<TextView />
<RelativeLayout>
<EditText />
</RelativeLayout>
</LinearLayout>
<TextView />
</RelativeLayout>
<LinearLayout >
<Button />
<Button />
</LinearLayout>
</RelativeLayout>
盡管在這種類型的View層級中有改進(jìn)的余地，但你仍需要?jiǎng)?chuàng)建一些嵌套View層級。
正如之前說過的，嵌套層級會(huì)影響性能。我們使用Android Studio的Systrace工具看看嵌套層級對UI性能有哪些實(shí)際影響。我們用編程的方式調(diào)用每個(gè)ViewGroup(ConstraintLayout 和 RelativeLayout)的測量和布局并且當(dāng)測量和布局執(zhí)行的時(shí)候觸發(fā)Systrace。下面的命令會(huì)生成一個(gè)包含關(guān)鍵事件的概覽文件，例如昂貴的測量/布局的傳遞，時(shí)間在20秒以內(nèi)。
python $ANDROID_HOME/platform-tools/systrace/systrace.py --time=20 -o ~/trace.html gfx view res
關(guān)于可以怎樣使用Systrace的詳情，請查看Analyzing UI Performance with Systrace指南。
Systrace會(huì)自動(dòng)高亮這個(gè)布局的性能問題，以及一些修改它們的建議。通過點(diǎn)擊"Alerts"標(biāo)簽，你會(huì)發(fā)現(xiàn)繪制這個(gè)View層級在測量和布局階段需要80多個(gè)昂貴的傳遞！
在測量和布局階段觸發(fā)很多昂貴的傳遞并不是我們想要的，大量的繪制活動(dòng)會(huì)導(dǎo)致掉幀引起用戶的注意。我們可以得出結(jié)論由于嵌套層級會(huì)降低性能，正如RelativeLayout會(huì)測量它的子View兩次。
圖3 從Systrace查看使用RelativeLayout布局的警告
可以從GitHub獲取完整源碼查看我們是怎樣執(zhí)行測量的。
ConstraintLayout的好處
如果你使用ConstraintLayout創(chuàng)建同樣的布局，XML文件包含的元素層級就像下面這樣：
<android.support.constraint.ConstraintLayout>
<ImageView />
<ImageView />
<TextView />
<EditText />
<TextView />
<TextView />
<EditText />
<Button />
<Button />
<TextView />
</android.support.constraint.ConstraintLayout>
如上所示，布局有一個(gè)完全扁平的層級。這是由于ConstraintLayout允許你創(chuàng)建復(fù)雜的布局不用嵌套View和ViewGroup元素。
例如，我們來看下布局中間的TextView和EditText：
當(dāng)使用RelativeLayout，你需要?jiǎng)?chuàng)建一個(gè)ViewGroup垂直對齊EditText和TextView：
<LinearLayout
android:id="@+id/camera_area"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="@id/title" >
<TextView
android:text="@string/camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:id="@+id/cameraLabel"
android:labelFor="@+id/cameraType"
android:layout_marginStart="16dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/cameraType"
android:ems="10"
android:inputType="textPersonName"
android:text="@string/camera_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
</RelativeLayout>
</LinearLayout>
通過使用ConstraintLayout，你可以實(shí)現(xiàn)同樣的效果，只需要從TextView的基線添加一個(gè)約束到EditText的基線，不用創(chuàng)建其它ViewGroup：
圖4 EditText和TextView之間的約束
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_creator="1"
app:layout_constraintBaseline_creator="1"
app:layout_constraintLeft_toLeftOf="@+id/activity_main_done"
app:layout_constraintBaseline_toBaselineOf="@+id/cameraType" />
當(dāng)對我們使用ConstraintLayout的布局運(yùn)行Systrace工具，你可以看到在同樣20秒內(nèi)只有很少的昂貴測量/布局傳遞。這對于提升性能是有意義的，現(xiàn)在我們保持了View層級的扁平化。
圖5 從Systrace查看使用ConstraintLayout布局的警告
有一點(diǎn)需要注意，我們可以只使用布局編輯器構(gòu)建ConstraintLayout布局而不用手動(dòng)編輯XML文件。對于使用RelativeLayout實(shí)現(xiàn)同樣的效果，我們可能需要手動(dòng)編輯XML文件。
測量性能差異
我們分析了兩種類型的布局ConstraintLayout和RelativeLayout的測量和布局傳遞有多長，通過使用 OnFrameMetricsAvailableListener，Android 7.0 (API level 24)引入。這個(gè)類可以收集應(yīng)用的UI渲染幀與幀的時(shí)間信息。
通過調(diào)用下面的代碼，可以開始記錄每幀的UI動(dòng)作：
window.addOnFrameMetricsAvailableListener(
frameMetricsAvailableListener, frameMetricsHandler);
時(shí)間信息可用之后，應(yīng)用會(huì)觸發(fā)frameMetricsAvailableListener()回調(diào)。我們感興趣的是測量/布局的性能，因此當(dāng)我們接收到實(shí)際的幀時(shí)間調(diào)用FrameMetrics.LAYOUT_MEASURE_DURATION。
Window.OnFrameMetricsAvailableListener {
_, frameMetrics, _ ->
val frameMetricsCopy = FrameMetrics(frameMetrics);
// Layout measure duration in nanoseconds
val layoutMeasureDurationNs =
frameMetricsCopy.getMetric(FrameMetrics.LAYOUT_MEASURE_DURATION);
關(guān)于FrameMetrics可以接收的其它類型的信息，請查看FrameMetrics API。
測量結(jié)果：ConstraintLayout更快
我們的性能比較顯示ConstraintLayout在測量/布局階段的執(zhí)行要比RelativeLayout好40%：
圖6 測量/布局（單位：毫秒，平均100幀）
上面的結(jié)果顯示，ConstraintLayout可能比傳統(tǒng)布局有更好的性能。此外，ConstraintLayout有其它特性可以幫助你構(gòu)建復(fù)雜和高性能布局，正如ConstraintLayout的好處部分所說。詳情請查看ConstraintLayout的使用。我們推薦你使用ConstraintLayout構(gòu)建你的布局。當(dāng)之前你需要多層嵌套的布局，ConstraintLayout可以讓你的布局有最優(yōu)的性能和易用性。
附錄：測量環(huán)境
上面所有的測量在以下環(huán)境執(zhí)行。
| Device | Android Version | ConstraintLayout version |
|---|---|---|
| Nexus 5X | 8.0 | 1.0.2 |
What's next
查看ConstraintLayout的使用，API文檔，Medium上的文章完全理解ConstraintLayout可以為你提供什么。再次感謝我們發(fā)布ConstraintLayout alpha版本以來提交反饋和問題的所有人。我們真心感激年初發(fā)布的ConstraintLayout 1.0版本。我們會(huì)繼續(xù)提升ConstraintLayout，請繼續(xù)使用Android issue tracker給我們發(fā)送反饋。
