如何在UIScrollView及Storyboard中布局可多方向滚动的横向图片？

核心原理 #

滚动视图（UIScrollView）的可滚动范围由其contentSize决定，在Storyboard中，contentSize是通过子视图的自动布局约束推导出来的。纵向方案可行是因为纵向约束撑大了contentSize.height，而横向失效通常是因为横向约束未形成完整链条，无法撑大contentSize.width。

分步实操 #

1. 配置滚动视图基础约束 #

• 在Storyboard中拖入UIScrollView，将其约束到父视图的leading、trailing、top、bottom四边（铺满父视图）。
• 不要给scrollView设置固定宽高，依赖父视图约束即可。

2. 添加容器视图（Container View） #

这是避免滚动视图布局混乱的关键，所有图片都放在这个容器里：

• 拖入UIView作为containerView，添加到scrollView内部。
• 将containerView的约束绑定到scrollView的Content Layout Guide的leading、trailing、top、bottom四边（不是scrollView本身的frame）。
• 不要给containerView设置固定宽高，其大小由内部图片的布局自动撑开。

3. 横向图片的布局（以网格多方向滚动为例） #

用嵌套UIStackView实现自动布局，确保横向能撑大contentSize：

• 拖入一个纵向UIStackView到containerView中，设置其Alignment为Fill，Distribution为Equal Spacing，Spacing设为需要的间距（比如16）。
• 给纵向StackView添加约束：绑定到containerView的leading、trailing、top、bottom四边，同时设置Width约束的优先级为250（低优先级，允许横向撑开）。
• 拖入多个横向UIStackView到纵向StackView中，每个横向StackView用来放一行横向图片：
  • 设置横向StackView的Alignment为Center，Distribution为Equal Spacing，Spacing设为16。
  • 拖入横向图片（宽>高）到每个横向StackView中，给图片设置固定宽高（比如宽300，高180），或者设置Aspect Ratio约束（比如16:9）。
  • 确保每个横向StackView的总宽度（图片宽度+间距）超过scrollView的宽度，这样scrollView就能横向滚动；纵向StackView的总高度超过scrollView高度时，就能纵向滚动。

4. 关键坑点排查 #

• 不要给containerView设置固定width：否则横向无法撑开contentSize，导致不能横向滚动。
• 必须使用Content Layout Guide：iOS 11+的scrollView新增了Content/Frame两个Guide，直接绑定scrollView本身的约束会导致布局混乱。
• 横向约束链条完整：从containerView的leading → 第一个图片的leading → 图片间的trailing/leading → 最后一个图片的trailing → containerView的trailing，形成完整的横向约束链，这样系统才能计算出contentSize.width。
• 图片不要设置width等于scrollView宽度：如果每个图片宽度都和scrollView一样，横向自然无法滚动，要确保图片总宽度超过scrollView宽度。

验证方法 #

在Storyboard中点击scrollView，查看右侧Size Inspector里的Content Size，如果Width大于scrollView的宽度，Height大于scrollView的高度，说明多方向滚动的条件已经满足。

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