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/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM