iOS开发笔记：实现修改头像

刚转行iOS的搬砖工人，在此记录下这条路上的点点滴滴，共勉

重点

流程

一般在APP中，修改头像是最基本的功能之一了。一般是两种方式的修改：从相册选择图片或者拍照。那么这里就来讲一下如何具体实现这个功能。

Step1：点击头像 ->手势（UITapGestureRecognizer）

首先，点击头像。因为头像是直接放在ImageView中的，默认情况下当我们点击头像的时候，头像是不会有任何反应的。因此，我们需要给头像的ImageView添加一个点击事件，方法如下：

    /**
     *  添加手势：也就是当用户点击头像了之后，对这个操作进行反应
     */
        //允许用户交互
    _myHeadPortrait.userInteractionEnabled = YES;
        //初始化一个手势
    UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]initWithTarget:self
                                                                action:@selector(alterHeadPortrait:)];
        //给ImageView添加手势
    [_myHeadPortrait addGestureRecognizer:singleTap];
    }

Step2：弹出选择提示->提示框（UIAlertController）

//  方法：alterHeadPortrait
-(void)alterHeadPortrait:(UITapGestureRecognizer *)gesture{
    /**
     *  弹出提示框
     */
        //初始化提示框
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil message:nil preferredStyle:UIAlertControllerStyleActionSheet];
        //按钮：从相册选择，类型：UIAlertActionStyleDefault
    [alert addAction:[UIAlertAction actionWithTitle:@"从相册选择" style:UIAlertActionStyleDefault handler:nil]];
        //按钮：拍照，类型：UIAlertActionStyleDefault
    [alert addAction:[UIAlertAction actionWithTitle:@"拍照" style:UIAlertActionStyleDefault handler:nil]];
        //按钮：取消，类型：UIAlertActionStyleCancel
    [alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil]];
    [self presentViewController:alert animated:YES completion:nil];
}

Step3：从相册选择或者拍照选择头像->UIImagePickerController

<UINavigationControllerDelegate,UIImagePickerControllerDelegate>

进行相册图片选择或者相机拍照的实现代码如下：

            //初始化UIImagePickerController
        UIImagePickerController *PickerImage = [[UIImagePickerController alloc]init];
            //获取方式1：通过相册（呈现全部相册），UIImagePickerControllerSourceTypePhotoLibrary
            //获取方式2，通过相机，UIImagePickerControllerSourceTypeCamera
            //获取方方式3，通过相册（呈现全部图片），UIImagePickerControllerSourceTypeSavedPhotosAlbum
        PickerImage.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;//方式1
            //允许编辑，即放大裁剪
        PickerImage.allowsEditing = YES;
            //自代理
        PickerImage.delegate = self;
            //页面跳转
        [self presentViewController:PickerImage animated:YES completion:nil];

运行效果如图：

Step4：替换头像->大功告成！

现在，我们已经能够打开相册，或者拍照（拍照功能模拟机无法拍照，会报错，只有用真机测试）。
可是问题来了，现在选择了新图片，确定之后，头像还是原来的头像，并没有更新。这是因为我们这里还没有对图片选择完全之后的代理方法进行实现：

//PickerImage完成后的代理方法
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
    //定义一个newPhoto，用来存放我们选择的图片。
    UIImage *newPhoto = [info objectForKey:@"UIImagePickerControllerEditedImage"];
    //把newPhono设置成头像
    _myHeadPortrait.image = newPhoto;
    //关闭当前界面，即回到主界面去
    [self dismissViewControllerAnimated:YES completion:nil];
}

大功告成：

完全代码如下：

#import "ViewController.h"

@interface ViewController ()<UINavigationControllerDelegate,UIImagePickerControllerDelegate>
@property (strong, nonatomic) IBOutlet UIImageView *myHeadPortrait;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //  调用setHeadPortrait方法
    [self setHeadPortrait];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

//  方法：设置头像样式
-(void)setHeadPortrait{
    //  把头像设置成圆形
    self.myHeadPortrait.layer.cornerRadius=self.myHeadPortrait.frame.size.width/2;
    self.myHeadPortrait.layer.masksToBounds=YES;
    //  给头像加一个圆形边框
    self.myHeadPortrait.layer.borderWidth = 1.5f;
    self.myHeadPortrait.layer.borderColor = [UIColor whiteColor].CGColor;
    
    /**
     *  添加手势：也就是当用户点击头像了之后，对这个操作进行反应
     */
        //允许用户交互
    _myHeadPortrait.userInteractionEnabled = YES;
    
        //初始化一个手势
    UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]initWithTarget:self
                                                                action:@selector(alterHeadPortrait:)];
    
        //给imageView添加手势
    [_myHeadPortrait addGestureRecognizer:singleTap];
    }

//  方法：alterHeadPortrait
-(void)alterHeadPortrait:(UITapGestureRecognizer *)gesture{
    /**
     *  弹出提示框
     */
            //初始化提示框
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil message:nil preferredStyle:UIAlertControllerStyleActionSheet];
            //按钮：从相册选择，类型：UIAlertActionStyleDefault
    [alert addAction:[UIAlertAction actionWithTitle:@"从相册选择" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            //初始化UIImagePickerController
        UIImagePickerController *PickerImage = [[UIImagePickerController alloc]init];
            //获取方式1：通过相册（呈现全部相册），UIImagePickerControllerSourceTypePhotoLibrary
            //获取方式2，通过相机，UIImagePickerControllerSourceTypeCamera
            //获取方法3，通过相册（呈现全部图片），UIImagePickerControllerSourceTypeSavedPhotosAlbum
        PickerImage.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
            //允许编辑，即放大裁剪
        PickerImage.allowsEditing = YES;
            //自代理
        PickerImage.delegate = self;
            //页面跳转
        [self presentViewController:PickerImage animated:YES completion:nil];
    }]];
        //按钮：拍照，类型：UIAlertActionStyleDefault
    [alert addAction:[UIAlertAction actionWithTitle:@"拍照" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action){
        /**
         其实和从相册选择一样，只是获取方式不同，前面是通过相册，而现在，我们要通过相机的方式
         */
        UIImagePickerController *PickerImage = [[UIImagePickerController alloc]init];
            //获取方式:通过相机
        PickerImage.sourceType = UIImagePickerControllerSourceTypeCamera;
        PickerImage.allowsEditing = YES;
        PickerImage.delegate = self;
        [self presentViewController:PickerImage animated:YES completion:nil];
    }]];
        //按钮：取消，类型：UIAlertActionStyleCancel
    [alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil]];
    [self presentViewController:alert animated:YES completion:nil];
}
//PickerImage完成后的代理方法
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
    //定义一个newPhoto，用来存放我们选择的图片。
    UIImage *newPhoto = [info objectForKey:@"UIImagePickerControllerEditedImage"];
    _myHeadPortrait.image = newPhoto;
    [self dismissViewControllerAnimated:YES completion:nil];
}

@end