iOS Is This Possible - Circle Image

[oo7ml]

Hi,

Is it possible to style / display an image as a circle with a 10px border around it in Xcode.

I want to display user's profile image as a circle with a 10px border around it, like this:

Thanks in advance for your help.

 

[xStep]

Added image masking note

Of course you know it is possible as that comes from an app in the app store.

Yes it is possible. You layer your graphics to get the effect and that one would be behind the profile image,

You could build the image in a graphics app and just use that as a lower layer. The problem with that is it isn't very adjustable once in the app.

Personally I'd try to do it in code using Core Graphics. Perhaps the fade in the last third on the left of the circle would need some extra thought but it is doable.

For the image, you use Core Graphics to create a simple mask to get the end result of a circular image. The area outside the circle would be transparent in the resulting rectangle.

 

[oo7ml]

Hi, thanks for your reply... i have already done the circle image, but not sure how to add a thick 10px white border... any suggestions, thanks again for your help.

 

[TheWatchfulOne]

You could use your image creator/editor to draw the border and make all other pixels transparent. That is, the whole image really would not be round, but if you draw a round border and make sure that's the only part that's visible, that should give you the result you want.

 

[JohnsonK]

He wants to add a border programmatically, I guess.

You can import QuartzCore and then add the border with

yourView.layer.borderColor = [UIColor whiteColor].CGColor;
yourView.layer.borderWidth = 10.0f;

 

[xStep]

Hi, thanks for your reply... i have already done the circle image, but not sure how to add a thick 10px white border... any suggestions, thanks again for your help.

How did you do the image? Maybe you can take advantage of that knowledge to apply to the circular border.

 

[xStep]

If you want a solid color border then here is a cheap trick that you can place under your image.

    UIView * circleView = [[UIView alloc] initWithFrame: CGRectMake(100, 400, 100, 100)];
    circleView.layer.backgroundColor = [UIColor clearColor].CGColor;
    circleView.layer.borderColor = [UIColor redColor].CGColor;
    circleView.layer.borderWidth = 10.0;
    circleView.layer.cornerRadius = 50.0;
    circleView.layer.masksToBounds = YES;
    [self.view addSubview: circleView];

 

[AxoNeuron]

Couldn't you use a circular .png image with a second (slightly) larger white circle png behind it? .png images have support for transparency. I will have to try it when I get home.

Edit: just tried it, it works fine. Not sure if it would work in your case though, especially if it's supposed to be dynamic.

 

[Dekard]

Here's a tutorial on how to do it all programatically..
http://www.appcoda.com/ios-programming-circular-image-calayer/

 

[oo7ml]

Great, thanks...