企业官网建设流程全解析

简介：这份资源面向iOS应用开发者，聚焦视频与图片混合轮播这一常见但实现较复杂的界面需求，适用于社交媒体、电商、媒体播放等场景的轮播模块开发，适合已掌握Objective-C与Xcode基础、希望深入UICollectionView与AVFoundation的中级开发者参考。压缩包为zip格式，整体约5.64MB，上游未提供具体文件数量与类型明细，内容以工程源码与配套实现为主。资源围绕两种方案展开：一是基于UICollectionView自定义图片cell与视频cell，借助AVPlayerLayer播放视频并处理cell重用与手势滑动；二是基于SDCycleScrollView扩展视频播放能力，兼顾数据源切换与视频暂停续播逻辑。读者可从中获取可运行的轮播实现思路、视频与图片视图的切换处理方式，以及图片缓存、相邻视频预加载等性能优化参考，便于按项目技术栈灵活选型与二次定制。目前已有502人学习下载。

1. 一个 UICollectionView 里同时塞视频和图片，到底难在哪

做 iOS 信息流或者商品详情页的时候，产品经理最爱提的需求就是“顶部来一个轮播，图片和视频混着放，视频自动播、滑走就停”。听起来简单，真动手写才发现坑一个接一个：UICollectionView 的 cell 复用会让视频播放器在错误的时机被回收，AVPlayer 的实例管理稍不注意就内存暴涨，视频首帧和图片占位之间的切换还会闪一下白屏。这份 iOS 视频和图片混合轮播的源码包，就是围绕 Objective-C 技术栈把上面这些问题一次性处理掉的完整工程。它适合正在用 Xcode 做 iOS 客户端、需要落地混合媒体轮播的开发者，尤其是那种不想从零搭播放器生命周期、只想拿一份能跑的结构去改业务的人。下面我按“结构怎么搭、播放器怎么管、坑在哪、怎么验证”的顺序拆开讲。

2. 混合轮播的骨架：UICollectionView 分页与媒体类型分发

2.1 为什么用 UICollectionView 而不是 UIScrollView 手拼

很多人第一反应是拿 UIScrollView 加几个子 View 手动算偏移量，图片少的时候确实能跑，但一旦媒体数量上来、还要支持无限循环，手动管理 contentSize 和复用就会变成血泪经验。这份工程选的是 UICollectionView 配合UICollectionViewFlowLayout，把scrollDirection设成horizontal、isPagingEnabled设成YES，每个媒体占满一屏。这样分页、复用、滚动回调全部由系统接管，我们只需要在cellForItemAt里根据数据类型决定塞图片还是塞播放器。

核心的分发逻辑集中在一个数据模型上。工程里通常定义一个MediaItem，用枚举区分类型：

// MediaItem.h typedef NS_ENUM(NSInteger, MediaType) { MediaTypeImage = 0, MediaTypeVideo = 1, }; @interface MediaItem : NSObject @property (nonatomic, assign) MediaType type; @property (nonatomic, copy) NSString *mediaURL; // 图片或视频地址 @property (nonatomic, copy) NSString *coverImageURL; // 视频封面，图片类型可为空 @property (nonatomic, assign) NSTimeInterval duration; // 视频时长，图片为 0 @end

这段模型定义是整个轮播的分发依据。type决定 cell 走哪条渲染分支，coverImageURL是视频未播放时展示的占位图，避免首帧黑屏，duration留给进度条或者自动播放计时用。参数上要注意mediaURL用 copy 而不是 strong，防止外部可变字符串被改掉导致播放地址错乱，这是 Objective-C 里容易被忽略的细节。

数据源方法里做类型判断，把两种 cell 分开注册：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { MediaItem *item = self.mediaList[indexPath.item]; if (item.type == MediaTypeImage) { ImageCarouselCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ImageCell" forIndexPath:indexPath]; [cell configWithItem:item]; return cell; } else { VideoCarouselCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"VideoCell" forIndexPath:indexPath]; [cell configWithItem:item]; return cell; } }

这里的关键是两种 cell 用不同的 reuseIdentifier，绝不能让图片 cell 和视频 cell 共用一个池子，否则复用出来的 cell 类型对不上，轻则显示错乱，重则播放器挂到错误的视图上。configWithItem:里做具体的资源绑定，图片 cell 走 SDWebImage 之类的异步加载，视频 cell 只负责准备封面和播放器容器，真正的播放时机交给滚动回调控制。

2.2 无限循环的取模处理与索引映射

轮播基本都要无限循环，常见做法是把数据源复制三份，初始滚动到中间那份，滑到边界时无动画跳回中间。这份工程用的是取模方案，数据源只存一份真实数据，numberOfItemsInSection返回一个很大的数（比如mediaList.count * 1000），实际取数据时用indexPath.item % mediaList.count映射回真实索引。

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { // 放大数量制造无限滚动假象，取模映射回真实数据 return self.mediaList.count * 1000; } - (MediaItem *)itemAtIndexPath:(NSIndexPath *)indexPath { NSInteger realIndex = indexPath.item % self.mediaList.count; return self.mediaList[realIndex]; }

参数上1000不是随便写的，太小会在用户快速滑动时触顶，太大对内存没影响但要注意contentSize的计算精度，一般几百到一千都够用。初始位置要滚到中间段，scrollToItemAtIndexPath时把 item 设成mediaList.count * 500，这样左右都有足够缓冲。这里有个容易翻车的点：取模映射必须保证mediaList.count不为 0，数据源为空时要在外部直接隐藏轮播，否则取模会崩。

2.3 自动轮播的定时器与手动滑动冲突

自动轮播用NSTimer或者CADisplayLink都行，工程里用的是NSTimer配合scheduledTimerWithTimeInterval，间隔一般 3 到 5 秒。但定时器一旦和用户手动滑动撞上，就会出现“用户正在看视频，定时器把页面滑走了”的尴尬。处理办法是在scrollViewWillBeginDragging里 invalidate 定时器，在scrollViewDidEndDecelerating里重新起一个。

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { [self stopAutoScrollTimer]; // 用户接管，停掉自动轮播 } - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { [self startAutoScrollTimer]; // 手停下来再恢复 [self updateCurrentIndex]; // 同步当前页，供播放器判断 }

updateCurrentIndex里根据contentOffset.x / collectionView.bounds.size.width算出当前页，再取模得到真实索引，通知播放器管理器切换当前应该播放的视频。定时器一定要用 weak 引用 target 或者用 block 版本，避免循环引用导致控制器不释放，这是 Objective-C 里老生常谈但每次 review 都能抓到的坑。

3. AVPlayer 生命周期管理：让视频只在正确的 cell 上活着

3.1 播放器实例该放在 cell 还是管理器里

这是混合轮播最核心的选型问题。把AVPlayer直接塞进 cell，复用的时候播放器跟着 cell 到处跑，滑出屏幕的 cell 被回收进池子，播放器还在后台解码，内存和 CPU 双双起飞。这份工程的做法是单独抽一个VideoPlayerManager单例，全局只维护一个AVPlayer实例，cell 只提供一个playerContainerView作为播放器的显示载体。

// VideoPlayerManager.m + (instancetype)sharedManager { static VideoPlayerManager *instance; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ instance = [[VideoPlayerManager alloc] init]; instance.player = [[AVPlayer alloc] init]; }); return instance; } - (void)attachPlayerToView:(UIView *)containerView { AVPlayerLayer *layer = [AVPlayerLayer playerLayerWithPlayer:self.player]; layer.frame = containerView.bounds; layer.videoGravity = AVLayerVideoGravityResizeAspectFill; [containerView.layer addSublayer:layer]; self.currentLayer = layer; }

单例持有AVPlayer，attachPlayerToView:负责把AVPlayerLayer挂到目标容器的 layer 上。参数上videoGravity用AVLayerVideoGravityResizeAspectFill让视频填满容器，配合 cell 的clipsToBounds = YES裁掉溢出部分。这里要注意每次 attach 前先把旧的 layer 从父 layer 上移除，否则多次 attach 会叠出好几层，表现为视频画面重影或者闪烁。

3.2 滚动停止时才切换播放源

播放器只有一个，那什么时候换视频？答案是滚动停下来、当前页确定之后。在scrollViewDidEndDecelerating和scrollViewDidEndScrollingAnimation两个回调里统一处理，取当前页对应的MediaItem，如果是视频类型就替换AVPlayerItem并播放，如果是图片类型就暂停播放器、把 layer 隐藏。

- (void)switchToItem:(MediaItem *)item inCell:(VideoCarouselCell *)cell { if (item.type != MediaTypeVideo) { [self.player pause]; self.currentLayer.hidden = YES; return; } self.currentLayer.hidden = NO; NSURL *url = [NSURL URLWithString:item.mediaURL]; AVPlayerItem *playerItem = [AVPlayerItem playerItemWithURL:url]; [self.player replaceCurrentItemWithPlayerItem:playerItem]; [self attachPlayerToView:cell.playerContainerView]; [self.player play]; }

replaceCurrentItemWithPlayerItem:是切换播放源的标准入口，比重新创建AVPlayer省资源。注意替换之后要重新 attach layer，因为 cell 可能已经换了一个。play之前最好判断一下playerItem.status，网络视频加载有延迟，直接 play 可能黑屏几百毫秒，工程里一般配合 KVO 监听status == AVPlayerItemStatusReadyToPlay再真正起播，封面图在这段时间顶着，观感就顺了。

3.3 静音、循环与后台暂停的默认策略

信息流里的自动播放视频基本都要求静音，否则用户一滑就被声音吓到。AVPlayer的muted属性直接设YES即可。循环播放则监听AVPlayerItemDidPlayToEndTimeNotification，收到后seekToTime:kCMTimeZero再 play。

- (void)playerItemDidReachEnd:(NSNotification *)notification { [self.player seekToTime:kCMTimeZero]; [self.player play]; }

后台暂停靠监听UIApplicationDidEnterBackgroundNotification，进后台就 pause，回前台根据当前页决定是否恢复。这几个策略看起来琐碎，但少了任何一个，用户都能立刻感知到不对劲。参数上seekToTime:用kCMTimeZero而不是CMTimeMake(0, 1)，语义更清晰，精度也够。

4. 避坑清单：混合轮播最容易翻车的五个地方

4.1 现象：滑走再滑回来，视频黑屏不播

原因通常是 cell 复用时旧的AVPlayerLayer没清理，新 layer 挂上去被旧的挡住，或者AVPlayerItem还停留在上一个视频的加载状态。解决方式是在 cell 的prepareForReuse里把容器 layer 的子 layer 清空，并在switchToItem:里强制先pause再替换 item，替换后重新 attach。我一般会在 attach 前加一句[self.currentLayer removeFromSuperlayer]，把旧层彻底摘掉。

4.2 现象：快速滑动时内存曲线一路往上

这是播放器实例泄漏的典型表现。检查VideoPlayerManager是否被 cell 强引用、KVO 观察者有没有在 dealloc 里移除、通知有没有反注册。另一个隐蔽点是AVPlayerItem的preferredForwardBufferDuration没设，默认缓冲策略在弱网下会囤大量数据。常见做法是设成 2 到 5 秒，既保证起播速度又不至于吃内存。

4.3 现象：自动轮播和视频播放打架，视频刚播两秒就被滑走

定时器间隔小于视频时长，用户还没看完就切页。解决方式是在视频页把自动轮播间隔拉长到视频时长加 2 秒，或者干脆视频页暂停自动轮播，等播放结束再恢复。工程里可以在switchToItem:里根据item.duration动态调整定时器间隔，图片页用默认 3 秒，视频页用duration + 2。

4.4 现象：首帧出来前有一块白，封面图没顶住

coverImageURL为空或者加载慢，视频 layer 又是透明的，露出 cell 背景色。解决方式是给playerContainerView设一个和封面图主色调接近的背景色兜底，同时封面图用异步加载并缓存，AVPlayerItem的status没到 ready 之前不要隐藏封面。参数上封面图建议用和视频同比例的尺寸，避免aspectFill裁切后和首帧对不上产生跳变。

4.5 现象：横竖屏切换后播放器画面错位

AVPlayerLayer的 frame 是 attach 时写死的，旋转后容器尺寸变了但 layer 没跟着变。解决方式是在 cell 的layoutSubviews里同步更新currentLayer.frame = containerView.bounds，或者监听viewWillTransitionToSize重新 attach。这个坑在只做竖屏的工程里不明显，一旦支持横屏就会暴露，提前处理省得后面返工。

5. 验证与调优：用 Instruments 和几个断言把轮播压到稳定

拿到这份工程改完业务之后，别急着提测，先自己压一遍。第一步开 Instruments 的 Allocations 和 Leaks，反复滑动轮播五十次以上，看AVPlayer和AVPlayerItem的实例数是否稳定在一个常数附近。正常情况全局只有一个AVPlayer，AVPlayerItem在切换时旧的要能被释放，如果实例数随滑动次数线性增长，说明替换逻辑里有强引用没断干净。

第二步用 Time Profiler 看滚动时的 CPU 占用，混合轮播在快速滑动时如果 CPU 飙到 60% 以上，多半是封面图解码或者 layer 重建太频繁。可以给图片加载加一层内存缓存，给 layer 的 attach 做防抖，只在滚动真正停下来之后才执行。

第三步写几个断言辅助自测，比如在switchToItem:里断言item.mediaURL.length > 0，在attachPlayerToView:里断言containerView != nil，把低级错误挡在开发期。下面这个检查方法我习惯放在调试包里，每次切页调一次：

- (void)debugValidateCurrentState { NSAssert(self.mediaList.count > 0, @"媒体列表为空，轮播不应展示"); NSInteger current = [self currentRealIndex]; MediaItem *item = self.mediaList[current]; if (item.type == MediaTypeVideo) { NSAssert(self.player.currentItem != nil, @"视频页播放器无 item"); NSAssert(self.currentLayer.superlayer != nil, @"播放器 layer 未挂载"); } }

currentRealIndex用contentOffset除以页宽再取模得到，断言只在 DEBUG 宏里生效，Release 包自动剔除。这套自检跑通之后，再拿真机在弱网下过一遍，重点看视频起播时间和封面切换是否平滑。

最后说个习惯。我早些年做类似轮播的时候，总觉得“能播就行”，结果线上一旦出现播放器泄漏，排查成本高得离谱，因为问题往往在用户滑了几十次之后才显现。从那以后我每次接混合媒体轮播，都强制先跑一遍 Instruments 的实例数对比，再上真机滑五十次，确认内存曲线是平的才往下写业务。这份工程的结构已经把大部分脏活干完了，你要做的就是把数据模型和业务字段对上，剩下的生命周期交给管理器。希望帮到你。

本文还有配套的精品资源，点击获取