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

时间: 2024-10-10 06:11:34

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

iOS设置圆角及圆形图片

方方正正的样式往往会显得很生硬,而圆角的样式会让人产生别样的亲切感,现在越来越多地用到圆角,诸如用户头像之类的图片也大都用圆形来显示,本文就介绍如何设置按钮.文本框的圆角以及制作圆形的图片. 先来看看效果图: 如效果图所示,我们制作了一个圆形的头像,一个完全半圆的圆角按钮,一个小圆角的按钮,以及一个带边框且边框为圆角的label. 大概思路如下: View都有一个layer的属性,我们正是通过layer的一些设置来达到圆角的目的,因此诸如UIImageView.UIButton.UILabel等

iOS设置圆角的四种方法

一.设置CALayer的cornerRadius cornerRadius属性影响layer显示的background颜色和前景框border,对layer的contents不起作用.故一个imgView(类型为UIImageView)的image不为空,设置imgView.layer的cornerRadius,是看不出显示圆角效果的,因为image是imgView.layer的contents部分. 这种情况下将layer的masksToBounds属性设置为YES,可以正确的绘制出圆角效果.

iOS设置圆角的常用方法

//第一种方法:最常用的方法,但是性能最差 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; imageView.image = [UIImage imageNamed:@"晚起的蚂蚁.jpg"]; //只需要设置layer层的两个属性 //设置圆角 imageView.layer.cornerRadius = imageView.frame.size.

iOS之设置用户头像的圆角

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.

Powershell管理系列(二十四)PowerShell操作之批量启用Exchange用户头像

-----提供AD\Exchange\Lync\Sharepoint\CRM\SC\O365等微软产品实施及外包,QQ:185426445.电话18666943750 由于组织机构比较大,分支机构的员工可能都不能相互认识,可以在GAL中除了显示联系人信息还可以显示他的照片.在Exchange server 2013里面导入图片有两种方式,一种是使用Import-RecipientDataProperty,但是对图片大小有限制,图片必须是 JPEG 格式的文件,且不得大于 10 KB:第二种是使用

iOS图片设置圆角

一般我们在iOS开发的过程中设置圆角都是如下这样设置的. imageView.clipsToBounds = YES; [imageView.layer setCornerRadius:50]; 这样设置会触发离屏渲染,比较消耗性能.比如当一个页面上有十几头像这样设置了圆角 会明显感觉到卡顿. 这种就是最常用的,也是最耗性能的. 注意:ios9.0之后对UIImageView的圆角设置做了优化,UIImageView这样设置圆角 不会触发离屏渲染,ios9.0之前还是会触发离屏渲染.而UIBut

iOS图片设置圆角性能优化

问题 圆角虽好,但如果使用不当,它就是你的帧数杀手,特别当它出现在滚动列表的时候.下面来看圆角如何毁掉你的流畅度的. 实测 layer.cornerRadius 我创建了一个简单地UITableView视图,为每个cell添加了2个UIImageView实例,且为UIImageView实例进行如下设置 aImageView.layer.cornerRadius = aImageView.frame.size.width/2.0; aImageView.layer.masksToBounds = 

iOS图片圆角设置的正确姿势

最近从上一家公司辞职,一直处于待业状态,顺便再家里带带闺女,今天有时间,所以写点东西,希望刚开始接触iOS开发的小白能够有所收获. 在iOS开发中圆角图片很常见,但是我们一般在设置图片圆角的时候几乎都是这样设置的: UIImageView *image = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 50, 50)]; image.layer.cornerRadius = 25.0; image.layer.masksToBoun

iOS 设置控件圆角及边框

1. 设置圆角: self.view.layer.masksToBounds = YES; self.view.layer.cornerRadius = 10.0f; 2. 添加边框: self.layer.borderWidth = 5.0f; self.layer.borderColor = [[UIColor colorWithRed:164.0/255 green:142.0/255 blue:247.0/255 alpha:1.0] CGColor]; 示例: