多尺寸iPhone下如何对齐文本与图片？Xcode约束设置问题求解

问题实际场景 #

• 布局目标：页面内横向排布6张图片，每张图片正下方对应放置一行说明文本
• 异常表现：小屏机型（iPhone SE、iPhone 8）的布局显示完全符合预期，在大屏机型（iPhone 11）上，最左侧、最右侧的图片会过度贴靠屏幕边缘，边距完全不符合设计要求
• 排查进展：已整理三类参考素材（不同机型的布局效果截图、图片组件约束设置截图、文本组件约束设置截图），暂未定位到具体的配置错误点

常见触发该问题的配置误区 #

• 给左右两侧图片设置了无弹性的固定边距值：如果参照小屏机型的宽度（iPhone 8逻辑宽度375pt）设置了固定的左右边距，放到宽度更大的iPhone 11（逻辑宽度414pt）上，固定边距无法匹配大屏的弹性空间，就会出现边距被压缩的问题
• 单图设置固定宽度而非等宽适配：如果给每张图片写死了宽度值，没有把图片宽度和父视图宽度做绑定，小屏的总横向宽度刚好能容下6张固定宽度的图加边距时就会显示正常，大屏多出的横向空间没有被规则分配到左右边距上，最终就会让两侧图片直接贴到屏幕边缘
• 约束绑定的参考对象错误：如果把图片的左右约束直接绑到了控制器根视图的边缘，没有关联Safe Area或容器视图的预设边距，约束计算时会忽略系统的安全边距要求，直接把图片顶到屏幕边缘
• 横向空间分配规则缺失：如果只给相邻图片之间加了固定间距约束，没有设置“最左图到父视图左边距、最右图到父视图右边距 和 相邻图间距完全相等”的约束关系，多出的横向空间会被全部分配到相邻图片的间隙里，最终压缩掉两侧的边距

快速修正的落地步骤 #

• 先给6张图片加一个统一的容器视图，容器视图的左右边缘绑定到父视图的Safe Area，设置统一的固定左右边距（例如16pt）
• 容器内部的6张图片全部设置等宽约束，相邻图片之间设置固定的统一间距（例如8pt）
• 删掉单张图片的固定宽度约束，让图片宽度通过容器的总可用宽度自动计算，不写死具体数值
• 每张图片下方的说明文本，单独设置中心对齐到对应图片的中心点，文本的横向约束不要跨图片绑定，避免出现位置偏移

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