Android ConstraintLayout (约束布局) 是 Android Studio 2.3+ 创建 activity_main.xml 的默认布局方式

在上一章节中我们学习了 Android ConstraintLayout 中的 尺寸约束 ( Dimensions constraints ) 约束布局，本章我们就来学习 比例 ( Ratio) 属性

比例 ( Ratio )

ConstraintLayout 提供了以下属性用于设置某个方向的 比例 ( Ratio) 约束

只有一个方向约束

如果只有一个方向的约束，可以用比例去定义 View 的宽高

为了做到这一点，需要将至少一个约束维度设置为 0dp ( 即 MATCH_CONSTRAINT ) ， 并将属性 app:layout_constraintDimentionRatio 设置为给定的比例

我们写一个 demo 来演示一下

1. 创建一个 空的 Android 项目 cn.twle.android.ConstraintLayout

2. 修改 activity_main.xml 为以下内容

   <?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"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <Button android:layout_width="200dp"
           android:layout_height="0dp"
           android:text="Ratio"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintDimensionRatio="2:1"
           app:layout_constraintTop_toTopOf="parent"/>
   </android.support.constraint.ConstraintLayout>
   

运行范例，显示如下

比例值有两种类型

1. 浮点值 : 表示宽度和高度之间的比率 ( 2,0.5 )
2. width:height: 宽:高形式的比例 ( 3:4 或 1:5 )

当约束多于一个 ( 宽高都被约束了)

如果两个维度均设置为 MATCH_CONSTRAINT ( 0dp ) ，也可以使用比例

在这种情况下，系统会使用满足所有约束条件和比率的最大尺寸

如果需要根据一个维度的尺寸去约束另一个维度的尺寸，则可以在比率值的前面添加 W 或者 H 来分别约束宽度或者高度

例如，如果一个尺寸被两个目标约束 ( 比如宽度为 0，在父容器中居中)，可以使用 W 或 H 来指定哪个维度被约束

我们写一个 demo 来演示下

1. 创建一个 空的 Android 项目 cn.twle.android.ConstraintLayout

2. 修改 activity_main.xml 为以下内容

   <?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"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <Button 
           android:layout_width="0dp"
           android:layout_height="0dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintDimensionRatio="H,2:1"
           app:layout_constraintTop_toTopOf="parent"/>
   
   </android.support.constraint.ConstraintLayout>
   

这里用 H 表示以高度为约束，高度的最大尺寸就是父控件的高度，2:1 表示高:宽 = 2:1 ，即宽度为高度的一半

运行范例，显示如下

参考文档

1. Android ConstraintLayout Guideline

2. Android ConstrantLayout