iOS常见的新闻、微博首页实现---视频播放，长图截取显示，点击

先上效果图

</br>

前言

之前的一个多月，在老板的淫威之下，一直都在做纯h5版本的 app，好在终于摆脱了他的魔爪，可以做自己喜欢的事。于是就赶紧把快要忘掉的 iOS 捡起来，立个小目标，写个小 demo</br>
我用iPhone6，10.1系统真机测试，快速滑动 FPS 保持在59~60，纵享丝滑。gif 是用电脑录的，模拟器配置低，所以FPS 只有不到30</br>

基本模块实现方式

数据是百思不得姐的首页接口，类似新闻首页布局，包含视频，长图，动图，纯文本等。我将它们拆分为几个基本的模块介绍，方便各取所需

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 里实现了相似的功能，于是就去扒了源码。用法如下：</br>
首先将上图的两个类拖入自己的项目

然后在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;
}

至此三个基本功能点基本完成，还有几个小问题尚待优化，希望有经验的老哥指点一二</br>

• cell 的高度我采用的是contentLable 的高度 + 图片的高度约束值 + 头像时间等 lable 的高度，基本能满足我的需求但是肯定不是最好的办法</br>
• 自定义cell 类里大量的 if 判断，根据接口数据类型，无图片的隐藏图片 imageView，有图片的根据图片尺寸大小动态改变 imageView 的约束值等

基本上就是这么多，时间仓促，技术有限，还请多多指正。

画重点了Demo