本文介绍了如何使用ConstraintLayout来实现固定横纵比的布局，特别是在处理ImageView时保持图片比例不变。通过设置`app:layout_constraintDimensionRatio`属性，可以轻松调整View组件的宽度与高度比例，实现宽度变化时高度自动调整的效果，从而确保布局的平衡和一致性。
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 值来改变横纵比，如下图红色圈内设置：
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
