自從在去年的 Google I/O 大會上發(fā)布 ConstraintLayout 以來，我們一直不斷改進該布局的穩(wěn)定性，完善對布局編輯器的支持。我們還針對 ConstraintLayout 增加了一些新功能，幫助您構(gòu)建不同類型的布局，例如引入鏈和按比例設置大小。

除了這些功能之外，使用 ConstraintLayout 還可以獲得一項顯著的性能優(yōu)勢。在本文中，我們將向您介紹如何從這些性能改進中獲益。

一、Android 如何繪制視圖?

為了更好地理解 ConstraintLayout 的性能，我們先回過頭來看看 Android 如何繪制視圖。

當用戶將某個 Android 視圖作為焦點時，Android 框架會指示該視圖進行自我繪制。這個繪制過程包括 3 個階段：

1. 測量

系統(tǒng)自頂向下遍歷視圖樹，以確定每個 ViewGroup 和 View 元素應當有多大。在測量 ViewGroup 的同時也會測量其子對象。

2. 布局

系統(tǒng)執(zhí)行另一個自頂向下的遍歷操作，每個 ViewGroup 都根據(jù)測量階段中所確定的大小來確定其子對象的位置。

3. 繪制

系統(tǒng)再次執(zhí)行一個自頂向下的遍歷操作。對于視圖樹中的每個對象，系統(tǒng)會為其創(chuàng)建一個 Canvas 對象，以便向 GPU 發(fā)送一個繪制命令列表。這些命令包含系統(tǒng)在前面 2 個階段中確定的 ViewGroup 和 View 對象的大小和位置。

▲ 測量階段如何遍歷視圖樹的示例

繪制過程中的每個階段都需要對視圖樹執(zhí)行一次自頂向下的遍歷操作。因此，視圖層次結(jié)構(gòu)中嵌入(或嵌套)的視圖越多，設備繪制視圖所需的時間和計算功耗也就越多。通過在 Android 應用布局中保持扁平的層次結(jié)構(gòu)，您可以為應用創(chuàng)建響應快速而靈敏的界面。

二、傳統(tǒng)布局層次結(jié)構(gòu)的開銷

請牢記上述解釋，下面我們來創(chuàng)建一個使用 LinearLayout 和 RelativeLayout 對象的傳統(tǒng)布局層次結(jié)構(gòu)。

▲ 布局示例

假設我們想構(gòu)建一個像上圖那樣的布局。如果您使用傳統(tǒng)布局來構(gòu)建，XML 文件會包含類似于下面這樣的元素層次結(jié)構(gòu)(在本例中，我們忽略屬性)：

<RelativeLayout> 
  <ImageView /> 
  <ImageView /> 
  <RelativeLayout> 
    <TextView /> 
    <LinearLayout> 
      <TextView /> 
      <RelativeLayout> 
        <EditText /> 
      </RelativeLayout> 
    </LinearLayout> 
    <LinearLayout> 
      <TextView /> 
      <RelativeLayout> 
        <EditText /> 
      </RelativeLayout> 
    </LinearLayout> 
    <TextView /> 
  </RelativeLayout> 
  <LinearLayout > 
    <Button /> 
    <Button /> 
  </LinearLayout> 
</RelativeLayout> 

盡管一般來說，這種類型的視圖層次結(jié)構(gòu)都有改進的空間，但您幾乎必定還需要創(chuàng)建一個包含一些嵌套視圖的層次結(jié)構(gòu)。

如前所述，嵌套的層次結(jié)構(gòu)會給性能造成負面影響。我們使用 Android Studio 的 Systrace 工具來看看嵌套視圖對界面性能到底有何實際影響。我們通過編程方式針對每個 ViewGroup(ConstraintLayout 和 RelativeLayout)調(diào)用了測量和布局階段并在執(zhí)行測量和布局調(diào)用期間觸發(fā)了 Systrace。以下命令可生成一個包含 20 秒間隔周期內(nèi)發(fā)生的關(guān)鍵 Event 的概覽文件，例如開銷巨大的測量/布局階段：

python $ANDROID_HOME/platform-tools/systrace/systrace.py --time=20 -o ~/trace.html gfx view res 

有關(guān)如何使用 Systrace 的詳細信息，請參閱使用 Systrace 分析界面性能指南：

https://developer.android.google.cn/studio/profile/systrace.html

Systrace 會自動突出顯示此布局中的(大量)性能問題，并給出修復這些問題的建議。通過點擊“Alerts”標簽，您會發(fā)現(xiàn)，繪制此視圖層次結(jié)構(gòu)需要反復執(zhí)行 80 次的測量和布局階段，開銷極為龐大!

觸發(fā)開銷如此龐大的測量和布局階段當然很不理想，如此龐大的繪制 Activity 會導致用戶能夠覺察到丟幀的現(xiàn)象。我們可以得出這樣的結(jié)論：這種嵌套式層次結(jié)構(gòu)和 RelativeLayout(會對其每個子對象重復測量兩次)的特性導致性能低下。

▲ 觀察 Systrace 針對使用 RelativeLayout 的布局版本發(fā)出的提醒

您可以在我們的 GitHub 代碼庫中查看我們用來執(zhí)行這些測量的完整代碼：

https://github.com/googlesamples/android-constraint-layout-performance

三、ConstraintLayout 對象的優(yōu)勢

如果您使用 ConstraintLayout 來構(gòu)建相同的布局，XML 文件會包含類似于下面這樣的元素層次結(jié)構(gòu)(再次忽略屬性)：

<android.support.constraint.ConstraintLayout> 
  <ImageView /> 
  <ImageView /> 
  <TextView /> 
  <EditText /> 
  <TextView /> 
  <TextView /> 
  <EditText /> 
  <Button /> 
  <Button /> 
  <TextView /> 
</android.support.constraint.ConstraintLayout> 

如本例所示，現(xiàn)在，該布局擁有一個完全扁平的層次結(jié)構(gòu)。這是因為 ConstraintLayout 允許您構(gòu)建復雜的布局，而不必嵌套 View 和 ViewGroup 元素。

舉個例子，我們來看一下布局中間的 TextView 和 EditText：

使用 RelativeLayout 時，您需要創(chuàng)建一個新的 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，您只需添加一個從 TextView 基線到 EditText 基線之間的約束，即可實現(xiàn)同樣的效果，而不必創(chuàng)建另一個 ViewGroup：

▲ EditText 和 TextView 之間的約束

在針對我們使用 ConstraintLayout 的布局版本運行 Systrace 工具時，您會發(fā)現(xiàn)，同樣 20 秒間隔周期內(nèi)執(zhí)行的測量/布局次數(shù)大大減少，開銷也隨之大大減少。這種性能的改進很有意義，現(xiàn)在，我們保持了扁平的視圖層次結(jié)構(gòu)!

觀察 Systrace 針對使用 ConstraintLayout 的布局版本發(fā)出的提醒

同樣值得一提的是，我們構(gòu)建 ConstraintLayout 版本的布局時僅僅使用了布局編輯器，而不是手工編輯 XML。而要使用 RelativeLayout 來實現(xiàn)同樣的視覺效果，我們很可能必須手工編輯 XML。

四、測量性能差異

我們使用 Android 7.0(API 級別 24)中引入的 OnFrameMetricsAvailableListener 分析了 ConstraintLayout 和 RelativeLayout 這兩種類型的布局所執(zhí)行的每次測量和布局操作所花費的時間。通過該類，您可以收集有關(guān)應用界面渲染的逐幀時間信息。

通過調(diào)用以下代碼，您可以開始記錄每個幀的界面操作：

window.addOnFrameMetricsAvailableListener( 
        frameMetricsAvailableListener, frameMetricsHandler); 

在能夠獲取時間信息之后，該應用觸發(fā) frameMetricsAvailableListener() 回調(diào)。我們對測量/布局的性能感興趣，因此，我們在檢索實際幀的持續(xù)時間時調(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); 

如需詳細了解 FrameMetrics 可以檢索的其他類型的持續(xù)時間信息，請參閱 FrameMetricsAPI 參考：

https://developer.android.google.cn/reference/android/view/FrameMetrics.html

五、測量結(jié)果：ConstraintLayout 速度更快

我們的性能比較結(jié)果表明：ConstraintLayout 在測量/布局階段的性能比 RelativeLayout大約高 40%：

▲ 測量/布局(單位：毫秒，100 幀的平均值)

這些結(jié)果表明：ConstraintLayout 很可能比傳統(tǒng)布局的性能更出色。不僅如此，ConstraintLayout 還具備其他一些功能，能夠幫助您構(gòu)建復雜的高性能布局。

有關(guān)詳情，請參閱使用 ConstraintLayout 構(gòu)建快速響應的界面指南：

https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7

我們建議您在設計應用布局時使用 ConstraintLayout。在過去，幾乎所有情形下，您都需要一個深度嵌套的布局，因此，ConstraintLayout 應當成為您優(yōu)化性能和易用性的不二之選。

六、附錄：測量環(huán)境 & 后續(xù)計劃

上述所有測量均在以下環(huán)境中執(zhí)行：

• 設備 - Nexus 5X
• Android 版本 - 8.0
• ConstraintLayout 版本 - 1.0.2
• 查看開發(fā)者指南：https://developer.android.google.cn/training/constraint-layout/index.html
• API 參考文檔：https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html
• 媒體文章：https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7

【本文是51CTO專欄機構(gòu)“谷歌開發(fā)者”的原創(chuàng)稿件，轉(zhuǎn)載請聯(lián)系原作者(微信公眾號：Google_Developers)】

戳這里，看該作者更多好文