如何在Storyboard创建的横向Scroll View中放置4个视频？

一、核心问题排查 #

你当前代码直接把AVPlayerLayer加到了控制器的根view上，完全没关联到Scroll View，这就是视频不受Scroll View约束的根本原因。要实现需求，必须把视频容器嵌套到Scroll View的内容视图里，再通过布局方案实现横向并排。

二、Storyboard基础结构调整 #

先确认你的界面层级和约束：

• Scroll View需添加到控制器根View上，设置上下左右约束为0，撑满父视图
• 给Scroll View添加默认的Content View，给它设置：
  • 上下左右约束与Scroll View边缘对齐
  • 高度约束等于Scroll View的高度（固定内容视图高度，确保视频不会超出Scroll View范围）
  • 宽度约束暂不设置，后续由子视图自动撑开以实现横向滚动

三、视频并排布局方案（两种可选） #

方式1：UIStackView（推荐，类似CSS Flexbox逻辑） #

这是最适配的布局方式，和网页弹性布局逻辑一致：

1. 在Content View内添加UIStackView，设置：
   • 布局方向为Horizontal（横向）
   • 对齐方式为Fill
   • 分布方式选Equal Spacing或Equal Centering（控制视频间的间距）
   • 给StackView设置上下左右约束为0，高度约束与Content View绑定
2. 为每个视频创建UIView作为容器（承载AVPlayerLayer），将这些容器加入StackView
3. 给每个视频容器设置宽度约束（比如设为Scroll View宽度的1/4，或固定宽度）

方式2：手动Auto Layout约束（精准控制布局） #

如果需要更精细的布局控制，可手动给每个视频容器加约束：

• 第一个视频容器：左对齐Content View左侧，上下与Content View对齐，设置目标宽度
• 第二个视频容器：左对齐第一个容器右侧，上下对齐Content View，宽度与第一个一致，设置间距值
• 第三、第四个视频容器以此类推
• 最后一个视频容器：右对齐Content View右侧，让Content View宽度自动被撑开，触发横向滚动

四、代码修改：将视频绑定到容器 #

以StackView方案为例，代码调整如下：

import AVKit
import AVFoundation
import UIKit

class ViewController: UIViewController {
    // 从Storyboard拖入StackView的IBOutlet
    @IBOutlet weak var videoStackView: UIStackView!
    
    // 视频文件名列表
    let videoNames = ["final-S3-r1", "video2", "video3", "video4"]

    override func viewDidLoad() {
        super.viewDidLoad()
        setupVideos()
    }
    
    func setupVideos() {
        for name in videoNames {
            // 创建视频容器View
            let videoContainer = UIView()
            videoContainer.translatesAutoresizingMaskIntoConstraints = false
            // 设置容器宽度（示例为固定200，可根据需求调整）
            videoContainer.widthAnchor.constraint(equalToConstant: 200).isActive = true
            
            // 初始化播放器与图层
            guard let videoPath = Bundle.main.path(forResource: name, ofType: "mp4"),
                  let url = URL(fileURLWithPath: videoPath) else { continue }
            
            let player = AVPlayer(url: url)
            let playerLayer = AVPlayerLayer(player: player)
            playerLayer.frame = videoContainer.bounds
            playerLayer.videoGravity = .resizeAspect // 保持视频比例，避免拉伸
            videoContainer.layer.addSublayer(playerLayer)
            
            // 播放配置
            player.volume = 0
            player.play()
            
            // 将容器加入StackView
            videoStackView.addArrangedSubview(videoContainer)
        }
    }
}

五、关键注意事项 #

• 禁止直接将AVPlayerLayer加到控制器根View，必须嵌套到Scroll View的内容视图容器中
• Content View的高度约束必须与Scroll View绑定，确保视频高度被限制在Scroll View范围内
• 通过playerLayer.videoGravity控制视频显示比例，避免变形
• 如需循环播放，可给AVPlayer添加NotificationCenter监听，播放结束后重置播放位置

内容的提问来源于stack exchange，提问作者Ballin'Oates