先上效果图
前言
之前的一个多月，在老板的淫威之下，一直都在做纯h5版本的 app，好在终于摆脱了他的魔爪，可以做自己喜欢的事。于是就赶紧把快要忘掉的 iOS 捡起来，立个小目标，写个小 demo
我用iPhone6，10.1系统真机测试，快速滑动 FPS 保持在59~60，纵享丝滑。gif 是用电脑录的，模拟器配置低，所以FPS 只有不到30
基本模块实现方式
数据是百思不得姐的首页接口，类似新闻首页布局，包含视频，长图，动图，纯文本等。我将它们拆分为几个基本的模块介绍，方便各取所需
1，长文本显示，UILable 高度动态计算
UILable的基本属性就不再介绍了，需要的同学可以自行百度
Lable.text= @"你的字符串";
Lable.font= [UIFontfontWithName:@"Arial"size:16];
NSDictionary*attrs =@{NSFontAttributeName:Lable.font};
CGSizemaxSize =CGSizeMake(Width-35,MAXFLOAT);
CGSizesize = [Lable.text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrscontext:nil].size;
NSLog(@"%f ->%f",size.height,size.width);
2，长图截取，点击放大查看
截取：
试过各种办法，比如下面这种上下文截取，裁剪，设置imageView 的 contentMode
- (UIImage *)compressImage:(UIImage *)sourceImage toTargetScale:(CGFloat)scale {
CGSize imageSize = sourceImage.size;
CGFloat width = imageSize.width;
CGFloat height = imageSize.height;
UIGraphicsBeginImageContext(CGSizeMake(width * scale, height * scale));
[sourceImage drawInRect:CGRectMake(0, 0, width * scale, height * scale)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
是下图这种效果，明显不是我想要的，要截取长图的头部显示
采用下面这种方法，可以完美裁剪长图的头部，然后加载到 imageView 上即可
UIImage*resultImage = [UIImage imageWithCGImage:CGImageCreateWithImageInRect([imageCGImage],CGRectMake(0,0,Height,Height))];
myself.contentImageView.image= resultImage;
关于 UIImage，CIImage，CGImage 三者的区别
- CIImage包含了创建图片的所有必要的数据，但其本身没有渲染成图片，它代表的是图像数据或者生成图像数据的流程（如滤镜）
- CGImage是基于像素的矩阵，每个点都对应了图片中点的像素信息
- UIImage管理图片数据，主要用来展现，如UIImageView中，控件中等，也可以用来直接在view或其他的context中绘制
点击放大查看：
图片放大查看常见的第三方库是MWPhotoBrowser，但是 MWPhotoBrowser 这个库有一个很大的痛点就是查看大图时是以PUSH 的方式跳过去的，并不是我们常见的动画弹出的方式，从原图的基础位置放大到全屏，下图所示。对于有强迫症的我来说果断放弃了这个库，难道要我自己封装一个？
但由于才疏学浅，能力有限，只能站在巨人的肩膀上，想起来YYKit的 demo 里实现了相似的功能，于是就去扒了源码。用法如下：
首先将上图的两个类拖入自己的项目
然后在imageView的点击事件里执行如下代码
YYPhotoGroupItem*item = [YYPhotoGroupItemnew];
item.thumbView =_contentImageView;
item.largeImageURL= [NSURLURLWithString:imageURL];
YYPhotoGroupView*view = [[YYPhotoGroupViewalloc]initWithGroupItems:@[item]];
UIView*toView= [UIApplicationsharedApplication].keyWindow.rootViewController.view;
[viewpresentFromImageView : _contentImageView toContainer : toView animated : YEScompletion:nil];
注意：
1，我demo 接口只有一张图，所以此处是单图查看，多张图传item 的数组
2，YYPhotoGroupView 类里并未实现长按图片选择保持到相册功能，需要更改此类里长按手势触发的方法代码（大概在760行）
UIActivityViewController *activityViewController =
[[UIActivityViewController alloc] initWithActivityItems:@[imageItem] applicationActivities:nil];
UIActivityViewControllerCompletionWithItemsHandler myblock = ^(NSString *activityType,BOOL completed,NSArray *returnedItems,NSError *activityError){
if ([activityType isEqualToString:@"com.apple.UIKit.activity.SaveToCameraRoll"]) {
MBProgressHUD *hub = [MBProgressHUD showHUDAddedTo:toVC.view animated:YES];
hub.mode = MBProgressHUDModeCustomView;
if (completed) {
hub.labelText = @"保存成功";
}else{
hub.labelText = @"保存失败";
}
hub.removeFromSuperViewOnHide = YES;
[hub hide:YES afterDelay:1.0];
}
};
activityViewController.completionWithItemsHandler = myblock;
至此，图片查看功能基本完成。
3，基于AVPlayer实现的视频播放
之前做的视频播放基本是下图这个样子，用 AVPlayer 实现的简单的播放器，观察者监听视频的状态进行一系列操作等等。但是在 cell 上的视频播放器跟单独一个页面的播放大不相同，前者要考虑到 cell 的复用，播放器在什么时候创建，同时创建多个低端机型内存会不会爆掉。
尝试了多次，最后采用的的方法是首先判断后台接口数据的 videoUrl 字段是否有值，有值就在图片上放一个按钮（下图所示），在按钮的点击方法里写一个回调block，在tableview 的cellForRowAtIndexPath:代理方法中实现这个 block。此时才创建播放器。
此处推荐一个贼好用的 AVPlayer第三方库ZFPlayer，回调方法代码如下
__weak typeof(self) myself = self;
__block MainTableCell *weakcell = _tableCell;
__block NSIndexPath *weakIndexPath = indexPath;
_tableCell.cellBlock = ^(){
if (![weakcell.modelList.videouri isEqualToString:@""]) {
ZFPlayerModel *playerModle = [[ZFPlayerModel alloc] init];
//playerModle.title = @"这是我的标题";
playerModle.videoURL = [NSURL URLWithString:weakcell.modelList.videouri];
playerModle.placeholderImageURLString = weakcell.modelList.image0;
playerModle.tableView = myself;
playerModle.indexPath = weakIndexPath;
playerModle.fatherView = weakcell.contentImageView;
[myself.playerView playerControlView:nil playerModel:playerModle];
[myself.playerView autoPlayTheVideo];
}
};
里面用到的playerView 采用懒加载方式创建
- (ZFPlayerView *)playerView {
if (!_playerView) {
_playerView = [ZFPlayerView sharedPlayerView];
//_playerView.delegate = self;
// 当cell播放视频由全屏变为小屏时候，不回到中间位置
_playerView.cellPlayerOnCenter = NO;
// 当cell划出屏幕的时候停止播放
//_playerView.stopPlayWhileCellNotVisable = YES;
//（可选设置）可以设置视频的填充模式，默认为（等比例填充，直到一个维度到达区域边界）
// _playerView.playerLayerGravity = ZFPlayerLayerGravityResizeAspect;
// 静音
// _playerView.mute = YES;
}
return _playerView;
}
至此三个基本功能点基本完成，还有几个小问题尚待优化，希望有经验的老哥指点一二
- cell 的高度我采用的是contentLable 的高度 + 图片的高度约束值 + 头像时间等 lable 的高度，基本能满足我的需求但是肯定不是最好的办法
- 自定义cell 类里大量的 if 判断，根据接口数据类型，无图片的隐藏图片 imageView，有图片的根据图片尺寸大小动态改变 imageView 的约束值等
基本上就是这么多，时间仓促，技术有限，还请多多指正。
