写在前面:
之前这篇文章发表在我的CSDN博客中, 由于CSDN博客使用过于繁琐 ,趁着这段时间没啥事情可做(又要开始找新东家了), 将原有的文章整理后发布到简书. 原来CSDN博客也将停止更新. 初次接触IOS开发, 有写得不对, 或者有更好的解决方案, 欢迎大家指出.
最近在学习IOS开发,下载了MWPhotoBrowser源码来研究, 运行的时候发现加载iPhone5(ios7)系统相册数据的时候页面很卡,于是决定将它进行一番优化.
一. 图片列表卡顿问题
1. 发现问题
造成图片列表卡顿的地方无非就那么两个
- 读取数据列表
- 加载图片
首先排除了读取数据列这个原因, 因为其使用的是系统方法来读取,而且返回的数据并没有做其他处理.于是问题就就应该发生在加载图片这一块了.于是进一步将问题定位到文件MWPhoto.m.
加载系统相册数据的时候是使用的URL的形式来初始化数据的,这没什么问题,问题就出在了,没有区分是缩略图还是全屏图片啊.(MWPhotoBrowser图片的显示是区分缩略图显示还是全屏图片显示的,但是使用的图片都是全屏图片).源码里面默认都是加载的全屏图片,假如我要显示缩略图屏图片的时候给你来自一张全屏图片,而我实际只需要一张小小的缩略图,这不是白白浪费资源吗, 所以决定动手改造一下,我们首先来看看他的初始化数据的方法,就是下面两个方法.貌似看不出什么问题.接着往下看..
// 这里没有区分是否为缩略图
+ (MWPhoto *)photoWithURL:(NSURL *)url {
return [[MWPhoto alloc] initWithURL:url];
}
// 这里也没有区分是否为缩略图
- (id)initWithURL:(NSURL *)url {
if ((self = [super init])) {
self.photoURL = url;
}
return self;
}
看看它是怎么样加载图片的,首先来看看它是怎么加载系统相册里面的图片的,我们找到performLoadUnderlyingImageAndNotify这个方法,里面的代码
// 如果是系统相册的相片
if ([[[_photoURL scheme] lowercaseString] isEqualToString:@"assets-library"]);
这一句就是判断是否为系统相册里面的图片. 如果是系统相册图片执行if里面的方法,这里貌似也没什么问题,我们接着往下看.来看看if之后调用加载图片的方法performLoadUnderlyingImageAndNotifyWithAssetsLibraryURL
// Set the underlyingImage
- (void)performLoadUnderlyingImageAndNotify {
// Get underlying image
if (_image) {
// We have UIImage!
self.underlyingImage = _image;
[self imageLoadingComplete];
} else if (_photoURL) {
// Check what type of url it is
if ([[[_photoURL scheme] lowercaseString] isEqualToString:@"assets-library"]) {
// Load from assets library
[self _performLoadUnderlyingImageAndNotifyWithAssetsLibraryURL: _photoURL];
} else if ([_photoURL isFileReferenceURL]) {
// Load from local file async
[self _performLoadUnderlyingImageAndNotifyWithLocalFileURL: _photoURL];
} else {
// Load async from web (using SDWebImage)
[self _performLoadUnderlyingImageAndNotifyWithWebURL: _photoURL];
}
} else if (_asset) {
// Load from photos asset
[self _performLoadUnderlyingImageAndNotifyWithAsset: _asset targetSize:_assetTargetSize];
} else {
// Image is empty
[self imageLoadingComplete];
}
}
接下来就看到 if 语句里面调用的加载图片的方法.
// Load from asset library async
- (void)_performLoadUnderlyingImageAndNotifyWithAssetsLibraryURL:(NSURL *)url {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
@autoreleasepool {
@try {
ALAssetsLibrary *assetslibrary = [[ALAssetsLibrary alloc] init];
[assetslibrary assetForURL:url
resultBlock:^(ALAsset *asset){
CGImageRef iref = [[asset defaultRepresentation] fullScreenImage];
if (iref) {
self.underlyingImage = [UIImage imageWithCGImage:iref];
}
[self performSelectorOnMainThread:@selector(imageLoadingComplete) withObject:nil waitUntilDone:NO];
}
failureBlock:^(NSError *error) {
self.underlyingImage = nil;
MWLog(@"Photo from asset library error: %@",error);
[self performSelectorOnMainThread:@selector(imageLoadingComplete) withObject:nil waitUntilDone:NO];
}];
} @catch (NSException *e) {
MWLog(@"Photo from asset library error: %@", e);
[self performSelectorOnMainThread:@selector(imageLoadingComplete) withObject:nil waitUntilDone:NO];
}
}
});
}
看到了吗,里面有下面这一句,这一句是将全屏图片加载出来,然后封装成UIImage. 问题就出在这里.
CGImageRef iref = [[asset defaultRepresentation] fullScreenImage];
这一句没有区分是否为缩略图,我进入的是图片列表,需要加载缩略图,但是真是情况是加载全屏图片,这样会造成很大的资源浪费,而且会拖慢运行速度,所以解决办法是加一个属性,来区分是否为缩略图,来分别加载不同大小的图片
2. 解决问题
问题已经找到了,就是因为本应该加载缩略图的地方,加载的却是全屏图片,因此我们需要在加载图片的时候来区分加载,全屏图片还是缩略图.
因此首先在 MWPhoto.h 文件中添加属性
//是否为缩略图,加载图片的时候根据这个来判断是否加载的是缩略图
@property (nonatomic) BOOL isThumb;
然后再把刚才那一句改一下改成下面这样
CGImageRef iref = self.isThumb? [asset thumbnail]:[[asset defaultRepresentation] fullScreenImage];
这样就大功告成了. 再也不用担心加载系统相册卡顿的问题了...
3. 其他改进的地方
最后既然我可以使用URL来加载系统图片了,为何不增加使用ALAsset 来初始化呢? 所以有了下面的改造.
- 我们在MWPhoto.h 添加初始化方法,方法参数里面指定是否为缩略图.
@property (nonatomic, strong) ALAsset *alAsset;
+ (MWPhoto *)photoWithALAsset:(ALAsset *)url isThumb:(BOOL) isThumb;
- (id)initWithALAsset:(ALAsset *)asset isThumb:(BOOL) isThumb;
-
MWPhoto.m添加方法的实现
+(MWPhoto *)photoWithALAsset:(ALAsset *)asset isThumb:(BOOL)isThumb{
return [[MWPhoto alloc]initWithALAsset:asset isThumb:isThumb];
}
-(id)initWithALAsset:(ALAsset *)asset isThumb:(BOOL)isThumb{
if ((self = [super init])) {
self.alAsset = asset;
self.isThumb = isThumb;
}
return self;
}
- 然后改造一下
MWPhoto.m中的performLoadUnderlyingImageAndNotify方法
添加判断是否是通过ALAsset初始化的MWPhoto对象
else if(_alAsset){// 添加是否为系统图片的判断
// Load from photos asset
[self _performLoadUnderlyingImageAndNotifyWithAssetsLibraryAlAsset: _alAsset];
}
- 更改后的代码如下
- 注意添加的方法
_performLoadUnderlyingImageAndNotifyWithAssetsLibraryAlAsset
// Set the underlyingImage
- (void)performLoadUnderlyingImageAndNotify {
// Get underlying image
if (_image) {
// We have UIImage!
self.underlyingImage = _image;
[self imageLoadingComplete];
} else if (_photoURL) {
// Check what type of url it is
if ([[[_photoURL scheme] lowercaseString] isEqualToString:@"assets-library"]) {
// Load from assets library
[self _performLoadUnderlyingImageAndNotifyWithAssetsLibraryURL: _photoURL];
} else if ([_photoURL isFileReferenceURL]) {
// Load from local file async
[self _performLoadUnderlyingImageAndNotifyWithLocalFileURL: _photoURL];
} else {
// Load async from web (using SDWebImage)
[self _performLoadUnderlyingImageAndNotifyWithWebURL: _photoURL];
}
} else if(_alAsset){// 添加是否为系统图片的判断
// Load from photos asset
[self _performLoadUnderlyingImageAndNotifyWithAssetsLibraryAlAsset: _alAsset];
}else if (_asset) {
// Load from photos asset
[self _performLoadUnderlyingImageAndNotifyWithAsset: _asset targetSize:_assetTargetSize];
} else {
// Image is empty
[self imageLoadingComplete];
}
}
//_performLoadUnderlyingImageAndNotifyWithAssetsLibraryAlAsset 方法实现
// Load from asset library async
- (void)_performLoadUnderlyingImageAndNotifyWithAssetsLibraryAlAsset:(ALAsset *) asset {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
@autoreleasepool {
@try {
CGImageRef iref = self.isThumb? [asset thumbnail]:[[asset defaultRepresentation] fullScreenImage];
if (iref) {
self.underlyingImage = [UIImage imageWithCGImage:iref];
}
[self performSelectorOnMainThread:@selector(imageLoadingComplete) withObject:nil waitUntilDone:NO];
} @catch (NSException *e) {
MWLog(@"Photo from asset library error: %@", e);
[self performSelectorOnMainThread:@selector(imageLoadingComplete) withObject:nil waitUntilDone:NO];
}
}
});
}
这次又进一步的优化了MWPhotoBrowser的加载性能
二. 图片选择问题
选择图片时候, 你会想象的到,在我们上下滑动列表的时候,图片莫名其妙的就被选择了, 选择框还那么的难以点中.这中体验该有多差劲.
于是继续我们的优化
直接定位到文件MWGridCell.m
可以看到如下代码
[_selectedButton addTarget:self action:@selector(selectionButtonPressed) forControlEvents:
UIControlEventTouchDown];
_selectedButton.frame = CGRectMake(0, 0, 44, 44);
在选择模式下设置了一个点击(手指按下事件),这还了得, 我手指还在滑动居然也可以选中.
再看设置的尺寸44px什么情况我的手指这么粗咋点啊.
话不多说
解决思路
自己绘制一个View放在原有的上面大小覆盖整个图片,添加自己的手势监听.
单击对应原来的选择框选择, 双击代替点击图片区域.
直接上代码,将上面几行代码替换成下面代码即可
//S替换点击事件,并添加双击事件
_tapButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIColor * tintColor = [UIColor colorWithRed:76.0/255.0 green:19.0/255.0 blue:136.0/255.0 alpha:0.0];
_tapButton.backgroundColor = tintColor;
_tapButton.frame = self.bounds;
////S单击双击事件
// 单击的 Recognizer
UITapGestureRecognizer* singleRecognizer;
singleRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(SingleTap:)];
//点击的次数
singleRecognizer.numberOfTapsRequired = 1; // 单击
//给self.view添加一个手势监测；
[_tapButton addGestureRecognizer:singleRecognizer];
// 双击的 Recognizer
UITapGestureRecognizer* doubleRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(DoubleTap:)];
doubleRecognizer.numberOfTapsRequired = 2; // 双击
//关键语句，给self.view添加一个手势监测；
[_tapButton addGestureRecognizer:doubleRecognizer];
// 关键在这一行，双击手势确定监测失败才会触发单击手势的相应操作
[singleRecognizer requireGestureRecognizerToFail:doubleRecognizer];
////E单击双击事件
// 调整了图片大小
_selectedButton.frame = self.bounds;//CGRectMake(0, 0, 84, 84);
_tapButton.hidden = YES;
//E替换点击事件,并添加双击事件
单击,双击方法
- (void) SingleTap:(UITapGestureRecognizer*) gesture
{
[self selectionButtonPressed];
}
- (void) DoubleTap:(UITapGestureRecognizer*) gesture
{
[self selectionButtonDoublePressed];
}
