优酷响应式在消费场景的落地之 iOS 篇( 二 ) 作者|阿里巴巴文娱技术金籽头

//更新播放器布局 [self refreshPlayerLayout]; //更新周边视频相关布局 [self refreshPageLeftLayout]; //更新分页模式下互动区布局 [self refreshPageRightLayout];}...页面布局的时候，通用的组件计算逻辑抽象成单例管理类YKDetailLayoutManager ，方便复用及代码收口，后续如发生需求变化通用部分只需要在管理类中修改即可：
@interface YKDetailLayoutManager : NSObject+(instancetype)sharedInstance;//横滑组件，坑位正常宽度-(CGFloat)horizontalComponentItemWidth; //横滑组件，坑位小模式宽度 -(CGFloat)horizontalComponentItemWidthSmall; //相关组件，坑位单列模式宽度-(CGFloat)aboutComponentSingleItemWidth; //相关组件，坑位多列模式宽度 -(CGFloat)aboutComponentDoubleItemWidth; //选集组件，坑位宽度 -(CGFloat)episodeComponentSeriesItemWidth; ...@end小屏模式下播放页半屏适配，播放页半屏是播放页特有的一种展示，在iPhone上半屏处于播放器的下方并撑满屏幕宽度，响应式下最大的变更是如果当前处于分页模式下，播放页半屏将展示在屏幕的右侧区域上面，适配重点就是收口半屏Frame ，当半屏页面初始化或者响应式状态变化的时候刷新半屏布局。
...- (CGRect)halfViewFrame{case1:当前是分页模式，返回右边互动区的framecase2:当前不是分页模式，返回播放器下面周边视频对应的frame}......- (void)responsiveLayoutDidChange{ //获取半屏的frame CGRect halfFrame = [self halfViewFrame]; //根据获得的半屏frame ，刷新半屏布局 [self refreshHalfViewWithFrame:halfFrame];}...2、竖全屏模式适配在iPhone上优酷播放器上层之前针对竖版视频推出过轻量级的竖全屏模式，只有竖版视频才存在这种状态，响应式布局在此基础上将这种模式推广到全部视频上，所以适配起来比较顺畅。
3、模式切换适配在iPad上模式切换变得比较复杂，新增了一些iPone上并不存在的case ，比如竖小屏模式切换到横小屏模式、横小屏模式切换到竖小屏模式、横全屏模式换到竖全屏模式、竖全屏模式切换到横全屏模式。我们的适配原则是：
1) 遵守播放器上层架构开发标准；
2) 对播放器上层架构侵入较小；
3) 代码聚合解耦。
最终方案是抽象出一个轻量级别的中间件来完成模式的切换，对原有架构实现无侵入插入，内部基本原理就是监听响应式的状态变化，根据当前的设备屏幕方向及当前播放页的模式，来动态改变播放页的模式并且刷新页面布局:
...- (void)responsiveLayoutDidChange{ case1: 当前设备是竖屏方向，当前模式是横左或横右全屏模式 , 主动切换到竖全屏模式case2: 当前设备是横左方向，当前模式是竖全屏模式, 主动切换到横左全屏模式case3: 当前设备是横右方向，当前模式是竖全屏模式, 主动切换到横右全屏模式 case4: 横小屏模式和竖小屏模式之间切换, 要强制刷一下}...4、分屏特性适配
iPad分屏特性如何处理呢？其实分屏只是动态的改变了显示Window的宽度，只要我们严格遵循原则按照Window的宽度去适配，上面的布局方式将会完美的应用于分屏特性，我们并不需要去做更多的工作来适配分屏。效果如下：
文章插图
文章插图
总结1、响应式适配的时候尽量避免到处打patch ，到处 if else 的去修改UI布局，原则上按照父 view大小来布局子view ，也可以使用自动布局等方案进行适配；
2、尽最大努力实现同样代码，在iPhone和iPad上都能完美运行；
3、充分梳理好当前的技术架构，提炼出适合自己的技术方案，要充分考虑可扩展性、可维护性、性能等诸多前置条件；
4、相信在不久的将来，移动端APP将会流畅的运行在MAC笔记本上，全平台打通大有可为。
文章插图
文章插图