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