IOS Set rounded user picture

There is a common feature in the app, from the system album or open the camera to get a picture, and then as the user's avatar. Pictures from the album are all pictures of the rectangle, but the display to the interface has become a circular picture, the magic effect is how to achieve it?

Please follow the steps below to realize the function of selecting and displaying the rounded head!

First, set the picture of the fillet of the display head

1. Display the user picture with Uiimageview implementation, add the default picture after the effect as shown, the avatar is displayed as a rectangular picture.

Code implementation:

  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 adds a imageview-(void) adduserimageview{    _userimage = [[Uiimageview alloc] initwithframe that displays the user's avatar: CGRectMake ((kwidth-kwh)/2, kwh, kwh)];    _userimage.image = [UIImage imagenamed:@ "Img1.png"];    [Self.view addsubview:_userimage];} @end

2. UIView there is an attribute Layer,calayer class is mainly for content display and animation operations, where we can get rounded heads by setting the layer.

Let's add a way to set the fillet picture in the. m file!

　　Code:

#pragma mark sets the Fillet imageview-(void) setuserimageview{    //Fillet radius of the user picture    _userimage.layer.cornerradius =    Whether to show parts other than fillet    _userimage.layer.maskstobounds = YES;    Border Width    _userimage.layer.borderwidth = 5;    Border color _userimage.layer.bordercolor = [[Uicolor colorwithred:0.86 green:0.52 blue:0.73 alpha:1] CGColor];}

In addition to the circle, we can also set it to another shape, as shown in. Assuming that the avatar is a square, which is the same width and height, then when the Layer.cornerradius equals half the width of the avatar, it is just a circle.

Second, add a click event for the user picture

Uiimageview is only used for image display, so the default does not respond to the user's click events, if you want to let it and the button to respond to click events, you need to first turn on user interaction, and then by adding gestures to achieve the click Effect.

　Code:

#pragma mark adds a click gesture for the picture-(void) addsingletap{    _userimage.userinteractionenabled = YES;    UITapGestureRecognizer *singletap = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector ( Tapuserimage:)];    Set the number of fingers to click    [Singletap setnumberoftouchesrequired:1];    Set the number of clicks    [Singletap setnumberoftapsrequired:1];    Add a click gesture to the picture of the user's Avatar    [_userimage Addgesturerecognizer:singletap];} #pragma mark clicks the picture response Method-(void) Tapuserimage: (uitapgesturerecognizer*) tap{    NSLog (@ "click Userimage ...");}

Third, select pictures

The image of the user avatar is generally two kinds, one is directly from the mobile phone album selection, the second is to open the camera is now shot a picture. Either way, the same class Uiimagepickercontroller is used.

Uiimagepickercontroller is a picture selection controller, used to select a picture from a phone album, select a picture, will call the proxy method, so at the beginning of the file, to abide by the protocol of the class.

　　Code Listing 1:

@interface Viewcontroller () <uiimagepickercontrollerdelegate,uinavigationcontrollerdelegate>{    Uiimageview *_userimage;} @end

Code Listing 2:

#pragma mark clicks the picture response Method-(void) Tapuserimage: (uitapgesturerecognizer*) tap{NSLog (@ "click Userimage ..."); [Self openthephotoalbum];} #pragma mark open System album or Camera-(void) openthephotoalbum{//Create Picture Picker Object Uiimagepickercontroller * Pickerviwcontroller = [[Uiim    Agepickercontroller alloc] init]; /* Image source Uiimagepickercontrollersourcetypephotolibrary: Show all photos Uiimagepickercontrollersourcetypecamera: from webcam     Select Photo uiimagepickercontrollersourcetypesavedphotosalbum: To select a photo from the album only.        */pickerviwcontroller.sourcetype = uiimagepickercontrollersourcetypephotolibrary;        Allow users to edit pictures (YES can be edited, no can only select photos)//pickerviwcontroller.allowsediting = yes;        Set proxy pickerviwcontroller.delegate = self; [Self Presentviewcontroller:pickerviwcontroller animated:yes completion:nil];} #pragma the Mark Album protocol method, call method after selecting a picture (void) Imagepickercontroller: (Uiimagepickercontroller *) picker Didfinishpickingmediawithinfo: (nsdictionary *) info{[self dismissviewcontrolleranimated:yes compLetion:nil];    The avatar is set to the selected picture [info objectforkey:uiimagepickercontrolleroriginalimage];    uiimage* image = [info objectforkey:@ "Uiimagepickercontrolleroriginalimage"]; _userimage.image = image;}

IOS Set rounded user picture