前言
"美课+"项目从2018年3月26号开始启动到2018年6月8号结束,总计两个月多的时间,项目的时间节点比较紧张.虽然最后没有上线很遗憾,但是,不管是在流程和项目上,对自己都是一次不错的尝试.下面我就对这次项目做一下iOS端的整体总结.
#### 技术难点 *** 在iOS端,我感到的项目技术难点或者是比较费时的技术点主要有以下几点,分别为播放器的定制,下载模块逻辑,图库转场动画逻辑三大模块.下面我分别来说一下这三个模块的详情情况.
播放器模块是"美课+"项目的核心模块,主要有两个地方需要用到播放器,一个是课程,另外一个是直播.播放器接入的是网易点播播放器,接入集成的过程比较简单,修改播放器本身的时间大多都放在了播放器的控制器层面上了.课程模块需要使用逻辑是最多的,比如.由于课程模块本身页面需要做成滑动锁定模式,所以我们需要根据不同的状态来修改不同的控制器的各个控件的位置以及尺寸问题,同时,为了更好的解耦,这里我使用了代理模式来对业务逻辑进行解耦.例如,在状态栏的显示与隐藏上,这里就使用了回调.这里我说一下遇到的两个问题.
遇到的第一个问题就是横竖屏切换问题,一开始的时候我想用两个控制器来做横竖屏切换,后来发现这样做会出现的问题就是视频播放不同步,难道我们到做两个PlayView,显然是不符合我们的思维逻辑后,后来觉得使用一个PlayView即可,监控屏幕的旋转,然后对其使用动画即可实现横竖屏切换效果.
本来一切是正常的,可是当用户快速的从左横屏→竖屏→右横屏的时候就会出现PlayView的尺寸显示不正确的问题了.原因是当左横屏→竖屏的动画还未完成时(动画过程需要0.3s),设备已经完成了从竖屏到右竖屏的过程了,解决方案就是一个BOOL值,判断从横屏到竖屏的动画是否完成,如果完成了,再检测设备是否横屏状态,如果是横屏状态,那就再次进行横屏的动画,这样就解决了动画错乱的问题了.整体代码如下所示.
//加入通知回调
[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(rotateViews:)
name:UIDeviceOrientationDidChangeNotification
object:nil];
主要实现代码如下所示.
//屏幕旋转的主要操作方法
- (void) rotateViews:(NSObject *)sender {
if (_screenControlView.lockButton.selected) {
return;
}
if (!_isStartPLay) {
return;
}
UIDevice* device = [sender valueForKey:@"object"];
_screenControlView.menuViewHidden = YES;
if (device.orientation == UIDeviceOrientationPortrait && _isFullScreen) {
CGFloat duration = [UIApplication sharedApplication].statusBarOrientationAnimationDuration;//时间
_isFullScreen = NO;
_screenControlView.isFullScreen = NO;
[UIView animateWithDuration:duration animations:^{
CGFloat nowWidth = 0;
if (KmainWidth > KmainHeight) {
nowWidth = KmainHeight;
}else{
nowWidth = KmainWidth;
}
NSLog(@"竖进行");
if (self.isError) {
self.errorView.frame = CGRectMake(0, 0, nowWidth, nowWidth/16.0*9);
self.reloadButton.center = self.errorView.center;
self.errorLabel.frame = CGRectMake(_errorView.center.x - self.errorLabel.frame.size.width/2.0, CGRectGetMinY(_reloadButton.frame) - 21 - 18, self.errorLabel.frame.size.width, 21);
}
self.playView.frame = CGRectMake(0, 0, nowWidth, nowWidth/16.0*9);
self.screenControlView.frame = CGRectMake(0, 0, nowWidth, nowWidth/16.0*9);
self.screenControlView.shadeView.frame = CGRectMake(0, 0, nowWidth, nowWidth/16.0*9);
self.isPortraitFinished = NO;
} completion:^(BOOL finished) {
NSLog(@"竖完成");
self.isPortraitFinished = YES;
[[UIApplication sharedApplication] setStatusBarHidden:NO];
[self portraitFinishaNextAction];
}];
}
if (device.orientation == UIDeviceOrientationLandscapeLeft && !_isFullScreen) {
CGFloat duration = [UIApplication sharedApplication].statusBarOrientationAnimationDuration;//时间
_isFullScreen = YES;
_screenControlView.isFullScreen = YES;
[_playView addSubview:self.screenControlView];
[UIView animateWithDuration:duration animations:^{
if (self.isPortraitFinished != NO) {
if (self.isError) {
self.errorView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
self.reloadButton.center = self.errorView.center;
self.errorLabel.frame = CGRectMake(_errorView.center.x - self.errorLabel.frame.size.width/2.0, CGRectGetMinY(_reloadButton.frame) - 21 - 18, self.errorLabel.frame.size.width, 21);
}
self.playView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
self.screenControlView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
self.screenControlView.shadeView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
NSLog(@"左右进行");
}
}completion:^(BOOL finished) {
[[UIApplication sharedApplication] setStatusBarHidden:YES];
NSLog(@"左右完成");
}];
}
if (device.orientation == UIDeviceOrientationLandscapeRight && !_isFullScreen) {
CGFloat duration = [UIApplication sharedApplication].statusBarOrientationAnimationDuration;//时间
_isFullScreen = YES;
_screenControlView.isFullScreen = YES;
[_playView addSubview:self.screenControlView];
[UIView animateWithDuration:duration animations:^{
if (self.isPortraitFinished != NO) {
if (self.isError) {
self.errorView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
self.reloadButton.center = self.errorView.center;
self.errorLabel.frame = CGRectMake(_errorView.center.x - self.errorLabel.frame.size.width/2.0, CGRectGetMinY(_reloadButton.frame) - 21 - 18, self.errorLabel.frame.size.width, 21);
}
self.playView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
self.screenControlView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
self.screenControlView.shadeView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
NSLog(@"左右进行");
}
} completion:^(BOOL finished) {
[[UIApplication sharedApplication] setStatusBarHidden:YES];
NSLog(@"左右完成");
}];
}
}
//竖屏完成之后判断现在的手机设备的方向,如果是横竖屏,那么需要再次进行动画操作.
-(void)portraitFinishaNextAction{
UIDeviceOrientation orient = [UIDevice currentDevice].orientation;
if (orient == UIDeviceOrientationLandscapeLeft || orient == UIDeviceOrientationLandscapeRight) {
CGFloat duration = [UIApplication sharedApplication].statusBarOrientationAnimationDuration;//时间
[UIView animateWithDuration:duration delay:duration options:UIViewAnimationOptionLayoutSubviews animations:^{
if (self.isPortraitFinished != NO) {
if (self.isError) {
self.errorView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
self.reloadButton.center = self.errorView.center;
self.errorLabel.frame = CGRectMake(_errorView.center.x - self.errorLabel.frame.size.width/2.0, CGRectGetMinY(_reloadButton.frame) - 21 - 18, self.errorLabel.frame.size.width, 21);
}
self.playView.frame = self.playView.frame;
self.screenControlView.frame = self.playView.frame;
self.screenControlView.shadeView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
NSLog(@"左右进行");
}
} completion:^(BOOL finished) {
NSLog(@"next左右完成");
[[UIApplication sharedApplication] setStatusBarHidden:YES];
self.playView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
self.screenControlView.frame = CGRectMake(0, 0, KmainWidth, KmainHeight);
}];
}
}
遇到了另外一个问题,那就是关于自定义音量调节UI,实现的功能点就是不使用系统本身自带的音量调节UI控件.而是使用我们自己的音量播放UI控件.
这里需要使用的主要的控件就是MPVolumeView,这个控件有个特点,当它检测到当前系统有音量改变的时候,如果它没有被添加到当前最上层的View上时,那它会自动添加到View上来做展示.
实际上,对于MPVolumeView的隐藏,网上很多的博客都已经写到不能单单的隐藏这个控件,而是要对其的Frame进行修改,让它显示在屏幕外边即可. 这时候我就出现了一个问题,那就是不能隐藏音量控制View. 后来发现问题出现在自己的大意,因为自己对其其中的音量大小显示控件(UISlider控件)进行了Frame的改变,导致UI一直是错误的,后来通过分析,重新审核代码,解决这一问题.下面是对MPVolumeView控件的初始化,也是解决方案.
- (MPVolumeView *)volumeView {
if (_volumeView == nil) {
_volumeView = [[MPVolumeView alloc] init];
[_volumeView setFrame:CGRectMake(-100, -100, 40, 40)];//设置Frame即可.
[_volumeView setHidden:NO];
for (UIView *view in [_volumeView subviews]){
if ([view.class.description isEqualToString:@"MPVolumeSlider"]){
self.volumeViewSlider = (UISlider*)view;
break;
}
}
}
return _volumeView;
}
下载模块是用了iOS本身的网络请求类NSURLSession和Realm数据库来实现的. 下载本身没有什么难点,但是下载模块逻辑之多,可以说是"美课+"项目之最了.造成逻辑过多的原因主要是下载状态的原因. 这里我就用表格的形式对其逻辑进行一个整体状态的阐述.
| 状态 | 处理情况 |
|---|---|
| 当App启动时 | 判断当前是否是WIFI网络,接着判断当前下载队列中是否有未下载,如果有未下载的任务,那么启动后台下载 |
| 当某个课时下载完成时 | 首先先判断当前课程是否还有未下载的课时(不包含已经被用户手动暂停的课时),如果没有的话,那就去遍历外围的课程数组找到合适的未下载完成的课程往队列当中添加新的队列任务进行下载. |
| 当某个课时被暂停时 | 从队列中移除当前暂停的下载任务,然后接下来的过程与 某个课时下载完成时类似. |
| 当某个课时从暂停→重新下载时 | 从队列中移除当前的下载任务,然后把当前点击的下载任务加入到队列当中进行下载 |
| 在课程页面点击全部暂停按钮时 | 暂停当前课程的所有下载(实质:修改下载状态),遍历外围的课程数组找到合适的未下载完成的课程往队列当中添加新的队列任务进行下载. |
| 在课程页面点击全部开始按钮时 | 移除队列中的下载任务,遍历当前课程,找到未下载的课时(不包含已经被用户手动暂停的课时),如果没有的话,那就去遍历外围的课程数组找到合适的未下载完成的课程往队列当中添加新的队列任务进行下载. |
| 当某个课程下载完成时候 | 遍历课程数组找到合适的未下载完成的课程往队列当中添加新的队列任务进行下载. |
| 在下载页面点击全部暂停按钮 | 移除队列中所有的下载任务.修改课程的下载状态 |
| 在下载页面点击全部开始按钮 | 遍历课程数组找到合适的下载任务,把下载任务加入到队列中.开始下载 |
图库转场动画部分的实现是对presentViewController和dismissViewController的转场动画进行了自定义.自定义动画类主要实现的协议是UIViewControllerAnimatedTransitioning中的两个方法- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext和- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext.动画的实现过程比较简单.这是只拿presentViewController的转场动画为例,代码如下所示.
.h文件代码部分如下所示.
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface PresentAnimator : NSObject<UIViewControllerAnimatedTransitioning>
@property (nonatomic, strong) UIImageView *transitionImgView; //转场图片
@property (nonatomic, assign) CGRect transitionBeforeImgFrame; //转场前图片的frame
@property (nonatomic, assign) CGRect transitionAfterImgFrame; //转场后图片的frame
@end
.m文件代码部分如下所示.
#import "PresentAnimator.h"
@implementation PresentAnimator
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
return 0.5;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
//转场过渡的容器view
UIView *containerView = [transitionContext containerView];
//FromVC
UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIView *fromView = fromViewController.view;
[containerView addSubview:fromView];
//ToVC
UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *toView = toViewController.view;
[containerView addSubview:toView];
toView.hidden = YES;
//图片背景的空白view (设置和控制器的背景颜色一样，给人一种图片被调走的假象 [可以换种颜色看看效果])
UIView *imgBgWhiteView = [[UIView alloc] initWithFrame:self.transitionBeforeImgFrame];
imgBgWhiteView.backgroundColor = [UIColor whiteColor];
[containerView addSubview:imgBgWhiteView];
//有渐变的黑色背景
UIView *bgView = [[UIView alloc] initWithFrame:containerView.bounds];
bgView.backgroundColor = [UIColor whiteColor];
bgView.alpha = 0;
[containerView addSubview:bgView];
//定制
UIButton *returnButton = [UIButton buttonWithType:UIButtonTypeCustom];
returnButton.frame = CGRectMake(5, StatusHeight, 49, 44);
[returnButton setImage:[UIImage imageNamed:@"common_return"] forState:UIControlStateNormal];
UIButton *shareButton = [UIButton buttonWithType:UIButtonTypeCustom];
shareButton.frame = CGRectMake(KmainWidth-5-49, StatusHeight, 49, 44);
[shareButton setImage:[UIImage imageNamed:@"home_class_share_black"] forState:UIControlStateNormal];
UIButton *commentButton = [UIButton buttonWithType:UIButtonTypeCustom];
commentButton.frame = CGRectMake(KmainWidth-5-49-49, StatusHeight, 49, 44);
[commentButton setImage:[UIImage imageNamed:@"photo_find_no_like"] forState:UIControlStateNormal];
[bgView addSubview:returnButton];
[bgView addSubview:shareButton];
[bgView addSubview:commentButton];
//过渡的图片
UIImageView *transitionImgView = [[UIImageView alloc] initWithImage:self.transitionImgView.image];
transitionImgView.frame = self.transitionBeforeImgFrame;
[transitionContext.containerView addSubview:transitionImgView];
[UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0 usingSpringWithDamping:1 initialSpringVelocity:1 options:UIViewAnimationOptionCurveLinear animations:^{
transitionImgView.frame = self.transitionAfterImgFrame;
bgView.alpha = 1;
} completion:^(BOOL finished) {
toView.hidden = NO;
[imgBgWhiteView removeFromSuperview];
[bgView removeFromSuperview];
[transitionImgView removeFromSuperview];
BOOL wasCancelled = [transitionContext transitionWasCancelled];
//设置transitionContext通知系统动画执行完毕
[transitionContext completeTransition:!wasCancelled];
}];
}
@end
通过上面的的跳转动画我们可以达到我们预期的动画效果.实现动画的代码如下所示.
//点击某个图片Cell时
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
PhotosDetailsArrayViewController *photosDetailsArrayViewController = [[PhotosDetailsArrayViewController alloc] init];
photosDetailsArrayViewController.delegate = self;
if (self.photosDataSourceArray.count != 0) {
photosDetailsArrayViewController.dataArray = self.photosDataSourceArray;
photosDetailsArrayViewController.indexRow = indexPath.row;
}
PhotoModel *photoModel = self.photosDataSourceArray[indexPath.row];
self.animatedTransition = nil;
FindCollectionCell *cell = (FindCollectionCell *)[collectionView cellForItemAtIndexPath:indexPath];
//1. 传入必要的3个参数
[self.animatedTransition setTransitionImgView:cell.mainImageView];
UIWindow * window=[[[UIApplication sharedApplication] delegate] window];
CGRect frame= [cell.mainImageView convertRect: cell.mainImageView.bounds toView:window];
[self.animatedTransition setTransitionBeforeImgFrame:frame];
NSNumber *imageWidth = photoModel.origin[@"w"];
NSNumber *imageHeight = photoModel.origin[@"h"];
float scale = [imageHeight floatValue]/[imageWidth floatValue];
CGFloat imageViewHeight = KmainWidth*scale;
[self.animatedTransition setTransitionAfterImgFrame:CGRectMake(0, StatusHeight+44, KmainWidth, imageViewHeight)];
photosDetailsArrayViewController.transitioningDelegate = self.animatedTransition;
[self presentViewController:photosDetailsArrayViewController animated:YES completion:nil];
}
对于查看图片详情页面的控制上,这里我的实现逻辑是图片详情页面的控制器View整体是一个左右滑动的CollectionView,每一张图片的详情以及其推荐列表都是一个Cell,每一个Cell的尺寸就是当前CollectionView的Size.这样做的好处是利用CollectionView的重用机制,不断的从重用池里面取出Cell来做图片页面的展示.减少一定的性能损耗.
在转场动画实现过程,也是遇到几个问题,这里我做一下说明.
第一个问题.当前这个问题只有一行代码.如下所示.
[_mainCollectionView layoutIfNeeded];
当从图片详情页面返回的图片列表的时,需要让当前列表页面的控制器中的集合视图所对应的Cell滚动到视图中心,然后进行转场动画.这时,需要调用如下的方法.
[_mainCollectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:selectIndexPath inSection:0] atScrollPosition:UICollectionViewScrollPositionCenteredVertically animated:NO];
然后使用下面的方法不管如何获取到的Cell有时候就为nil.
FindCollectionCell *cell = (FindCollectionCell *)[_mainCollectionView cellForItemAtIndexPath:[NSIndexPath indexPathForRow:selectIndexPath inSection:0]];
出现这个问题的原因主要在于collectionView.visibleCells没有这个cell，需要从重用池获取，所以要滚动到这个cell位置后走layoutSubViews布局，这样才拿的到cell.所以就要使用到上面的那一行代码**[_mainCollectionView layoutIfNeeded];**来主动的刷新UI了.然后才能获取到Cell.
第二个问题,一开始实现转场动画的时候,由于前后的ViewController要保持数据的一致性和同步性,所以在这里的时候我就把数据源给抽离了出来,单独的做成了一个单例,本来是想着更好的解耦,没想到在个人页面,图库分类等等页面都需要这样的跳转页面,那么每一种情况都需要一个单例来支持,这样会造成页面逻辑代码臃肿不堪.不合乎架构思想,出于这样的目的,我使用的代理模式 + 布尔值 进行逻辑代码的修改 部分代码如下所示.
详情页面所需要实现的协议
@class PhotosDetailsArrayViewController;
@protocol PhotosDetailsArrayViewControllerDelegate<NSObject>
//加载了更多的数据 通过回调让上一个页面进行数据的加载,必须实现的代理方法
- (void)loadMoreDataSourceWithPhotoArray:(NSArray <PhotoModel *>*)photoArray;
@optional
- (void)scrollToItemAtIndexPathWithImageView:(UIImageView *)imageView selectIndexPath:(NSInteger)selectIndexPath withVC:(PhotosDetailsArrayViewController *)vc;
@end
BOOL值控制的逻辑代码的修改
@property(nonatomic,assign)BOOL isShowWithSearch;//搜索进入
@property(nonatomic,assign)BOOL isShowWithAlbum;//图集进入
新技能:LLDB调试台
LLDB调试台以前在工程中一直用的不多,不过经过一段时间的使用,发现使用LLDB调试台调试程序非常的方便.主要在我们需要调试的代码位置打上断点,我们就可以对其进行各种调试.最大的好处就是我们不用停用程序就可以重新修改UI(因为UI渲染是一个单独的线程,并不会应为主线程的阻塞就停止渲染),这里写一下最常用的几个命令.
- expression命令 : expression命令的作用是执行一个表达式，并将表达式返回的结果输出.
- print命令 : 打印某个东西，可以是变量和表达式.
- print命令 : 打印某个东西，可以是变量和表达式.
- [CATransaction flush] : UI刷新方法.
其他问题
在项目最后的测试阶段,我使用了Leak内存泄漏检测工具检测内存泄漏的时候,每当我进行一个新的页面都会存在内存泄漏问题,排除问题之后,发现是AFNetworking3.0造成的,打开监控页面之后,如下所示.
那么为什么AFNetworking3.0会造成内存泄漏呢?原因是manager类每一次网络请求都是初始化一个实例对象,但是该对象在工程中得不到释放,造成了内存泄漏.解决方法是创建一个继承与AFHTTPSessionManager 的单例对象,每次网络请求都调用这个单例方法.如下所示.
static AFHTTPSessionManager *httpManager;
//创建单例 解决循环引用问题
+ (AFHTTPSessionManager *)sharedHttpManager {
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
// 初始化请求管理类
httpManager = [[AFHTTPSessionManager alloc] initWithBaseURL:[NSURL URLWithString:KmainURL]];
httpManager.requestSerializer = [AFJSONRequestSerializer serializer];
// 设置15秒超时 - 取消请求
httpManager.requestSerializer.timeoutInterval = 15.0;
// 编码
httpManager.requestSerializer.stringEncoding = NSUTF8StringEncoding;
// 缓存策略
httpManager.requestSerializer.cachePolicy = NSURLRequestReloadIgnoringLocalCacheData;
httpManager.responseSerializer = [AFJSONResponseSerializer serializer];
// 支持内容格式
httpManager.responseSerializer.acceptableContentTypes = [NSSet setWithObjects:@"application/json", @"text/plain", @"text/javascript", @"text/json", @"text/html", nil];
});
return httpManager;
}
总结
做一下总结,"美课+"项目整体上还存在着不少的Bug,自己也会不断的去调整项目.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
