IOS 設定圓角帳戶圖片

標籤：

　　在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;}

IOS 設定圓角帳戶圖片