花了两天半的时间基本实现了APP中让用户选择头像的功能（仿照手机版QQ），整理和总结如下——
思路 - UIImagePickerController 原先想要采用UIImagePickerController来实现这个功能，UIImagePickerController是UINavigationController的子类，是系统提供的拍摄、选择照片和视频的UI。具体来说，在选择头像这个功能中，头像的来源有两种——拍照和从相册选择，同时完成头像的选择后我们还应该能够让用户选择头像的范围以及大小。
若头像的来源为拍照：
1 2 3 4 5 6 UIImagePickerController * imagePickerController = [[UIImagePickerController alloc]init]; imagePickerController.delegate = self; imagePickerController.allowsEditing = YES;//允许编辑图片 imagePickerController.sourceType = UIImagePickerControllerSourceTypeCamera;//图片的来源为相机 //...还可以在这里修改相机的前后镜头 是否开启闪光灯等 [self presentViewController:imagePickerController animated:YES completion:nil];
同时，实现UIImagePickerDelegate中的如下方法：
1 2 3 4 5 - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info { UIImage * originImage = info[UIImagePickerControllerOriginalImage];//这样获取的是原图像 UIImage * editedImage = info[UIImagePickerControllerEditedImage];//这样获取的是修改后的图像 //...在这里实现图像的保存 }
如果头像的来源为相册，则只需修改imagePickerController的sourceType属性即可:
`imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;`
这样做就可以实现我们的需求了，但是这个方法的缺点也很明显，在这个方法中，我们使用的是系统封装好的UI，参考手机版QQ的选择头像我们可以发现，我们不能自定义相册中图片的分类、排版。同样的，我们也不能自定义编辑头像的界面，你不能将正方形的头像选框改成圆形的。因此，我们需要自己实现一个“UIImagePickerController”。在这个UIImagePickerController中，除了图片来源为拍照的情况下我们采用系统原生的UIImagePickerController以外，编辑图片和从相册中选取图片的功能我们都自己实现。
- PhotoKit和UICollectionView 参考博客：iOS 开发之照片框架详解
对于从相册选择图片的功能，我们可以采用PhotoKit来获取到图片的信息，并通过UICollectionView加以展示，这里主要给出PhotoKit的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 #import <Photos/Photos.h> PHFetchOptions *options = [[PHFetchOptions alloc]init]; options.sortDescriptors = @[[NSSortDescriptor sortDescriptorWithKey:@"creationDate" ascending:YES]]; PHFetchResult * results = [PHAsset fetchAssetsWithOptions:options]; //...这样就取得了照片库中所有照片并将它们通过创建时间排序 当然这只是最简单的做法 还可以创建多个不同类别的相册 //...然后我们要通过如下的代码取得照片 PHImageRequestOptions *requestOptions = [[PHImageRequestOptions alloc]init]; requestOptions.resizeMode = PHImageRequestOptionsResizeModeExact;//这里指定了照片的清晰度 [[PHImageManager defaultManager]requestImageForAsset:results[number] targetSize:CGSizeMake(length, length)//指定了照片的大小 contentMode:PHImageContentModeDefault options:requestOptions resultHandler:^(UIImage * result, NSDictionary * info) { //...在这里展示照片 }];
- 自定义编辑头像的界面 主要有两个方面
展示图片 我采用的方法是向一个UIScrollView中添加一个UIImageView
圆形选框 采用了两个CAShapeLayer，一个是选框的Layer，另一个是遮罩的Layer
实现展示图片的功能首先需要了解UIScrollView中frame，contentSize和contentOffset的区别。同时，为了将图片限制在我们所画的边框内，关键是设置合理的minimumZoomScale（最小缩放比例）以及实时更新ContentSize，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 - (void)imageConfiguration { self.imageView.frame = CGRectMake(WIDTH/2-LENGTH/2, HEIGHT/2-LENGTH/2-32, _imageSize.width, _imageSize.height); //设置图片的位置 CGFloat zoomScale =[self zoomScaleWithSize:_imageSize]; //计算初始的zoomScale CGFloat minimumZoomScale = [self minimumZoomScaleWithSize:_imageSize]; //计算最小的zoomScale CGFloat maximumZoomScale = (minimumZoomScale <= 1.2) ? 1.2 : minimumZoomScale; //这里的1.2可以替换成其他值 self.scrollView.minimumZoomScale = minimumZoomScale; self.scrollView.maximumZoomScale = maximumZoomScale; self.scrollView.zoomScale = zoomScale; self.scrollView.contentSize = CGSizeMake(_imageSize.width*zoomScale+WIDTH-LENGTH, _imageSize.height*zoomScale+HEIGHT-LENGTH-64); //为了保证将图片限制在边框内初始的ContentSize self.scrollView.contentOffset = CGPointMake(WIDTH/2-LENGTH/2, HEIGHT/2-LENGTH/2-32); //WIDTH是屏幕宽度 HEIGHT是屏幕高度 LENGTH是边框变长 } - (CGFloat)zoomScaleWithSize:(CGSize)size { CGFloat width = size.width; CGFloat height = size.height; CGFloat scale = (CGFloat)width/height; CGFloat screenScale = (CGFloat)WIDTH/HEIGHT; if (scale > screenScale) { if ((CGFloat)WIDTH/width*height>LENGTH) { return ((CGFloat)WIDTH / width); } else { return (LENGTH/height); } } else { if ((CGFloat)HEIGHT/height*width>LENGTH) { return ((CGFloat)HEIGHT/height); } else { return (LENGTH/width); } } } //思路是通过比较宽高比确定让图片正好容纳在屏幕内的比例，同时还保证图片能够包括边框 - (CGFloat)minimumZoomScaleWithSize:(CGSize)size { CGFloat width = size.width; CGFloat height = size.height; if ((LENGTH / height)>(LENGTH / width)) { return (LENGTH / height); } else { return (LENGTH / width); } } //只保证图片能够包括边框即可 - (void)scrollViewDidZoom:(UIScrollView *)scrollView { self.scrollView.contentSize = CGSizeMake(_imageSize.width*self.scrollView.zoomScale+WIDTH-LENGTH, _imageSize.height*self.scrollView.zoomScale+HEIGHT-LENGTH-64); } //UIScrollView代理 在缩放时能够正确的更新contentSize
圆形选框则比较简单，用一个CAShapeLayer即可实现，实现阴影遮罩（效果可以参考手机版QQ）则需要另一个CAShapeLayer，这里有一个问题，如果直接把遮罩设在self.view上，将会在页面切换的时候造成动画的不自然，我的解决方法是在self.view上添加一个UIView的实例contentView作为容器，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 self.contentView.layer.mask = self.maskLayer; [self.contentView.layer insertSublayer:self.borderLayer above:self.imageView.layer]; - (CAShapeLayer *)borderLayer { if (!_borderLayer) { //...在此设置边框 } return _borderLayer; } - (CAShapeLayer *)maskLayer { if (!_maskLayer) { _maskLayer = [CAShapeLayer layer]; [_maskLayer setFrame:CGRectMake(0, 0, WIDTH, HEIGHT)]; [_maskLayer setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5].CGColor]; //确定阴影的明暗 //...setPath确定无阴影的范围 } return _maskLayer; }
问题 - 修改导航栏的高度 1 2 3 4 5 6 7 8 9 10 11 - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; CGRect navRect = self.navigationController.navigationBar.frame; self.navigationController.navigationBar.frame = CGRectMake(navRect.origin.x, navRect.origin.y, navRect.size.width, 64); } - (void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated]; CGRect navRect = self.navigationController.navigationBar.frame; self.navigationController.navigationBar.frame = CGRectMake(navRect.origin.x, navRect.origin.y, navRect.size.width, 44); }
Title: 1 2 3 4 5 6 7 8 9 10 - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [self.navigationController.navigationBar setTitleVerticalPositionAdjustment:-10.0 forBarMetrics:UIBarMetricsDefault]; //-10.0可以根据需要调节 } - (void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated]; [self.navigationController.navigationBar setTitleVerticalPositionAdjustment:0.0 forBarMetrics:UIBarMetricsDefault]; }
1 2 [self.barButtonItem setBackgroundVerticalPositionAdjustment:-10.0 forBarMetrics:UIBarMetricsDefault]; //－10.0可以根据需要调节
- 隐藏状态栏 1 2 3 - (BOOL)prefersStatusBarHidden { return YES; }
需要实现代理方法- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView指定需要缩放的子控件
- 截取缩放过的UIImageView中的特定位置和大小的图片 1 2 3 4 5 6 7 8 9 10 - (UIImage *)imageWithZoomScale:(CGFloat)zoomScale { UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, zoomScale); [self.imageView drawViewHierarchyInRect:self.imageView.bounds afterScreenUpdates:YES]; UIImage * image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); CGRect imageRect = //...在这里指定位置和大小 CGImageRef sourceImageRef = [image CGImage]; CGImageRef targetImageRef = CGImageCreateWithImageInRect(sourceImageRef, imageRect); return [UIImage imageWithCGImage:targetImageRef]; }
评论和共享
