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

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。