还是先上图说明下是什么东西
image.png
就是这样的帖子发布页面上面文字没什么可说的，这里主要想讲一下图片这个地方。
1.UI：
一般这种发图都会要有删除变换位置之类的操作，所以控件选择上我们选择collectionView实现方便（既然选择collection了上下有多的元素也可以做成cell了完美），关于移动cell这里说一个事情，这里只要要图片的cell才可以移动交换所以这里有个小判断。
//移动cell 长按手势加载对应可以移动的cell上触发，手势事件代理传带viewcontroller
-(void)moveCollectionViewCell:(KFZSocialSelectImageCell *)cell Gesture:(UILongPressGestureRecognizer *)gesture {
switch (gesture.state) {
case UIGestureRecognizerStateBegan: {//移动t开始
if (!self.isBeganMove) {//判断是否不再移动状态
self.isBeganMove = YES;//标记当前正在移动
//获取点击的cell的indexPath
NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:[gesture locationInView:self.collectionView]];
_movingCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath];
//开始移动对应的cell
[self.collectionView beginInteractiveMovementForItemAtIndexPath:selectedIndexPath];
}
break;
}
case UIGestureRecognizerStateChanged: {//移动过程中
NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:[gesture locationInView:self.collectionView]];
if (indexPath.section != 1) {//我的图片都是section1里面所以这是判断是不是当前移动的位置是不是在可以交换的cell上
//不能交换就用手动设置cell在屏幕上动
_movingCell.center = [gesture locationInView:self.collectionView];
}else{
KFZSocialUploadImageModel * img = [self.imageList objectAtIndex:indexPath.row];
if (!img.isImage) {//这个是选图片的加号也不可以交换
_movingCell.center = [gesture locationInView:self.collectionView];
}else{
//可以交换就用系统的交换方法
[self.collectionView updateInteractiveMovementTargetPosition:[gesture locationInView:self.collectionView]];
}
}
break;
}
case UIGestureRecognizerStateEnded: {
self.isBeganMove = false;
//结束移动
[self.collectionView endInteractiveMovement];
_movingCell = nil;
break;
}
default:
[self.collectionView cancelInteractiveMovement];
_movingCell = nil;
break;
}
}
2.选择图片的处理
相册就不说了，一般工程里都会有，咱们主要说选择完图片要怎么做，相册现在返回的都是PHAsset对象的，PHAsset转换到图片这是有一定的过程的，对图片进行处理也是需要时间，毫无疑问如果吧这样都放在主线程的话会导致App卡顿。那么通过一个什么样子的流程吧操作放在异步就是一个值得讨论的事情了。我就直接说说我现在的处理流程。算是抛砖引玉吧。
1，选择之后根据选择的asset创建model对象然后刷新ui，图片还没有可以使用默认图，这样显得你页面会显得非常的流畅，接下来就开始异步加载图片asset提供了不少加载图片的方法我这里只说两个我在用的。
//参考sd把这个做成了imageView的一个分类的
- (void)kfz_loadWithGifAsset:(PHAsset *)asset targetSize:(CGSize)targetSize finishDataBlock:(void(^)(UIImage *image, NSData * data, BOOL isGifImage))datablock{
PHImageRequestOptions *options = [PHImageRequestOptions new];
[options setResizeMode:PHImageRequestOptionsResizeModeExact];
//通过标识对cell复用进行处理
self.imageLocalIdentifier = asset.localIdentifier;
__weak PHAsset *weakAsset = asset;
//1异步加载缩略图 这个系统设置会多次返回图片这样你的高清图片会先模糊再清晰，第一次返回非常快，快到咱们之前说的默认图都用不上
[[PHImageManager defaultManager] requestImageForAsset:asset targetSize:targetSize contentMode:PHImageContentModeAspectFit options:options resultHandler:^(UIImage * _Nullable result, NSDictionary * _Nullable info) {
if ([[NSString kfz_emptyTurnString:self.imageLocalIdentifier] isEqualToString:[NSString kfz_emptyTurnString:weakAsset.localIdentifier]]) {
if (result) {
self.image = result;
}
} else {
[[PHImageManager defaultManager] cancelImageRequest:self.imageRequestID];
}
}];
//2异步加载图片data，上面用于显示图片，这个用于上传原图（和UI没关系用户几乎无感知），我这里是可以上传gif说以下面也有gif的区分
[[PHImageManager defaultManager] requestImageDataForAsset:asset options:options resultHandler:^(NSData *imageData, NSString *dataUTI, UIImageOrientation orientation, NSDictionary *info) {
if ([[NSString kfz_emptyTurnString:self.imageLocalIdentifier] isEqualToString:[NSString kfz_emptyTurnString:weakAsset.localIdentifier]]) {
if (imageData) {
if (datablock) {
datablock(nil, imageData, [dataUTI isEqualToString:(__bridge NSString *)kUTTypeGIF]);
}
}
} else {
[[PHImageManager defaultManager] cancelImageRequest:self.imageRequestID];
}
}];
}
再看调用的地方，我是直接在cell中用imageview调用
//设置数据
-(void)setModel:(KFZSocialUploadImageModel *)model{
_model = model;
if (_model.image) {//拿到原图直接赋值
_imageView.image = _model.image;
}else if(_model.asset){//没原图调用asset，复用处理在方法里面
_imageView.image = [UIImage imageNamed:@"social_placeholder_icon"];
WS(weakSelf);
[_imageView kfz_loadWithGifAsset:_model.asset targetSize:[KFZSocialSelectImageCell doubleSizeOfSelf] finishDataBlock:^(UIImage *image, NSData *data, BOOL isGifImage) {
dispatch_async(dispatch_get_global_queue(0, 0), ^{
UIImage * photo = [UIImage imageWithData:data];
UIImage * fixPhoto = [photo fixOrientation];//修正方向
fixPhoto = [fixPhoto compressImageToMaxFileSize:5*1024*1024];//图片压缩
dispatch_async(dispatch_get_main_queue(), ^{
weakSelf.model.imageData = data;
weakSelf.model.image = fixPhoto;
weakSelf.model.isGifImage = isGifImage;
weakSelf.model.isImage = YES;
weakSelf.model.netState = SocialSelectImageCellState_null;
weakSelf.model.imageWidth = model.image.size.width;
weakSelf.model.imageHeigt = model.image.size.height;
if ([weakSelf.delegate respondsToSelector:@selector(finishLoadImageCell:)] && !weakSelf.model.beDelete) {//是否删除
[weakSelf.delegate finishLoadImageCell:weakSelf];//去上传图片
}
});
});
}];
} else {//保存操作这个不用管，而且我还在考虑优化这个
[_imageView kfz_setSocialImageViewWithWebImageUrlString:_model.imageNormal];
}
if (_model.netState == SocialSelectImageCellState_uploading) {
// _blackView.hidden = NO;
// _progressLabel.hidden = NO;
// _reUpLoadBtn.hidden = YES;
_blackView.hidden = YES;
_progressLabel.hidden = YES;
_reUpLoadBtn.hidden = YES;
}else if(_model.netState == SocialSelectImageCellState_faild){
_blackView.hidden = NO;
_progressLabel.hidden = YES;
_reUpLoadBtn.hidden = NO;
_reUpLoadBtn.text = @"上传失败\n点击重试";
}else if (_model.netState == SocialSelectImageCellState_success){
_blackView.hidden = YES;
_progressLabel.hidden = YES;
_reUpLoadBtn.hidden = YES;
}else if (_model.netState == SocialSelectImageCellState_reUploading){
_blackView.hidden = NO;
_progressLabel.hidden = YES;
_reUpLoadBtn.hidden = NO;
_reUpLoadBtn.text = @"重新上传中...";
}else{
_blackView.hidden = YES;
_progressLabel.hidden = YES;
_reUpLoadBtn.hidden = YES;
}
}
这里有一个地方额外说一下，因为所有的操作的异步的，操作都是基于model处理。可能我对原图的获取或者图片的处理没有完成的时候，用户就已经点击UI上的删除把这个图片删除了，这是因为model被block持有不会释放，cell已经没有了导致刷新等操作没有落地页，所以我给model加了一个beDelete标识，如果判断到用户已经删除了这个图片那么就不做后续的操作了（按理来说写在回到主线程开始的地方比较好，嗯我感觉我可以改一下）
再往下说就是上传服务器了，这里对于这些就不对说了，发布页面小的细节真的不少，我只希望这篇文章能在选择图片这里给大家一个我的思路。
好了打完收工~
