[譯] ConstraintLayout基礎系列之尺寸橫縱比 dimensions

原文：ConstraintLayout basics guidelines
做者：Mark Allison

---

ConstraintLayout的尺寸 dimensions

有時候，咱們須要建立一些固定方向比的 View 組件，最常使用固定橫縱比的就是當 ImageView 用於展現一些固定橫縱比的圖片的時候。舉些例子，書面封面（尺寸橫縱比多種多樣），電影海報（通常是 4:6 ），電影劇照（通常是 1.85:1 或 2.39:1 ），電視劇（通常是 4:3 或 16:9 ）

對於不熟悉什麼是橫縱比的，橫縱比就是表示了 View 的寬度與高度的比例 w:h 。例如，對於一個擁有橫縱比爲 4:6 擁有寬度爲 40dp 的 View 組件有着高度是 60dp ，若它的寬度改成 30dp 則它的高度就是 45dp 。

若咱們現實的圖片能保證一樣的橫縱比和像素大小，咱們能夠簡單的在兩個方向上使用 wrap_content 便可。然而，現實狀況因爲數學四捨五入等多種緣由都有可能形成實際現實的一些小偏差。若是隻是現實一個圖片可能不會有多大問題，可是若是多個圖片展現的時候小問題也會被有很很差的視覺效果，甚至當有 View 對齊於這些圖片的 ImageView 的時候，也所以產生了變化，總體就會形成佈局不平衡混亂了。

對於這個問題的解決方案之一是，經過建立繼承於 ImageView 的子類，並經過覆寫 onMeasure() 來實現固定橫縱比的佈局。經常使用的 support library 中的 PercentLayout 也提供了一些機制來結局這類橫縱比問題。

一樣的 ConstraintLayout 也提供了機制來專門解決這個問題，選擇想要控制橫縱比的 View 而後經過屬性視圖中修改 ratio 值來改變橫縱比，以下圖紅色圈內設置：

如上圖，咱們設置的 View 組件有着向父組件的 start 和 top 邊緣的約束，它的 end 邊緣則約束向一條參考線，而 bottom 邊緣則沒有被約束，這個 View 的 layout_width 和 layout_height 都被設置成 match_constraint，表示他們會根據全部的約束來設置寬高。在佈局階段這個組件的寬度就被計算好了，可是它的高度好像沒有被肯定。而後，由於設置了寬高橫縱比，高度其實也被肯定了，只是寬度的一個函數輸出值（在以上例子中橫縱比是 16:9 ）

這樣設置的好處就是，當寬度變化的時候，高度自動跟着變化，以下圖經過移動這個 View 組件 end 邊緣約束向的參照線就能夠看到效果。

在 XML 中的尺寸橫縱比 DimensionRatio

上例中的 XML 源碼以下：

<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"
  tools:context="com.stylingandroid.scratch.MainActivity">

  <View
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintDimensionRatio="h,15:9"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="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_percent="0.39" />

</android.support.constraint.ConstraintLayout>

能夠發現，設置橫縱比的屬性是 app:layout_constraintDimensionRatio ，而這個值有兩個部分組成：方向和比例值。

經過上面的視圖編輯器，咱們已經知道了寬度就是輸入的固定值，從而設置了方向是 h 標識了 horizontal 。其實這個方向能夠不用設置，在運行時的 layout 佈局過程就能夠計算推斷出來，但顯示的在 xml 源碼中聲明避免了全部可能出現模棱兩可的狀況發生。在大多數狀況下，這很是沒必要要由於自己方向是不言自明的，就像例子中，惟有高度沒被約束，很容易推斷出來高度是根據寬度來的變量函數。

這種橫縱比的組件每每又很大的說服力，當橫縱比的權利被賦予的時候。

最後還要提到的是，上文提到的寬高屬性被設置成 match_constraint 實際上在 XML 源碼中表現是被設置成 0dp，這就像 LinearLayout 的 weight 屬性同樣，會在 XML 中設置爲 0dp ，而實際大小會根據父組件在佈局 layout 過程當中的大小來決定計算出來。

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