Is This Possible - Circle Image

Discussion in 'iOS Programming' started by oo7ml, Jul 31, 2014.

  1. oo7ml macrumors 6502

    Joined:
    Jan 20, 2010
    #1
    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:

    [​IMG]

    Thanks in advance for your help.
     
  2. xStep, Jul 31, 2014
    Last edited: Jul 31, 2014

    xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #2
    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.
     
  3. oo7ml thread starter macrumors 6502

    Joined:
    Jan 20, 2010
    #3
    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.
     
  4. TheWatchfulOne macrumors 6502

    TheWatchfulOne

    Joined:
    Jun 19, 2009
    #4
    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.
     
  5. JohnsonK macrumors regular

    Joined:
    Mar 6, 2014
    #5
    He wants to add a border programmatically, I guess.

    You can import QuartzCore and then add the border with

    Code:
    yourView.layer.borderColor = [UIColor whiteColor].CGColor;
    yourView.layer.borderWidth = 10.0f;
    
     
  6. xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #6
    How did you do the image? Maybe you can take advantage of that knowledge to apply to the circular border.
     
  7. xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #7
    If you want a solid color border then here is a cheap trick that you can place under your image.

    Code:
        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];
    
     
  8. AxoNeuron, Jul 31, 2014
    Last edited: Jul 31, 2014

    AxoNeuron macrumors 65816

    AxoNeuron

    Joined:
    Apr 22, 2012
    Location:
    The Left Coast
    #8
    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.
     
  9. Dekard macrumors 6502

    Dekard

    Joined:
    Sep 7, 2011
    Location:
    Dallas, Texas
  10. oo7ml thread starter macrumors 6502

    Joined:
    Jan 20, 2010

Share This Page