[譯] ConstraintLayout基礎系列之參照線guidelines

原文：ConstraintLayout basics guidelines
做者：Mark Allison

---

什麼是參照線 guidelines

若是你熟悉 UI 設計軟件你應該已經使用過參照線 guidelines 並對它的做用熟悉了。參照線 guideline 提供了視覺上的參照用於 Views 的對齊，並且不會在運行的時候顯示，只要你熟悉它的使用了就會發現它對你的對齊實現很是方便。 Google 的 Material 設計原則推薦了使用 keylines 。該文章將介紹如何經過參照線 guidelines 來快速實現這些。

建立參照線 guidelines

建立垂直參照線 guidelines 須要在 blueprint 視圖上右鍵打開上下文菜單，而後選擇 Add Vertical Guideline 便可建立。以下圖所示：

當前版本的視圖編輯器（Android Studio 2.4 alpha 7）默認隱藏參照線，選擇 blueprint 內的 View 便可看到參照線。

參照線 guidelines 的類型

當前的參照線 guidelines 有三種類型，默認的第一種參考線是會有一個固定的偏移向父組件的 start 邊緣（偏移量的單位是 dp）。本文開頭建立的參照線對於父組件的 start 邊緣參考線爲 16dp。爲了適配從右向左的佈局設置，因此咱們應該採用 start 邊緣而不是 left 邊緣。

第二種參考線則是有一個固定的偏移向父組件的 end 邊緣。而最後一種參考線是根據父組件 ConstraintLayout 的寬度百分比來放置，並且參照線存在一個標識器，能夠經過點擊這個標識按鈕來切換參考線的類型，以下圖所示：

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

調整參照線 guidelines

只要已經建立了參照線，咱們能夠經過拖動除類型標誌器之外的地方的參照線來移動。

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

正確的使用參照線 guidelines

到此，咱們已經知道參照線 guidelines 的全部類型以及如何建立和移動，如今要討論一下參照線對於咱們的用途，用它來做爲其餘 views 的約束 constraint 對象，也就是說咱們能夠建立從 view 的一個錨點到參照線的約束 constraint 對象來根據參照線來對齊這個 view。而後若是咱們移動參照線，受約束的 view 也會跟着一塊兒移動：

這個特性其實很強大，例子中只有一個 view 約束指向了參照線，但若是咱們有多個 views 約束指向到參照線，移動會讓全部的 views 跟着一塊兒動。

參照線 Guideline 實現原理

對於喜歡追根尋底的開發者，咱們能夠更深一步看看 Guideline 的內部實現。源碼中 Guideline 類其實就是一個 View，並且它不會渲染任何東西由於它實現了一個 final 的 onDraw() 並且固定了它的可見性爲 View.GONE ，這就決定了運行時不會顯示任何東西，而在 View 的 layout 佈局過程當中它會佔據一個位置，而其餘組件能夠經過它來佈局對齊。因此實際上的 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" 來描述它是一個垂直的參照線（此處也能夠設置爲 horizontal）。它還有屬性 app:layout_constraintGuide_begin="16dp" 來描述它是一個對齊父組件的 start 邊緣的 16dp 偏移量處。再次提醒的是，應該用 start 邊緣而不是 left 邊緣。固然切換向 end 類型的話，可使用另外一個屬性 app:layout_constraintGuide_end="..." ，切換爲百分比類型的參照線則是設置屬性 app:layout_constraintGuide_percent="0.5" 值得取值範圍爲 0.0 到 1.0 ，描述的是百分比偏移量。

而此處的 TextView 源碼則表現了，咱們能夠從 TextView 像對其餘 View 同樣對 Guideline 添加約束向量，這樣的緣由就是剛剛分析的原理，由於 Guildeline 就是一個特殊的 View 。

最新系列教程，能夠關注個人博客 https://biaomingzhong.github.io/