在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)/, , 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 = ;
//是否显示圆角以外的部分
_userImage.layer.masksToBounds = YES;
//边框宽度
_userImage.layer.borderWidth = ;
//边框颜色
_userImage.layer.borderColor = [[UIColor colorWithRed:0.86 green:0.52 blue:0.73 alpha:] CGColor];
}

  除了圆形,我们还可以将其设置为其他形状,如下图所示。假设显示的头像为正方形,也就是宽高相等,那么当layer.cornerRadius等于头像宽度一半时,正好为正圆形。

二、为用户头像添加单击事件

  UIImageView只是用来做图片展示的,因此默认不响应用户的点击事件,如果想让其和按钮一样响应点击事件,需要先开启用户交互,然后通过添加手势来实现点击效果。

  代码:

#pragma mark 为图片添加单击手势
- (void)addSingleTap
{
_userImage.userInteractionEnabled = YES;
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapUserImage:)];
//设置点击的手指根数
[singleTap setNumberOfTouchesRequired:];
//设置单击次数
[singleTap setNumberOfTapsRequired:];
//把单击手势加到用户头像图片上
[_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/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
 

IOS 设置圆角用户头像的更多相关文章

  1. iOS设置圆角的方法及指定圆角的位置

    在iOS开发中,我们经常会遇到设置圆角的问题, 以下是几种设置圆角的方法: 第一种方法: 通过设置layer的属性 代码: UIImageView *imageView = [[UIImageView ...

  2. 在Windows客户端自动设置AD用户头像

    Windows现在可以设置用户头像,并在开始菜单显示.如果你安装了Exchange或者Lync,那么可以在Outlook或者Skype里看到用户的头像.这个图片是存储在AD用户属性里的.对于桌面电脑的 ...

  3. iOS设置圆角矩形和阴影效果

    1.设置圆角矩形 //设置dropview属性 _dropView.backgroundColor=[[UIColor whiteColor] colorWithAlphaComponent:0.8] ...

  4. iOS设置圆角的常用方法

    //第一种方法:最常用的方法,但是性能最差 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100 ...

  5. iOS设置圆角的四种方法

    小小圆角问题,正常情况下,我们不需要过多关心,但当屏幕内比较多的时候,还是有必要了解下性能问题的 一.设置CALayer的cornerRadius 这是最常用的,也是最简单的. cornerRadiu ...

  6. iOS设置圆角的三种方式

    第一种方法:通过设置layer的属性 最简单的一种,但是很影响性能,一般在正常的开发中使用很少. ? 1 2 3 4 5 6 7 UIImageView *imageView = [[UIImageV ...

  7. iOS之设置用户头像的圆角

    1. 显示用户头像用UIImageView实现,添加默认图片后效果如下图所示,头像显示为矩形图片. 代码实现: // ViewController.m // SetUserImage // // Cr ...

  8. iOS一个简单的设置圆角不引起性能问题的分类

    http://www.cocoachina.com/articles/18756 iOS设置圆角矩形和阴影效果 https://www.cnblogs.com/rayshen/p/4900336.ht ...

  9. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

随机推荐

  1. IE访问历史记录恢复工具pasco

    IE访问历史记录恢复工具pasco IE浏览器会自动记录用户访问网站的操作,并将这些信息保存在IE缓存中的index.dat文件中.通过分析这些历史记录,可以还原用户行为.为了便于数字取证,Kali ...

  2. codevs 2292 图灵机游戏

    2292 图灵机游戏  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 黄金 Gold   题目描述 Description [Shadow 1]第二题 Shadow最近知道了图灵 ...

  3. luoguP1659 [国际集训队]拉拉队排练 manacher算法

    直接统计长度为$i$的回文子串有多少个 然后倒叙枚举长度,快速幂统计一下即可 复杂度$O(n \log n)$ #include <cstdio> #include <cstring ...

  4. bzoj 3837 (随机过题法了解一下)

    3837: [Pa2013]Filary Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 395  Solved: 74[Submit][Status] ...

  5. 谈应用环境下的TIME_WAIT和CLOSE_WAIT[转]

    昨天解决了一个HttpClient调用错误导致的服务器异常,具体过程如下: http://blog.csdn.net/shootyou/article/details/6615051 里头的分析过程有 ...

  6. python IDLE 自动提示功能

    \Python27\Lib\idlelib\目录下 config-extensions.def文件修改等待时间 [AutoComplete] enable=1 popupwait=2000(2000表 ...

  7. Ubuntu16.04配置Android5.0编译环境

    1.安装jdk7 Ubuntu16.04的安装源已经默认没有openjdk7了,所以要自己手动添加仓库,如下: $ sudo add-apt-repository ppa:openjdk-r/ppa ...

  8. 重温PHP面向对象的三大特性

    PHP面向对象的三大特性:封装性.继承性.多态性. 1. 封装性: 也称为信息隐藏,就是将一个类的使用和实现分开,只保留部分接口和方法与外部联系,或者说只公开了一些供开发人员使用的方法. 于是开发人员 ...

  9. PHPExcel 导出2003和2007的excel文档实例

    require_once 'common/excel/PHPExcel.php'; require_once 'common/excel/phpExcel/Writer/Excel2007.php'; ...

  10. C++ Primer 学习笔记_34_STL实践与分析(8) --引言、pair类型、关联容器

    STL实践与分析 --引言.pair类型.关联容器 引言:     关联容器与顺序容器的本质差别在于:关联容器通过键[key]来存储和读取元素,而顺序容器则通过元素在容器中的位置顺序的存取元素. ma ...