How to make Circle image like Instagram's story profile image

Question

I want to create circle image like the one in Instagram's story profile image. It should has two circles, inner circle will be white, outer circle color will be self-color not gradient. I have tried that code but there is only one circle. How to add second circle to imageView layer ?

 self.imageView.layer.cornerRadius = 30;
 self.imageView.layer.borderWidth = 3;
 self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;
 self.imageView.layer.masksToBounds = YES;

Could you help me?

Thanks :)

Answer 1

You can use this 3rd party library which provides multiple borders to an UIImageView.

And, If you want to do it by yourself, you can make UIImageView a subView of UIView. Then make the UIView round and set borderWidth and colour in it. Do the same for the UIImageView.

Here's an example:

Add your UIView and UIImageView like this.

Then add this code:

-(void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    _profileImage.layer.cornerRadius = 30;
    _profileImage.layer.borderWidth = 3;
    _profileImage.layer.borderColor = [UIColor whiteColor].CGColor;
    _profileImage.layer.masksToBounds = YES;

    _profileImage.clipsToBounds = true;
    _profileImage.layer.cornerRadius = _profileImage.frame.size.height/2;

    _superViewImage.clipsToBounds = true;
    _superViewImage.layer.masksToBounds = true;
    _superViewImage.layer.cornerRadius = _superViewImage.frame.size.height/2;
    _superViewImage.layer.borderWidth = 0.5;
    _superViewImage.layer.borderColor = (__bridge CGColorRef _Nullable)([UIColor greenColor]);

}

And result image will be this:

Set the colours you want for both borders.

Hope it helps. :)