简介面向iOS开发者的视频与图片混合轮播实现方案资源涵盖UICollectionView自定义轮播与SDCycleScrollView扩展两条技术路径。内容围绕AVFoundation框架的视频播放、AVPlayerLayer嵌入视图、cell复用、手势滑动与无缝轮播展开适合对Objective-C有基础、需要构建媒体类界面的移动端开发者。压缩包约5.64MB代码封装清晰可直接结合项目改造使用。两种方案各有侧重前者灵活可控便于深度定制图片与视频cell后者开发效率高适合快速集成。同时资料提到利用Kingfisher或YYImage进行图片异步加载与缓存并给出视频预加载、播放暂停衔接等性能优化思路能帮助阅读者避开常见的内存泄漏与滑动卡顿问题。目前已有500人学习下载可作为实战参考。整体内容聚焦轮播组件与播放能力的组合设计是一份兼顾原理与落地的iOS开发参考资料。1. iOS 视频和图片混合轮播为什么值得把它做成一个独立组件你可能也遇到过这种需求首页 Banner 位或运营活动位要求同一个轮播里既能放图片又能放视频。图片倒好办视频一进来问题就全冒出来了——播放器黑屏、内存暴涨、循环切页跳变、图片和视频切换闪白。这套 iOS 视频和图片混合轮播的 .zip 源码包拆开来看并不是什么玄学魔法它要解决的就一件事让图片和视频在一个可循环滑动的容器里各自把生命周期管好互不干扰。适合正在做首页运营位改造的 iOS 团队也适合想往现有 App 里加一个混合 Banner 又不想从零写轮播的人。我按工程思路把实现、参数和坑一次讲完你照着做就能复现。2. 选型CollectionView 骨架和 Cell 复用策略凭什么更稳2.1 不用 ScrollView 手写子视图的核心理由第一版我做轮播时也用过 ScrollView, 一个页面塞一个 view看起来挺直接。等运营把需求改成“两图两视频”以后问题立刻暴露ScrollView 里的子 view 全部常驻内存AVPlayer 一旦创建就不会主动退场你必须自己写一套“离开视野就暂停/释放”的判定逻辑还要自己处理手势冲突、子 view 的 frame 布局和循环拼接。这套东西做完基本等于自己重写了一个半成品 collectionView而且性能和复用都跟不上。所以我后来统一用 UICollectionView。横向 FlowLayout 加 pagingEnabled一个 cell 占满一屏宽度系统帮我管理复用池视频滑出屏幕后didEndDisplaying是可靠的回收时机图片 cell 和视频 cell 注册成两个不同的复用标识各走各的prepareForReuse互不污染。这是做混合轮播最稳的骨架也是业内最常见的做法。2.2 数据模型一个数组装下图片和视频混合轮播第一步不是写 UI而是把数据模型定好。不要为了省事搞两个数组分别存图片和视频再在 cellForItemAt 里拿 index 去猜类型那个方案一加运营配置就崩。我一般用一个MediaItem结构体内部用枚举标记类型图片和视频字段共用一套 URL 和占位图enum MediaType { case image case video } struct MediaItem { let type: MediaType let url: URL let placeholder: UIImage? var videoLoop: Bool true }模型里不要直接放UIImage或AVPlayer实例保持轻量。url支持网络地址也支持本地 file:// 地址比如工程里打包的测试视频。placeholder的作用非常重要图片还没加载出来时撑住布局视频首帧没就绪时撑住画面后面讲“闪白”的坑时会专门提它。2.3 Cell 注册与复用两类 Cell 各司其职collectionView 创建好之后第一时间把图片 cell 和视频 cell 分别注册。注册时机放在 viewDidLoad或者轮播视图初始化时一次性搞定复用标识字符串用静态常量防止手滑打错字符串导致重复注册崩溃collectionView.register(ImageCell.self, forCellWithReuseIdentifier: ImageCell.reuseID) collectionView.register(VideoCell.self, forCellWithReuseIdentifier: VideoCell.reuseID) collectionView.delegate self collectionView.dataSource self在cellForItemAt里按类型分发。注意数组下标要做取模因为我们后面会用“三段复制”的方式做假无限循环原始 index 和虚拟 index 之间差着一组数据长度func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) - UICollectionViewCell { let item items[indexPath.item % items.count] switch item.type { case .image: let cell collectionView.dequeueReusableCell( withReuseIdentifier: ImageCell.reuseID, for: indexPath) as! ImageCell cell.bind(url: item.url, placeholder: item.placeholder) return cell case .video: let cell collectionView.dequeueReusableCell( withReuseIdentifier: VideoCell.reuseID, for: indexPath) as! VideoCell cell.bind(url: item.url, loop: item.videoLoop) return cell } }这段代码的逻辑核心是“只根据类型选择 cell不关心当前是第几个轮播页”。取模运算保证了三段虚拟数组里任意下标都能映射回真实的 MediaItem。至于主屏幕展示几张图、itemSize 设多宽跟你在 Swiper 里配 slidesPerView 是一个思路一张就 cell 宽度等于屏幕宽两张或三张就按比例算出 item 宽度layout 上改一个参数就行。3. 最小可跑工程循环、视频 Cell 和定时器互相不打架的写法3.1 假无限循环数据数组三段复制滑动结束精准归位轮播图不允许停在首尾所以要做“假无限循环”。最稳妥的做法并不是在 scrollViewDidScroll 里判断偏移量后改 contentOffset, 而是把数组复制成三份让用户怎么滑都滑不到头滑完以后在无动画状态下悄悄回到中间一组对应的位置。func setItems(_ newItems: [MediaItem]) { guard !newItems.isEmpty else { return } items newItems virtualItems newItems newItems newItems collectionView.reloadData() collectionView.layoutIfNeeded() let initialIndex IndexPath(item: newItems.count, section: 0) collectionView.scrollToItem(at: initialIndex, at: .centeredHorizontally, animated: false) } private func realIndex(of indexPath: IndexPath) - Int { indexPath.item % items.count } private func currentVirtualIndex() - Int { let width collectionView.bounds.width guard width 0 else { return 0 } let offset collectionView.contentOffset.x return Int((offset / width).rounded()) } private func repositionIfNeeded() { let current currentVirtualIndex() let middleStart items.count let middleEnd items.count * 2 - 1 if current middleStart || current middleEnd { let target middleStart current % items.count collectionView.scrollToItem( at: IndexPath(item: target, section: 0), at: .centeredHorizontally, animated: false ) } }初始化时直接滚动到items.count这个位置正好是中间那一组的第一个真实元素。repositionIfNeeded的取模计算我用一个例子验证给你看假设原始数组 4 个元素虚拟数组下标 0~11中间组起点是 4。用户滑到下标 2也就是第一组末尾附近目标位置是4 2 % 4 6对应中间组的第 3 个真实元素类型完全一致滑到下标 10目标位置是4 10 % 4 6同样能对应上。归位全程无动画用户感知不到。3.2 视频 Cell 里的 AVPlayer 生命周期管理视频 cell 是整个混合轮播最容易翻车的地方。我在实际项目里把 VideoCell 写成了一个独立类内部统一托管 AVPlayer 的创建、播放、暂停和销毁。核心逻辑在bind方法里先判断 URL 是否变化没变化就直接 return避免快速滑动时同一个 cell 反复重建播放器。final class VideoCell: UICollectionViewCell { static let reuseID VideoCell private var player: AVPlayer? private var playerLayer: AVPlayerLayer? private var currentURL: URL? private var loopObserver: NSObjectProtocol? func bind(url: URL, loop: Bool true) { if currentURL url { return } teardownPlayer() currentURL url let playerItem AVPlayerItem(url: url) let player AVPlayer(playerItem: playerItem) player.isMuted true player.actionAtItemEnd loop ? .none : .pause if loop { loopObserver NotificationCenter.default.addObserver( forName: .AVPlayerItemDidPlayToEndTime, object: playerItem, queue: .main ) { [weak self] _ in playerItem.seek(to: .zero) { _ in self?.player?.play() } } } let layer AVPlayerLayer(player: player) layer.videoGravity .resizeAspectFill layer.frame contentView.bounds contentView.layer.sublayers?.forEach { $0.removeFromSuperlayer() } contentView.layer.insertSublayer(layer, at: 0) self.player player self.playerLayer layer player.play() } override func prepareForReuse() { super.prepareForReuse() teardownPlayer() } private func teardownPlayer() { player?.pause() if let loopObserver { NotificationCenter.default.removeObserver(loopObserver) } playerLayer?.removeFromSuperlayer() player nil playerLayer nil loopObserver nil currentURL nil } }这段代码有几个关键参数值得细说。isMuted true是轮播场景的硬性要求绝大多数运营位不希望视频突然出声打扰用户。actionAtItemEnd .none的意思是播放到末尾不自动做任何动作循环逻辑完全交给 Notification 回调里的seek(to: .zero)处理我不用.repeat是因为它在部分网络流媒体上会出现 seek 过快导致黑屏的怪毛病。resizeAspectFill让视频画面像图片一样铺满 cell不会出现黑边。teardownPlayer里我把 Notification observer 也一并移除否则 cell 复用后旧播放器的循环事件会串到新播放器上。3.3 自动轮播定时器与用户手势的互斥定时器写法看似简单实际上手滑到一半被轮播强行拉走是用户反馈最强烈的体验问题。我的做法是用户开始拖拽时立刻停掉定时器等滚动完全停止后再重新启动同时用一个isDragging标记兜底。private var timer: Timer? private var isDragging false private func startAutoPlay() { stopAutoPlay() timer Timer.scheduledTimer(withTimeInterval: 3.0, repeats: true) { [weak self] _ in guard let self, !self.isDragging else { return } self.scrollToNext() } } private func stopAutoPlay() { timer?.invalidate() timer nil } private func scrollToNext() { let nextIndex currentVirtualIndex() 1 collectionView.scrollToItem( at: IndexPath(item: nextIndex, section: 0), at: .centeredHorizontally, animated: true ) } func scrollViewWillBeginDragging(_ scrollView: UIScrollView) { isDragging true stopAutoPlay() } func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { isDragging false repositionIfNeeded() startAutoPlay() } func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) { isDragging false repositionIfNeeded() startAutoPlay() }关键点是didEndDecelerating和didEndScrollingAnimation这两个回调都要处理前者对应手指拖拽后的惯性滚动结束后者对应代码调用scrollToItem(animated: true)的滚动结束。只处理前者定时器驱动的自动翻页结束后就不会重启轮播这是一个非常隐蔽的坑。4. 播放器参数调优静音、缓冲和首帧预加载的 3 个关键点4.1 音频会话和循环的协作方式轮播视频静音后还需要考虑系统音频会话。如果你不设置 AVAudioSessionApp 可能会走默认 playback 模式导致用户开着静音开关时视频播放异常或者在播放过程中把其他 App 的音乐打断。正确的做法是把会话类别设为ambienttry? AVAudioSession.sharedInstance().setCategory(.ambient, mode: .default) try? AVAudioSession.sharedInstance().setActive(true)ambient类别的意思是“声音可以与其它音频共存受静音开关控制”。轮播视频本来就是无声的这么做不会影响用户同时避免音频会话抢占。这个调用建议在轮播视图初始化时执行一次即可。循环播放我坚持用 NotificationCenter 监听AVPlayerItemDidPlayToEndTime再加seek(to: .zero)。这个方案比actionAtItemEnd .repeat多一行代码但可靠得多repeat 模式在某些 HLS 流和弱网场景下会偶尔黑屏一帧而手动 seek 可以在回调里确认 seek 完成后再 play节奏更可控。4.2 预缓冲preferredForwardBufferDuration 不是越大越好视频轮播最怕滑到新页面后白屏等加载所以预缓冲是必须做的。AVPlayerItem 有一个属性叫preferredForwardBufferDuration用来告诉播放器至少缓冲多少秒再开始播放let asset AVURLAsset(url: url) let playerItem AVPlayerItem(asset: asset) playerItem.preferredForwardBufferDuration 10 let player AVPlayer(playerItem: playerItem)我给的值一般是 10 秒。这个值太短弱网下容易起播后频繁卡顿太长也不推荐比如你设置 30 秒轮播视频本身才 15 秒播放器会一直抢带宽下载影响同一列表里其它内容的加载。preferredForwardBufferDuration本质是一个软性提示播放器不一定严格按这个值执行但设了以后明显比默认值更稳。如果运营位视频源是自己公司 CDN 控制的我还会要求后端支持 Range 请求这样播放器 seek 和预加载都会顺畅很多。4.3 图片加载和解码避免主线程卡顿混合轮播里图片的加载同样不能忽视尤其运营图经常是 3MB 以上的大图。ImageCell 内部我一般接 SDWebImage 或 Kingfisher 这类成熟库它们已经把磁盘缓存、内存缓存、异步解码都做完了。如果你不想引入第三方库至少要保证两点一是在后台线程下载数据二是在主线程 setImage并且对超过 cell 尺寸数倍的大图做降采样。final class ImageCell: UICollectionViewCell { static let reuseID ImageCell private let imageView UIImageView() func bind(url: URL, placeholder: UIImage?) { imageView.image placeholder imageView.setImage(with: url) // 内部走异步加载和解码 } }实际项目中我会按“一屏宽 屏幕 scale”算出最大像素尺寸再用CGImageSourceCreateThumbnailAtIndex生成缩略图避免一张 4000×3000 的图直接进 cell 导致内存爆掉。图片固定尺寸显示的需求则统一在 ImageCell 里约束 imageView 的 contentMode 为scaleAspectFill再加 clipsToBounds不要依赖外部传 frame。5. 混合轮播避坑指南5 个典型翻车现场和解决办法5.1 视频 Cell 黑屏但声音正常现象滑到视频页画面全黑但能听到声音在播放。原因AVPlayerLayer 的 frame 没有跟随 contentView 的 bounds 更新。有时候 cell 创建时 bounds 还是 zero你把 layer 加进去了等 layout 完成后 layer 的 frame 仍然停留在初始状态于是画面看不到但播放器逻辑照常跑声音就正常。解决在 VideoCell 里重写layoutSubviews每次内容视图布局变化时同步 layer.frameoverride func layoutSubviews() { super.layoutSubviews() playerLayer?.frame contentView.bounds }这个坑几乎每个手写 AVPlayerLayer 的轮播都会遇到属于必踩项。5.2 快速滑动内存飙升被系统杀死现象用户快速连续滑动轮播内存从 100MB 一路涨到 500MB 以上最后 crash。原因cell 滑出屏幕后不会立刻归还复用池如果每个 cell 都保留了一个 AVPlayer相当于同时存在 3~4 个播放器在后台缓冲视频。AVPlayer 内部有解码器、音频会话和视频缓冲池单个占用轻松达到几十 MB叠加起来内存直接失控。解决在 collectionView 的didEndDisplaying回调里对离屏的 VideoCell 主动释放播放器func collectionView(_ collectionView: UICollectionView, didEndDisplaying cell: UICollectionViewCell, forItemAt indexPath: IndexPath) { if let videoCell cell as? VideoCell { videoCell.pauseAndRelease() } }我在 VideoCell 里单独暴露了一个pauseAndRelease方法只暂停和释放播放器但保留封面图这样滑回去还能看到封面不用重新加载图片。5.3 定时器和手势打架自动轮播频繁打断现象用户手指刚放到屏幕上准备滑动轮播自己跳走了或者用户滑完还没停稳又自动切了一页。原因定时器没有在用户交互时停止。scrollViewWillBeginDragging触发后程序化scrollToItem依然执行导致两种滚动互相抢占 contentOffset。解决上一章已经给出完整代码核心就是willBeginDragging里stopAutoPlaydidEndDecelerating和didEndScrollingAnimation里统一重启。我还会在定时器闭包里加一层isDragging判断这是双保险防止极端情况下回调顺序异常导致定时器在拖拽中触发。5.4 图片切到视频时闪白现象从图片页滑到视频页先白屏一下然后视频画面才慢慢出来。原因视频 cell 的背景色默认是白色AVPlayer 首帧没有就绪第一帧画面没渲染出来就直接露底了。如果再去掉旧 cell 的图片空白窗口期更长。解决给 VideoCell 的背景设置一个深色或图片色并且在 bind 时把placeholder图片先显示出来等播放器状态变成readyToPlay后再切入视频画面。不要等到视频就绪才显示 cell先用占位图撑住视觉连续性。5.5 首尾循环跳变索引对不上现象从最后一张滑到第一张页面连跳两次或者直接白屏滑过头。原因假无限循环里reposition 的目标位置计算错误。常见的错误写法是target current - items.count在滑过中间区域后这个公式会指向错误的位置而且scrollToViewDidEndDecelerating在快速滑动时未必每一帧都可靠回调。解决用第 3 章写的repositionIfNeeded目标位置统一为middleStart current % items.count并且在didEndScrollingAnimation里也做一次归位。如果发现快速滑动时界面穿帮可以把collectionView.isPagingEnabled true和decelerationRate .fast配起来测几轮归位逻辑必须保证无动画且立即执行。6. 轮播体验上限预取、弱网降级和埋点验收技巧6.1 预取下一屏比定时器快半拍轮播不是等滑到那一页才开始加载视频。我一般会在当前页稳定后主动预创建下一个 MediaItem 的 AVPlayerItem但不挂到任何 cell 上只做缓冲。这个动作的时机放在scrollViewDidEndDecelerating之后预取范围为currentIndex 1和currentIndex 2两个位置。private func preloadNextItems() { let nextIndex1 (currentVirtualIndex() 1) % items.count let nextIndex2 (currentVirtualIndex() 2) % items.count for idx in [nextIndex1, nextIndex2] { let item items[idx] guard item.type .video else { continue } let asset AVURLAsset(url: item.url) let playerItem AVPlayerItem(asset: asset) playerItem.preferredForwardBufferDuration 10 // playerItem 在这里持有一会儿触发缓冲 preloadedItems[idx] playerItem } }注意预取不要无限做最多提前两屏就够了。多出来的 AVPlayerItem 会占用网络带宽和内存轮播场景下用户未必会连续滑很多屏预取过多反而拖慢首屏展示。6.2 弱网降级到封面图视频加载不是永远可靠的尤其运营位上网络环境复杂。我习惯在 VideoCell 的 bind 方法里对网络视频监听AVPlayerItem.status和网络切换通知发现超过 5 秒未能进入readyToPlay就自动切换回该视频的封面图片并把播放按钮隐藏。这个降级策略不必做得复杂核心是别让用户盯着一个白屏看。playerItem.addObserver(self, forKeyPath: #keyPath(AVPlayerItem.status), options: [.new, .initial], context: nil)KVO 回调里如果发现.failed就调用 ImageView 显示 placeholder。如果后续网络恢复用户手动重滑一次就会重新触发 bind加载新的播放器实例。6.3 用埋点验证轮播质量轮播做完不是看功能能跑就上线。我会重点埋三个指标视频首帧时间、播放卡顿次数、内存峰值占用。首帧时间从bind(url:)开始算到 AVPlayerLayer 第一个画面渲染出来截止卡顿次数用播放器timeControlStatus变更为.waitingToPlayAtSpecifiedRate的次数来统计内存峰值在didEndDisplaying前后采样一次。这三个指标连续观察三天首帧中位数不超过 500ms、卡顿次数接近于 0才敢说这套混合轮播可以推上线。我自己的血泪经验是很多 bug 在模拟器上根本看不出来真机弱网测才会有收获。把遮罩、占位图、播放器释放这三件事先做好混合轮播就算成功了一半。希望这套实现能帮你少走几步弯路。本文还有配套的精品资源点击获取