IOS設置圓角用戶頭像

2019-11-14 19:10:36

字體：大中小

來源：轉載

供稿：網友

　　在App中有一個常見的功能，從系統相冊或者打開照相機得到一張圖片，然后作為用戶的頭像。從相冊中選取的圖片明明都是矩形的圖片，但是展示到界面上卻變成圓形圖片，這個神奇的效果是如何實現的呢？

　　請大家跟著下面的步驟，去實現選取并展示圓角頭像的功能吧！

一、設置顯示頭像的圓角圖片

　　1. 顯示用戶頭像用UIImageView實現，添加默認圖片后效果如下圖所示，頭像顯示為矩形圖片。

　　代碼實現：

//  ViewController.m//  SetUserImage////  Created by jerei on 15-4-26.//  Copyright (c) 2015年 jerei. All rights reserved.//#import "ViewController.h"#define kWidth self.view.bounds.size.width#define kWH 100@interface ViewController (){    UIImageView *_userImage;}@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];     [self addUserImageView];}#PRagma mark 添加顯示用戶頭像的ImageView-(void)addUserImageView{    _userImage = [[UIImageView alloc] initWithFrame:CGRectMake((kWidth-kWH)/2, 100, kWH, kWH)];    _userImage.image = [UIImage imageNamed:@"img1.png"];    [self.view addSubview:_userImage];}@end

　　2. UIView里面有一個屬性layer，CALayer類主要為內容展示和動畫操作，在這里我們可以通過對layer的設置來得到圓角的頭像。

　　讓我們一起在.m文件中添加一個設置圓角圖片的方法吧！

　　代碼：

#pragma mark 設置顯示用戶頭像的圓角ImageView- (void)setUserImageView{    //圓角的半徑    _userImage.layer.cornerRadius = 50;    //是否顯示圓角以外的部分    _userImage.layer.masksToBounds = YES;    //邊框寬度    _userImage.layer.borderWidth = 5;    //邊框顏色_userImage.layer.borderColor = [[UIColor colorWithRed:0.86 green:0.52 blue:0.73 alpha:1] CGColor];}

　　除了圓形，我們還可以將其設置為其他形狀，如下圖所示。假設顯示的頭像為正方形，也就是寬高相等，那么當layer.cornerRadius等于頭像寬度一半時，正好為正圓形。

二、為用戶頭像添加單擊事件

　　UIImageView只是用來做圖片展示的，因此默認不響應用戶的點擊事件，如果想讓其和按鈕一樣響應點擊事件，需要先開啟用戶交互，然后通過添加手勢來實現點擊效果。

　　代碼：

#pragma mark 為圖片添加單擊手勢- (void)addSingleTap{    _userImage.userInteractionEnabled = YES;    UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapUserImage:)];    //設置點擊的手指根數    [singleTap setNumberOfTouchesRequired:1];    //設置單擊次數    [singleTap setNumberOfTapsRequired:1];    //把單擊手勢加到用戶頭像圖片上    [_userImage addGestureRecognizer:singleTap];}#pragma mark 單擊圖片響應的方法- (void)tapUserImage:(UITapGestureRecognizer*)tap{    NSLog(@"click userImage...");}

三、選取圖片

　　用戶頭像圖片的選取一般為兩種，一是直接從手機相冊中選擇，二是打開照相機現拍一張。無論是哪種方式，都用到同一個類UIImagePickerController。

UIImagePickerController是圖片選取控制器，用于從手機相冊選取圖片，選取圖片后，將調用代理中方法，因此在文件的開頭，要遵守該類的協議。

　　代碼1：

@interface ViewController ()<UIImagePickerControllerDelegate,UINavigationControllerDelegate>{    UIImageView *_userImage;}@end

　　代碼2：

#pragma mark 單擊圖片響應的方法- (void)tapUserImage:(UITapGestureRecognizer*)tap{    NSLog(@"click userImage...");    [self openThePhotoAlbum];}#pragma mark 打開系統相冊或照相機- (void)openThePhotoAlbum{    //創建圖片選取器對象    UIImagePickerController * pickerViwController = [[UIImagePickerController alloc] init];    /*     圖片來源     UIImagePickerControllerSourceTypePhotoLibrary：表示顯示所有的照片     UIImagePickerControllerSourceTypeCamera：表示從攝像頭選取照片     UIImagePickerControllerSourceTypeSavedPhotosAlbum：表示僅僅從相冊中選取照片。     */    pickerViwController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;        //允許用戶編輯圖片 (YES可以編輯，NO只能選擇照片)    //    pickerViwController.allowsEditing = YES;        //設置代理    pickerViwController.delegate = self;        [self presentViewController:pickerViwController animated:YES completion:nil];}#pragma mark 相冊協議中方法，選中某張圖片后調用方法- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{    [self dismissViewControllerAnimated:YES completion:nil];        //頭像設置為選中的圖片    [info objectForKey:UIImagePickerControllerOriginalImage];    UIImage* image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];    _userImage.image = image;}