使用Interface Builder的Auto Layout实现图片上标签同步缩放与相对定位

方案一：填充视图（Filler Views）实现法 #

这就是你提到的原帖中提到的方案，具体操作步骤如下：

• 先完成UIImageView的基础约束配置：给图片视图设置好适配不同设备的缩放规则，比如居中父视图、宽高比锁定为原图的宽高比、左右边距不超过安全区等，确保图片在不同尺寸设备上可以等比缩放，注意将图片视图的Content Mode设置为Aspect Fit/Aspect Fill/Scale To Fill，保证图片显示范围和视图边界同步
• 在UIImageView上添加4个透明的填充视图（UIView），分别放在标签的左、右、上、下四个方位，将填充视图的背景色设置为clear，避免遮挡显示内容
• 给四个填充视图分别添加比例约束：
  • 左侧填充视图：leading边绑定图片视图的leading边，trailing边绑定标签的leading边，添加宽度约束等于图片视图的宽度，multiplier值设置为你需要的左侧留白占图片总宽度的比例，比如要标签左侧距离图片左边缘占总宽度的20%，这里multiplier就填0.2
  • 右侧填充视图：trailing边绑定图片视图的trailing边，leading边绑定标签的trailing边，添加宽度约束等于图片视图的宽度，multiplier值设置为右侧留白占图片总宽度的比例
  • 上方填充视图：top边绑定图片视图的top边，bottom边绑定标签的top边，添加高度约束等于图片视图的高度，multiplier值设置为顶部留白占图片总高度的比例
  • 下方填充视图：bottom边绑定图片视图的bottom边，top边绑定标签的bottom边，添加高度约束等于图片视图的高度，multiplier值设置为底部留白占图片总高度的比例
• 标签无需额外添加固定宽高约束，保持内容自适应即可，完成后图片缩放时四个填充视图会按比例调整大小，带动标签始终停留在固定相对位置

方案二：比例锚点约束法（更简洁，无需额外视图） #

更推荐的轻量化方案，不需要添加额外的填充视图即可实现效果：

• 同样先完成UIImageView的基础缩放约束配置，确保图片可以随设备尺寸等比缩放
• 选中需要放置的UILabel，添加两个核心约束：
  • 标签的centerX约束绑定图片视图的leading约束，multiplier值设置为横向相对位置比例：比如要标签中心点落在图片宽度30%的位置，multiplier就填0.3
  • 标签的centerY约束绑定图片视图的top约束，multiplier值设置为纵向相对位置比例：比如要标签中心点落在图片高度45%的位置，multiplier就填0.45
• 如果需要标签的尺寸也随图片同步缩放，可以额外给标签添加宽高约束，宽度等于图片视图宽度乘以对应比例，高度同理设置即可

内容的提问来源于stack exchange，提问作者Zim La