掌握ConstraintLayout按比例设置视图大小

Posted 2021-01-24

有时候在布局界面的时候，UI要求某个View或者某张图片按比例显示，以适应不同的屏幕分辨率。

通常我们时通过自定义View或者引入第三方的库来解决。现在我们既然已经使用了ConstraintLayout，它本身就支持这样的按比例设置View大小的功能。

下面我们来介绍如何使用：

1. 首先我们在布局中添加一个View：

此时，没有添加任何约束，显示的比例就是原始图片的比例。

2. 添加水平方向的约束：

添加完水平方向的约束后，注意此时默认的宽高为wrap_content。

3. 将高度设置为match_constraint

如上图：这里我们将高度设置为match_constraint，然后发现下面出现了一个三角，这个就是设置View比例的地方。

4. 设置View比例

下面我们点击这个三角形，并设置宽高的比例：

• 1：1
  

• 1：2
  

这里设置的是宽度：高度的比例，我们查看源码可以看到这个属性：

此时我们改变View的宽度，就会发现其高度也会保持这个比例而相应地变化了：

总结

本文我们是以宽度：高度进行View比例的设置，当然我们也可以以高度：宽度进行设置，道理都是一样的。

设置View的比例也是ConstraintLayout相对于传统的布局容器一个强大的功能，它使得布局更加灵活，更加容易得进行屏幕适配。

下一篇：Android开发 - 掌握ConstraintLayout（十一）复杂动画！如此简单！，我们将介绍使用ConstraintLayout创建复杂动画。

如有更多疑问，请参考我的其它android相关博客：我的博客地址