iOS

iOS Programming 101: How To Create Circular Profile Picture and Rounded Corner Image


One of the changes in iOS 7 is that it favors the use of circular image over square image. You can find circular icons or images in stock apps such as Contacts and Phone. In this short post, we’ll explore the CALayer class and see how you can apply it to create circular image or image with rounded corner.

You may not heard of the CALayer class. But you should have used it in some ways if you’ve built an app. Every view in the UIKit (e.g. UIView, UIImageView) is backed by an instance of the CALayer class (i.e. layer object). The layer object is designed to manage the backing store for the view and handles view-related animations.
The layer object provides various attributes that can be set to control the visual content of the view such as:

  • Background color
  • Border and border width
  • Shadow color, width, etc
  • Opacity
  • Corner radius

The corner radius is the attribute that we’ll use to draw rounded corner and circular image.

Circular Image using calayer

As always, the best way to understand how CALayer works is to use it. We’ll create a simple profile view with a circular profile photo.

A Glance at the demo Project

First, download this project template to start with. It already pre-built the profile view for you but the profile image is in squared form when you compile and run the app. The demo project is very simple. The only class you need to know is the ProfileViewController that is associated with the view in the storyboard.

We also link up the profile image (UIImageView) with the profileImageView property in the ProfileViewController.h.

square-image-profile

Creating a Circular Profile Image

Okay, let’s see how we can change the corner radius and turn the profile image into a circular image.

Open the ProfileViewController.m and add the following lines of code in the viewDidLoad: method:

For every view, there is a bundled layer property. So the first line of the above is to set the corner radius of the layer object (i.e. an instance of CALayer class). To make a circular image from a squared image, the radius is set to the half of the width of UIImageView. For instance, if the width of squared image is 100 pixels. The radius is set to 50 pixels. Secondly, you have to set the clipsToBounds property to YES in order to make the layer works.

If you compile and run the app now, you’ll have a profile photo in circular form.

circular-image-profile

Easy, right? With just two lines of code, the image is changed from a squared image to a circular image. No Photoshop is required.

Adding Border

Next, let’s make the profile looks even better by applying a border. Again, it only takes two more lines. In the viewDidLoad: method, add these two lines of code after setting the corner radius:

The above code is very straightforward. We simply set the border width and the border color. Compile and run the app again. You should now see a white border around the profile photo.

Creating Rounded Corner Image

You can apply the same technique to create rounded corner image. The trick is to change the corner radius and set it to other values. Say set the radius to 10,

The profile image should now be displayed in rounded corner.

square-corner-image-profile

For your reference, download the complete Xcode project from here.

What do you think about this tutorial? Leave me comment to share your thought.

This is a sample chapter of the upcoming mini guide, which is included in the starter/complete package of Learn iOS 7 Programming from Scratch.

macOS
macOS Programming: Working with Table Views
iOS
Using Braintree to Accept Credit Card Payment in iOS Apps
iOS
Understanding Git Version Control and Learn how to Use it in Xcode 9
  • Hugh Mbaezue

    Thank you. Ned this for up coming projects.


  • Arkadi

    ArkadiArkadi

    Author Reply

    Damn it all to hell, why o why didn’t you post this totourial yesterday or the day before? I spent most of the last to day working on just this feature for an app that I’m writing. Guess greate minds think a like.

    Ps wanted to know if you’re planing to do a tutorial about combining storyboards and nib files. Like have an app in a storyboard with a uitableview and make the cell in a nib


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      No plan for that as we have written a similar post before.

      http://104.131.120.244/customize-table-view-cells-for-uitableview/

      Instead, I may publish a post about cell customization using prototype cell.


      • Arkadi

        ArkadiArkadi

        Author Reply

        Not what I meant. For some situations working with prototype cells in storyboards is very difficult. So you’ll want to combine a storybourd that handels the app logic flow with nib that handle complex cell ui layout.

        I saw some post about this technic online but no one explained how to conect the two approaches. I’ll re read your post might give me some ideas. Thanks anyhow.


    • PD

      PDPD

      Author Reply

      “guess great minds think a like.” So what you are implying is that you spent most of your day to write 3 lines of code. I will admit to taking a much more complex approach. Im happy I saw this lol, jaw drop


  • LittlePeculiar

    Very well done, as always. Thank you


  • Johnatan Uribe

    Why is this code affecting the rabbit image only and not the background. (new to objective-c)


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      Yes, just apply the same technique to the UIImageView of your prototype cell.


  • Jorge Casariego

    Great Tutorial!


  • Khỉ Quậy

    Is that use for all photo in all images in storyboard? @simonng:disqus


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      Would you please elaborate more? I’m not too sure if I understand your question correctly.


  • Kenan

    KenanKenan

    Author Reply

    it helped. Thanks.


  • StephaneP

    StephanePStephaneP

    Author Reply

    I’ve used this method a few times but let’s say you have a table with rounded images for users, I found using an image mask to be the most performant way.


  • Munirah

    MunirahMunirah

    Author Reply

    Hi,how about if that image we get from photo library & its rectangle.How to do that?


  • simonasscores

    You missed not clean corners ; )
    Good luck


  • Lloyd Lim

    Lloyd LimLloyd Lim

    Author Reply

    Fantastic. Thank you.

    – Lloyd


  • Hales ❤

    Hales ❤Hales ❤

    Author Reply

    Worked for me, so fast. Thanks!


  • waye

    wayewaye

    Author Reply

    very neat trick!


  • Iuri Chiba

    Iuri ChibaIuri Chiba

    Author Reply

    Hi! First of all, awesome tutorial, it works great! But I’ve encountered a problem you didn’t approach in this article (even though it’s something you guys encountered as well, given the screenshots). The problem is that if we add the borders, the image leaks a bit – any way to fix that? Thanks!


  • erril

    errilerril

    Author Reply

    can you do this again but use autolayout? when you rotate this…the circle disappears on the image


  • kumaresh

    kumareshkumaresh

    Author Reply

    is there any possibility of making an image in hexagon shape in interface builder property?


  • Luís Felipe Mazoni

    Nice, really useful. Thanks a lot


  • Dougie

    DougieDougie

    Author Reply

    I’ve found this is not calculated correctly in viewDidLoad nor viewWillAppear.

    It will work if you place this dynamic corner radius code in viewWillLayoutSubviews()
    See: http://stackoverflow.com/questions/16796783/uiviewcontroller-viewdidload-incorrect-width-height


  • Fernanda

    FernandaFernanda

    Author Reply

    Thanks 😀


  • Dimitris Kalaitzidis

    Hi, i created a simple UiimageView class that let’s you create round or circular avatar images and it’s IBDesignable so you can make all the changes via storyboard.

    https://github.com/dkalaitzidis/SwiftyAvatar


  • Zac Staples

    Thanks for this…exactly what I was looking for.


  • Edouard Barbier

    Anyone would know how to fix the center of an icon on the edge of the rounded image? https://uploads.disquscdn.com/images/de7bef0059104897829914a69a536ec4d81ad7bf0e5022d8cbc1f5c2f1fe6786.png
    I’m trying to do something like this.


  • Karthick Tamilselvan

    self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2;

    This doesn’t helps in Plus Devices. Can anyone help me ??
    Thanks in advance.


Leave a Reply to Simon Ng
Cancel Reply

Shares