參照線guidelines

原文：ConstraintLayout basics guidelines 作者：Mark Allison

什么是參照線 guidelines

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

創(chuàng)建參照線 guidelines

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

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

參照線 guidelines 的類型

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

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

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

調(diào)整參照線 guidelines

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

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

正確的使用參照線 guidelines

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

這個(gè)特性其實(shí)很強(qiáng)大，例子中只有一個(gè) view 約束指向了參照線，但如果我們有多個(gè) views 約束指向到參照線，移動(dòng)會(huì)讓所有的 views 跟著一起動(dòng)。

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

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

在 XML 中的 Guideline

我們可以看看一個(gè) View 約束對(duì)齊到參照線的例子：

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

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