iOS相册Moment功能的优化方案

金小俊
569 阅读7分钟

最近在开发公司产品Perfect365的Gallery模块, 包括按日期排序的Moment以及Album这两个模块. Moment功能和系统相册类似, 就是根据图片的日期信息进行排序, 然后按照不同日期分section显示.

IMG_2897.jpg

Moment的实现思路很简单: 先遍历系统的所有相册, 然后获取每个相册内图片的日期信息, 根据日期进行分类和排序, 最后把枚举完的所有数据放到界面上来显示. 示例代码如下:

NSSortDescriptor *sort = [NSSortDescriptor sortDescriptorWithKey:@"date" ascending:NO];

[objects sortUsingDescriptors:@[sort]];

MomentCollection *lastGroup = nil; NSMutableArray *ds = [[NSMutableArray alloc] init];

for (ALAsset *asset in objects)
{
    @autoreleasepool
    {
        NSDateComponents *components = [[NSCalendar currentCalendar] components:NSDayCalendarUnit   |
                                                                                NSMonthCalendarUnit |
                                                                                NSYearCalendarUnit
                                                                       fromDate:[asset date]];
        NSUInteger month = [components month];
        NSUInteger year  = [components year];
        NSUInteger day   = [components day];
        
        if (!lastGroup || lastGroup.year!=year || lastGroup.month!=month || lastGroup.day!=day)
        {
            lastGroup = [MomentCollection new]; [ds addObject:lastGroup];
            
            lastGroup.month = month; lastGroup.year = year; lastGroup.day = day;
        }
        
        ALAsset *lPhoto    = [lastGroup.assetObjs lastObject];
        NSURL   *lPhotoURL = [lPhoto valueForProperty:ALAssetPropertyAssetURL];
        NSURL   *photoURL  = [asset  valueForProperty:ALAssetPropertyAssetURL];
        
        if (![lPhotoURL isEqual:photoURL])
        {
            [lastGroup.assetObjs addObject:asset];
        }
    }
}

So far so good, 接下来创建UICollectionView, 设置好dataSource就可以显示moment图片了. 起初我也是这么认为的, 但是对于开发一款拥有6500万用户的App来说everything is possible. 版本发布之后, 很多用户反馈打开相册后App直接freeze掉, what the hell is this? QA测试时一切OK的呀. 好吧, 继续骚扰用户询问到底是神马情况, 用户回复: 我手机里面放了30k+图片, 占了20G+的存储空间. OH MY GOD!!!

优化方案

对于Moment功能, 肯定需要遍历完系统内的所有相册图片, 然后再按日期排序后显示给用户, 那优化就只能在枚举和排序这两部分来压榨了. 经过2天的苦思冥想决定采用分批加载+取尾排序的方案来优化. 具体思路为: 如果用户设备内的图片比较多, 不是等所有图片都枚举排序完了再显示, 而是枚举每隔一定数量的图片(e.g. 50张)后就抛出去(放到NSOperationQueue里)按日期分类并排序, 再显示给用户, 这样让用户看到我们动态加载图片的过程, 让他知道我们的程序still alive, 并且在不断的加载图片. 但是一般情况下排序的耗时会大于图片的枚举, 也就是第一个50张排完序后, 前面枚举放到Queue里面等待排序的已经有好几批了, 那么我们只对最后一批的图片再排序(也就是取尾)并清空当前的Queue, 因为中间的几批数据已经makes no sense了. 方案详细流程图如下:

曲线流程图.jpg

为了最大程度的减轻动态加载后刷新显示对用户造成的突兀感, 在显示之前需要判断用户是否在滑动页面, 只有页面静止的时候刷新显示. 但对于全部图片枚举完成后的最后一批数据则要暂时保存住(否则就木有东东显示了), 待用户停止滑动后reloadData.

分批加载

Moment需要按日期分类显示(最新的显示在最前面), 所以在枚举相册的时候可以先从camera roll开始(一般用户拍摄的照片相对导入的图片会早一点). 加载到50的倍数张后就抛到queue里面等待排序, 一个相册枚举完后再继续遍历其余的相册...

- (void)getPhotosWithGroupTypes:(ALAssetsGroupType)types
                    batchReturn:(BOOL)batch
                     completion:(void (^)(BOOL ret, id obj))completion
{
    self.batchBlock        = completion;
    NSMutableArray *tmpArr = [[NSMutableArray alloc] init];
    
    [self.assetLibary enumerateGroupsWithTypes:types
                                    usingBlock:^(ALAssetsGroup *group, BOOL *stop)
    {
        if (self.stopEnumeratePhoto) {*stop = YES; return;}
         
        NSInteger gType = [[group valueForProperty:ALAssetsGroupPropertyType] integerValue];
         
        if (group && (gType != ALAssetsGroupPhotoStream))
        {
            [group setAssetsFilter:[ALAssetsFilter allPhotos]];
             
            [group enumerateAssetsWithOptions:NSEnumerationReverse
                                   usingBlock:^(ALAsset *result, NSUInteger index, BOOL *stop)
            {
                if (self.stopEnumeratePhoto) {*stop = YES; return;}
                  
                if (result) [tmpArr addObject:result];
                  
                if (batch && !([tmpArr count]%50)) [self addQueueWithData:tmpArr final:NO];
            }];
        }
        else if (nil == group)
        {
            [self addQueueWithData:tmpArr final:YES];
        }
    }failureBlock:nil];
}

取尾排序

每组批次的图片都加到一个串行queue队列里面等待排序, 某个批次的排序完成之后取当前queue最后一个(也就是最新过来的枚举图片)继续执行排序, 并清空当前的queue. 也就是在下面的sortMomentWithDate:final:函数里面调用cleanQueueAfterRoundOperation.

- (void)addQueueWithData:(NSMutableArray *)data final:(BOOL)final
{
    NSMutableArray *rawData = [NSMutableArray arrayWithArray:data];
    
    NSBlockOperation *op = [NSBlockOperation blockOperationWithBlock:^
    {
        [self sortMomentWithDate:rawData final:final];
    }];
    
    [self.operQueue addOperation:op];
}

- (void)cleanQueueAfterRoundOperation
{
    if (self.operQueue == nil) return;
    
    if (self.operQueue.operationCount > 1)
    {
        NSArray *queueArr = self.operQueue.operations;
        NSMutableArray *opArr = [NSMutableArray arrayWithArray:queueArr];
        
        [opArr removeLastObject]; [opArr removeLastObject];
        [opArr makeObjectsPerformSelector:@selector(cancel)];
    }
}

刷新CollectionView显示图片

中间批次按日期分类过的数据ready后, 在reloadData之前先判断一下当前用户是否在滑动collectionView, 如果是非scroll状态则刷新显示, 否则直接drop掉, 但是对于最后一批数据需要先存储着, 并在scrollViewDidEndDragging和scrollViewDidEndDecelerating里面判断, 一旦用户停止滑动了就立即刷新到collectionView上.

[[ImageDataAPI sharedInstance] getMomentsWithBatchReturn:YES
                                               ascending:NO
                                              completion:^(BOOL done, id obj)
{
    NSMutableArray *dArr = (NSMutableArray *)obj;
    
    if (dArr != nil && [dArr count])
    {
        if (!self.momentView.dragging && !self.momentView.decelerating)
        {
            dispatch_async(dispatch_get_main_queue(), ^
            {
                [self reloadWithData:dArr];
            });
        }
        else
        {
            if (done) {self.backupArr = dArr}
        }
    }
}];

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (!decelerate && self.backupArr)
    {
        dispatch_async(dispatch_get_main_queue(), ^{
            [self reloadWithData:self.backupArr];
            self.backupArr = nil; // done refresh
        });
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    if (self.backupArr)
    {
        dispatch_async(dispatch_get_main_queue(), ^{
            [self reloadWithData:self.backupArr];
            self.backupArr = nil; // done refresh
        });
    }
}

后续改进思路

按上述方案不管设备图片有多少, 基本可以正常打开相册并加载图片. 但还是有很多需要继续改进的地方: e.g.

  • 中间批次的数据ready后也可以先存储着, 待用户停止滑动后在reload上去, 而不是简单的drop掉.
  • 排序还需要再优化. 现在第一批50张图片排序后, 第二批进入排序的200张图片又需要重新分类排序, 中间批次数据只是为了先显示给用户看. 是不是第200张图片可以只对后面的150张进行排序, 也就是后面150张有新的日期, 则新建section, 相同日期直接insert到前面去. 这个还需要后面再研究...

以上只是自己的一些优化思路, 如果有更好的方案, 欢迎留言交流~~

Photos.framework

iOS 8新引入了全新的PhotoKit API, 用来替代AssetsLibrary框架, PhotoKit提供了直接访问Moment数据的接口+ (PHFetchResult<PHAssetCollection *> *)fetchMomentsWithOptions:(nullable PHFetchOptions *)options该函数直接返回按日期分类的图片集合数据, 且速度非常快(猜想是不是Apple在用户拍摄图片或者导入图片时已mark日期信息并分类排序). 因此在iOS 8以上的系统可以直接采用PhotoKit框架来实现moment功能.

PHFetchOptions *options  = [[PHFetchOptions alloc] init];
options.sortDescriptors  = @[[NSSortDescriptor sortDescriptorWithKey:@"endDate"
                                                           ascending:ascending]];

PHFetchResult  *momentRes = [PHAssetCollection fetchMomentsWithOptions:options];
NSMutableArray *momArray  = [[NSMutableArray alloc] init];

for (PHAssetCollection *collection in momentRes)
{
    NSDateComponents *components = [[NSCalendar currentCalendar] components:NSDayCalendarUnit   |
                                                                            NSMonthCalendarUnit |
                                                                            NSYearCalendarUnit
                                                                   fromDate:collection.endDate];
    NSUInteger month = [components month];
    NSUInteger year  = [components year];
    NSUInteger day   = [components day];
    
    MomentCollection *moment = [MomentCollection new];
    moment.month = month; moment.year = year; moment.day = day;
    
    PHFetchOptions *option  = [[PHFetchOptions alloc] init];
    option.predicate = [NSPredicate predicateWithFormat:@"mediaType = %d", PHAssetMediaTypeImage];
    
    moment.assetObjs = [PHAsset fetchAssetsInAssetCollection:collection
                                                     options:option];
    if ([moment.assetObjs count]) [momArray addObject:moment];
}

So, 我们可以对外统一moment接口, 在内部(Gallery Model类)区分系统实现: iOS 7系统采用AssetsLibrary并使用上文的优化方案, iOS 8系统则直接调用Photos.framework的Moment接口.

但是这里面有个问题, AssetsLibrary的类型是ALAssetsGroup, 而PhotoKit的类型是PHFetchResult, 怎么在使用的时候统一呢? 难道还需要在外部调用的时候再区分一下系统么?

解决方法很简单, 定义自己的数据类, 在数据结构内部再区分, 外部调用时使用的都是自己定义的数据类型: e.g. 定义MomentCollection, 包括年月日信息, 对外的属性assetObjs则在内部区分系统并返回或设定相应的类型:

@interface MomentCollection : NSObject

@property (nonatomic, readwrite) NSUInteger     month;
@property (nonatomic, readwrite) NSUInteger     year;
@property (nonatomic, readwrite) NSUInteger     day;

@property (nonatomic, strong) id assetObjs;

@end

@property (nonatomic, strong) NSMutableArray *items;
@property (nonatomic, strong) PHFetchResult  *assets;

- (id)assetObjs
{
    return IS_IOS_8 ? self.assets : self.items;
}

- (void)setAssetObjs:(id)assetObjs
{
    if (IS_IOS_8)
    {
        self.assets = (PHFetchResult *)assetObjs;
    }
    else
    {
        self.items  = (NSMutableArray *)assetObjs;
    }
}

对于相册或者某个具体的图片也是类似的处理方法, 定义AlbumObj和PhotoObj数据类型. 这样外界(调用者)就不用管数据类型了, 所有的逻辑都在内部handle了...

另外, 对于对于其他功能, 比如相册的枚举, 相册Poster图片的获取, 图片URL的获取, 某个相册内所有thumbnail的获取等等都可以对外统一接口, 内部再区分是使用PhotoKit还是AssetsLibrary.

- (void)getMomentsWithBatchReturn:(BOOL)batch // batch for iOS 7 only
                        ascending:(BOOL)ascending
                       completion:(void (^)(BOOL done, id obj))completion;

- (void)getThumbnailForAssetObj:(id)asset
                       withSize:(CGSize)size  // size for iOS 8 only
                     completion:(void (^)(BOOL ret, UIImage *image))completion;

- (void)getURLForAssetObj:(id)asset
                /*usingPH:(BOOL)usingPH*/
               completion:(void (^)(BOOL ret, NSURL *URL))completion;

- (void)getAlbumsWithCompletion:(void (^)(BOOL ret, id obj))completion;

- (void)getPosterImageForAlbumObj:(id)album
                       completion:(void (^)(BOOL ret, id obj))completion;

- (void)getPhotosWithGroup:(id)group
                completion:(void (^)(BOOL ret, id obj))completion;

- (void)getImageForPhotoObj:(id)asset
                   withSize:(CGSize)size
                 completion:(void (^)(BOOL ret, UIImage *image))completion;

完整的moment优化方案和PhotoKit/AssetsLibrary集成接口实现代码(RJPhotoGallery)已经上传到GitHub, 有兴趣的童鞋可以参考一下. 程序内封装的ImageDataAPI是图片加载的model类, 实现了Moment/Album功能, 有需要的可以直接copy过去使用.

P.S. 欢迎各路童鞋大神吐槽和交流~~ 另外, 最近自己的拖延症有加重的趋势, 得治...

avatar
文章
阅读
粉丝
相关推荐
精通Moment.js：JavaScript日期和时间的艺术
1.3k阅读
 · 
5点赞
Stop! 你竟然还在使用 momentJs 处理时间问题
2.9k阅读
 · 
26点赞
为什么面试官这么爱问性能优化？
76k阅读
 · 
1.3k点赞
momentjs基础系列25.isoWeekYear方法
764阅读
 · 
16点赞
momentjs基础系列24.weekYear方法
640阅读
 · 
1点赞