參照線guidelines

原文：ConstraintLayout basics guidelines 作者：Mark Allison

什么是參照線 guidelines

如果你熟悉 UI 設(shè)計軟件你應(yīng)該已經(jīng)使用過參照線 guidelines 并對它的作用熟悉了。參照線 guideline 提供了視覺上的參照用于 Views 的對齊，而且不會在運行的時候顯示，只要你熟悉它的使用了就會發(fā)現(xiàn)它對你的對齊實現(xiàn)非常方便。 Google 的 Material 設(shè)計原則推薦了使用 keylines 。該文章將介紹如何通過參照線 guidelines 來快速實現(xiàn)這些。

創(chuàng)建參照線 guidelines

創(chuàng)建垂直參照線 guidelines 需要在 blueprint 視圖上右鍵打開上下文菜單，然后選擇 Add Vertical Guideline 即可創(chuàng)建。如下圖所示：

當(dāng)前版本的視圖編輯器（Android Studio 2.4 alpha 7）默認隱藏參照線，選擇 blueprint 內(nèi)的 View 即可看到參照線。

參照線 guidelines 的類型

當(dāng)前的參照線 guidelines 有三種類型，默認的第一種參考線是會有一個固定的偏移向父組件的 start 邊緣（偏移量的單位是 dp）。本文開頭創(chuàng)建的參照線對于父組件的 start 邊緣參考線為 16dp。為了適配從右向左的布局設(shè)置，所以我們應(yīng)該采用 start 邊緣而不是 left 邊緣。

第二種參考線則是有一個固定的偏移向父組件的 end 邊緣。而最后一種參考線是根據(jù)父組件 ConstraintLayout 的寬度百分比來放置，而且參照線存在一個標(biāo)識器，可以通過點擊這個標(biāo)識按鈕來切換參考線的類型，如下圖所示：

向 start 和 end 類型的偏移量參照線非常適用于 keylines 的使用場景，而百分比形式的參照線則提供了類似于 PercentLayout 的一些功能。

調(diào)整參照線 guidelines

只要已經(jīng)創(chuàng)建了參照線，我們可以通過拖動除類型標(biāo)志器以外的地方的參照線來移動。

你可以在例子中看到，對于一些特殊位置，如左右方向的 8dp 偏移量以及居中的 50% 位置，會對參照線有吸引力。

正確的使用參照線 guidelines

到此，我們已經(jīng)知道參照線 guidelines 的所有類型以及如何創(chuàng)建和移動，現(xiàn)在要討論一下參照線對于我們的用途，用它來作為其他 views 的約束 constraint 對象，也就是說我們可以創(chuàng)建從 view 的一個錨點到參照線的約束 constraint 對象來根據(jù)參照線來對齊這個 view。然后如果我們移動參照線，受約束的 view 也會跟著一起移動：

這個特性其實很強大，例子中只有一個 view 約束指向了參照線，但如果我們有多個 views 約束指向到參照線，移動會讓所有的 views 跟著一起動。

參照線 Guideline 實現(xiàn)原理

對于喜歡追根尋底的開發(fā)者，我們可以更深一步看看 Guideline 的內(nèi)部實現(xiàn)。源碼中 Guideline 類其實就是一個 View，而且它不會渲染任何東西因為它實現(xiàn)了一個 final 的 onDraw() 而且固定了它的可見性為 View.GONE ，這就決定了運行時不會顯示任何東西，而在 View 的 layout 布局過程中它會占據(jù)一個位置，而其他組件可以通過它來布局對齊。所以實際上的 Guideline 只是一個極其輕量級沒有任何顯示但是可以用于約束布局對齊的 View 組件。

在 XML 中的 Guideline

我們可以看看一個 View 約束對齊到參照線的例子：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="16dp" />


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="TextView" />


</android.support.constraint.ConstraintLayout>

參照線 Guideline 擁有了一個屬性 app:orientation="vertical" 來描述它是一個垂直的參照線（此處也可以設(shè)置為 horizontal）。它還有屬性 app:layout_constraintGuide_begin="16dp" 來描述它是一個對齊父組件的 start 邊緣的 16dp 偏移量處。再次提醒的是，應(yīng)該用 start 邊緣而不是 left 邊緣。當(dāng)然切換向 end 類型的話，可以使用另一個屬性 app:layout_constraintGuide_end="..." ，切換為百分比類型的參照線則是設(shè)置屬性 app:layout_constraintGuide_percent="0.5" 值得取值范圍為 0.0 到 1.0 ，描述的是百分比偏移量。

而此處的 TextView 源碼則表現(xiàn)了，我們可以從 TextView 像對其他 View 一樣對 Guideline 添加約束向量，這樣的原因就是剛剛分析的原理，因為 Guildeline 就是一個特殊的 View 。