解析ConstraintLayout的constraintDimensionRatio属性

官网文档图片：

由文档我们首先能得出以下结论:

1. 如果要使用这个属性，我们至少要把控件的宽或高中间的一个设置为match constraints，具体怎么设置就不再赘述(XML和View Inspector里都可以).
2. ratio的比值表示的是宽高比，注意，一直都是宽高比了解这两点之后，问题来了，系统是怎么知道我们究竟是"以宽为准，按比例去设置高"呢? 还是"以高为准，按比例去设置宽"呢？
3. 了解这两点之后，问题来了，系统是怎么知道我们究竟是"以宽为准，按比例去设置高"呢? 还是"以高为准，按比例去设置宽"呢？我们首先注意到1.里所说的，必须把宽或者高其中之一设为match_constraint，而match_constraint的意思是满足约束。为什么要这么做呢？举个例子，我们把layout_width设置为match_constraint, layout_height设为固定值100dp,那么很显然，高度是写死的，宽度是需要满足某种约束。此时，如果我们设置了layout_constraintDimensionRatio ="4:1",会出现什么效果呢？很显然，系统会保持高度为100dp，而宽度为高度的4倍，即400dp，从而“match_constraint”满足约束。

约束width, layout_width="0dp"

同时约束,layout_width="0dp" && layout_height="0dp"

想象一个场景，我们想在布局里放一张banner，宽度铺满全屏，高度始终为宽度的1/3。那么我们首先为了宽度铺满全屏，需要将width设为match_constraint,又因为高度需要跟宽度形成1:3的比例，所以高度也要同样设置match_constraint,然后将app:layout_constraintDimensionRatio设为"h,3:1"即可。

h和w参数的解释

这里我们还需要解释一下app:layout_constraintDimensionRatio的值里面的h和w是什么意思。一般来说，加上h的意思就是，h之后的比例是以w为基础去设置h，即h = w / ratio。反之，写上w的意思是，w = h * ratio （因为 ratio = w / h 代表宽高比）。

 

 

我们可以看到，如果只把一条边设为0dp,那么我们是无需添加h和w的(会有默认值)。因为我们只能去通过未设为0dp的边来约束设为0dp的那条边，也就是说h和w就对应设为0dp的那条边。而如果两条边都设为0dp，那么就必须设置h和w了，不然系统不知道我们想约束哪条边。原理还是一样的，希望哪条边被约束，我们就写哪条边的字母。

总结

以上主要还是想告诉大家这个属性的原理，其实真正去用的时候还是用View Inspector来做的比较多。当我们把至少一条边设为match_constraint后，点击方框左上角的toggle按钮，可以设置对应的比例，方框里显示的横线或竖线表示哪条边是被限制，跟属性里的h和w是对应的。示例如下:

1.layout_width = "0dp" && layout_height = "0dp"

2.layout_height = "0dp"

3.layout_width = "0dp"