[译] 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/