前言
上一篇我们大概了解Photos框架的基本知识，这一篇我们就开始动手，造一款高仿UIImagePickerController的五菱专属轮子。
相册分类
效果图
先来看一波效果，提提精神！
相册分类.gif
开始
UIImagePickerController继承的是UINavigationController，目的是点击相册分类可以Push进入照片界面，所以需要导航控制器作为基础。
@interface ASImagePickerController : UINavigationController
导航控制器的根控制器就是相册分类视图控制器（ASAlbumListController）
- (instancetype)init
{
self = [super initWithRootViewController:[[ASAlbumListController alloc] init]];
if (self) {
}
return self;
}
相册分类的视图控制器可以直接继承UITableViewController，这里小编就用UIViewController了。下一步导入Photos框架，这可是核心呀。
@import Photos;
@interface ASAlbumListController ()<UITableViewDataSource, UITableViewDelegate, PHPhotoLibraryChangeObserver>
//表视图，显示相册分类
@property (nonatomic, strong) UITableView *tableView;
//储存相册分类，包含allPhotos,SmartAlbum,Album
@property (nonatomic, strong) NSArray *sectionFetchResults;
//储存相册分类名
@property (nonatomic, strong) NSArray *sectionLocalizedTitles;
@end
配置数据源
#pragma mark - setup data
- (void)setupData {
PHFetchOptions *photosOptions = [[PHFetchOptions alloc] init];
//图片配置设置排序规则
photosOptions.sortDescriptors = @[[NSSortDescriptor sortDescriptorWithKey:@"creationDate" ascending:YES]];
//获取所有图片资源
PHFetchResult *allPhotos = [PHAsset fetchAssetsWithOptions:photosOptions];
//获取智能相册
PHFetchResult *smartAlbums = [PHAssetCollection fetchAssetCollectionsWithType:PHAssetCollectionTypeSmartAlbum subtype:PHAssetCollectionSubtypeAlbumRegular options:nil];
//获取用户自定义相册
PHFetchResult *topLevelUserCollections = [PHCollectionList fetchTopLevelUserCollectionsWithOptions:nil];
self.sectionFetchResults = @[allPhotos, smartAlbums, topLevelUserCollections];
self.sectionLocalizedTitles = @[@"", NSLocalizedString(@"Smart Albums", @""), NSLocalizedString(@"Albums", @"")];
}
相册缩略图预览（自定义Cell）
为了节省代码量，尽可能使用系统自带的Cell样式。UITableViewCellStyleDefault这个默认样式只有图片不符合需求，所以我就在此基础上做了些延伸
@interface ASAlbumCustomCell ()
@property (strong, nonatomic) UIImageView *frontImageView;
@property (strong, nonatomic) UIImageView *middleImageView;
@property (strong, nonatomic) UIImageView *lastImageView;
@end
这里得用懒加载，图片不够的话，对应的UIImageView也不必加载了，最多显示三张（这里偷懒了，设frame做了）
要注意的是视图的层级关系，要有一层一层的效果
#pragma mark - lazy load
- (UIImageView *)frontImageView {
if (!_frontImageView) {
_frontImageView = [[UIImageView alloc] initWithFrame:CGRectMake(8, 10, 69, 69)];
_frontImageView.contentMode = UIViewContentModeScaleAspectFill;
_frontImageView.clipsToBounds = YES;
[self.contentView addSubview:_frontImageView];
}
return _frontImageView;
}
- (UIImageView *)middleImageView {
if (!_middleImageView) {
_middleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 8, 65, 65)];
_middleImageView.contentMode = UIViewContentModeScaleAspectFill;
_middleImageView.clipsToBounds = YES;
[self.contentView insertSubview:_middleImageView belowSubview:self.frontImageView];
}
return _middleImageView;
}
- (UIImageView *)lastImageView {
if (!_lastImageView) {
_lastImageView = [[UIImageView alloc] initWithFrame:CGRectMake(12, 6, 61, 61)];
_lastImageView.contentMode = UIViewContentModeScaleAspectFill;
_lastImageView.clipsToBounds = YES;
[self.contentView insertSubview:_lastImageView belowSubview:self.middleImageView];
}
return _lastImageView;
}
现在需要用这三个叠加的UIImageView来替代UITableViewCell中的UIImageView，通过填充，制造了“假象”
#pragma mark - customPageViews
- (void)customPageViews {
self.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
CGSize itemSize = CGSizeMake(65.f, 65.f);
UIGraphicsBeginImageContext(itemSize);
CGRect imageRect = CGRectMake(0.f, 0.f, itemSize.width, itemSize.height);
[self.imageView.image drawInRect:imageRect];
self.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
配置数据，赋值UIImageView
#pragma mark - setupData
- (void)setupData {
for (int i = 0; i < self.thumbImages.count; i++) {
switch (i) {
case 0:{
self.frontImageView.image = self.thumbImages[i];
break;
}
case 1:{
self.middleImageView.image = self.thumbImages[i];
break;
}
case 2:{
self.lastImageView.image = self.thumbImages[i];
break;
}
default:
break;
}
}
}
数组类型属性thumbImages在赋值后需要在ImageView上生效，所以需要写一下Setter方法
- (void)setThumbImages:(NSArray *)thumbImages {
_thumbImages = thumbImages;
[self setupData];
}
UITableView的数据源代理
static NSString * const AllPhotosReuseIdentifier = @"AS_AllPhotosCell";
static NSString * const CollectionCellReuseIdentifier = @"AS_CollectionCell";
static const float ListRowHeight = 89.f;
#pragma mark - system delegate
#pragma mark -- UITableViewDataSource
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
ASAlbumCustomCell *cell = nil;
PHFetchResult *fetchResult = nil;
if (indexPath.section == 0) {
cell = [tableView dequeueReusableCellWithIdentifier:AllPhotosReuseIdentifier forIndexPath:indexPath];
fetchResult = self.sectionFetchResults[indexPath.section];
cell.textLabel.text = NSLocalizedString(@"All Photos", @"");
} else {
NSArray *collections = self.sectionFetchResults[indexPath.section];
if (!collections || collections.count <= indexPath.row) return nil;
PHCollection *collection = collections[indexPath.row];
cell = [tableView dequeueReusableCellWithIdentifier:collection.localIdentifier];
if (!cell) {
cell = [[ASAlbumCustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:collection.localIdentifier];
}
if ([collection isKindOfClass:[PHAssetCollection class]]) {
fetchResult = [PHAsset fetchAssetsInAssetCollection:(PHAssetCollection *)collection options:nil];
cell.textLabel.text = collection.localizedTitle;
}
//相册名
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.detailTextLabel.text = [NSString stringWithFormat:@"%zi", fetchResult.count];
//获取当前相册分类下的前三张图片
__block NSInteger fetchImageIndex = 0;
NSMutableArray *thumbsImages = [NSMutableArray arrayWithCapacity:3];
for (NSInteger i = 0; i < MIN(fetchResult.count, 3); i++) {
fetchImageIndex++;
[[PHCachingImageManager defaultManager] requestImageForAsset:fetchResult[i] targetSize:CGSizeMake(69, 69) contentMode:PHImageContentModeAspectFit options:nil resultHandler:^(UIImage * _Nullable result, NSDictionary * _Nullable info) {
if (result) [thumbsImages addObject:result];
if (--fetchImageIndex == 0) {
cell.thumbImages = thumbsImages;
}
}];
}
return cell;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
NSInteger numberOfRows = 0;
//第一个section就allPhotos一行
if (section == 0) {
numberOfRows = 1;
} else {
PHFetchResult *fetchResult = self.sectionFetchResults[section];
numberOfRows = fetchResult.count;
}
return numberOfRows;
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return self.sectionFetchResults.count;
}
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
return self.sectionLocalizedTitles && self.sectionLocalizedTitles.count > section ? self.sectionLocalizedTitles[section] : @"";
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return ListRowHeight;
}
观察相册资源变化
Photos为开发者提供了PHPhotoLibraryChangeObserver，实现对相册资源变化的检测。
首先，先注册观察者
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
//注册观察相册变化的观察者
[[PHPhotoLibrary sharedPhotoLibrary] registerChangeObserver:self];
}
其次，添加协议
@interface ASAlbumListController ()<PHPhotoLibraryChangeObserver>
图片资源一旦有变化就会调用photoLibraryDidChange:，所以我们需要实现此方法，对相册变化做出反应
#pragma mark - PHPhotoLibraryChangeObserver
- (void)photoLibraryDidChange:(PHChange *)changeInstance {
//观察者，在后台队列执行，所以刷新界面需要在主队列中
dispatch_async(dispatch_get_main_queue(), ^{
//深拷贝，备份比较
NSMutableArray *updatedSectionFetchResults = [self.sectionFetchResults mutableCopy];
__block BOOL reloadRequired = NO;
[self.sectionFetchResults enumerateObjectsUsingBlock:^(PHFetchResult *collectionsFetchResult, NSUInteger index, BOOL *stop) {
//根据原先的相片集的数据创建变化对象
PHFetchResultChangeDetails *changeDetails = [changeInstance changeDetailsForFetchResult:collectionsFetchResult];
//判断变化对象是否为空，不为空则代表有相册有变化
if (changeDetails != nil) {
//变化后的数据替换变化前的数据
[updatedSectionFetchResults replaceObjectAtIndex:index withObject:[changeDetails fetchResultAfterChanges]];
reloadRequired = YES;
}
}];
if (reloadRequired) {
//刷新数据
self.sectionFetchResults = updatedSectionFetchResults;
[self.tableView reloadData];
}
});
}
最后，销毁观察者
- (void)dealloc {
//销毁观察相册变化的观察者
[[PHPhotoLibrary sharedPhotoLibrary] unregisterChangeObserver:self];
}
是不是很简单
现在可以运行起来，看一下效果咯~
如果有问题可以看一下小编提供的Demo
结束语
轮毂雏形出来了哟。这篇都是比较基础的用法，所以代码占了主要部分，里面就穿插了一点小编的思路。
下一篇，对应相册分类下的图片显示（包含了API中提到的缓存预加载策略）以及多选功能，先来瞄一眼效果~
照片展示.gif
ASImagePicker也在持续更新中...
https://github.com/alanshen0118/ASImagePicker
文章中有任何错误希望读者能积极指出，我会及时更正。
如果喜欢，请持续关注，顺便点个喜欢噢👇👇👇帮五菱加加油~@_@
网友评论