31 Mar 2014

iPhone Development: Make an image circular in IOS

Designs make an app look beautiful and trendy that attracts user, as per old saying that if your product did not attract customer's by its look then it does not matter how well it perform and how good are its feature.So in iPhone app development design is and important aspect of the app development. In one of my app development i encountered a screen which shows list of friends with their thumbnail in circular form same as Facebook messenger.Shown in below figure

We can made our images circular by using CALayer class provide in  QuartzCore Framework.To get our desired output first we need to create an instance of CALayer and assign him our image layer using layer method.Then we set setMasksToBounds property to YES. so that our sublayer were also clipped according to main layer bounds.After this we will set cornerRadius.Below is the code that generates output as shown in above figure.

    CALayer * l = [profileImage layer];
    [l setMasksToBounds:YES];
    [l setCornerRadius:17.0];

Note: Yellow circle shown in figure is an image with inside of circle as transparent and we place friends image inside the circle image by placing new UIImageView and giving our circular image to it.

No comments:

Post a Comment