CODEWITHSUNDEEP
iosobjective-ccocoa-touchuiimageview
work_gg
work_gg

Reputation: 99

Create UIImageView with circle border iOS

I am trying to create a border around my UIIMageView which is a perfect circle using cornerRadius. Everything i've looked at says my code is correct, but it returns more of a diamond shape. (i've imported quartzCore, not sure I needed to)

image.layer.cornerRadius = (image.bounds.size.width/2);
image.layer.borderWidth = 5;
image.layer.borderColor = [UIColor whiteColor].CGColor;

Any ideas?

Upvotes: 3

Views: 4119

Answers (4)

BlackSheep
BlackSheep

Reputation: 1087

More simple no codign go on your Storyboard select your UIImageView and check under Identity Inspector to the colum right then ad under User Defined Runtime Attribute a Number and Key Path: layer.cornerRaius Neber 150 or what ever, then use your code to implementing, look a screen:

enter image description here enter image description here

now your code and:

enter image description here

If you want use your code you cane use the same think:

//your code:

image.layer.cornerRadius = (image.bounds.size.width/2);
image.layer.borderWidth = 5;
image.layer.borderColor = [UIColor whiteColor].CGColor;

//improve with:

    CGFloat radius = 150.0f;
    self.image.layer.cornerRadius = radius;

you can add a function for universal app like to this example:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.image.layer.masksToBounds = YES;
    self.image.layer.borderWidth = 5;
    self.image.layer.borderColor = [UIColor whiteColor].CGColor;

    if (isIpnoe4 || isIphone5) {

    CGFloat radius = 150.0f;

    } else if (isIphone6) {

        CGFloat radius = 200.0f;

    } else if (isIphone6Plus) {

        CGFloat radius = 250.0f;

    } else {

        //here is ipad/ipadmini

        CGFloat radius = 250.0f;
    }
    self.image.layer.cornerRadius = radius;
}

you can define the different display or in a Prefix.pch or in a header with this method:

#define   IsIphone6Plus     ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )1104 ) < DBL_EPSILON )
#define   IsIphone6     ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )667 ) < DBL_EPSILON )
#define   IsIphone5     ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )
#define   IsIphone4     ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )480 ) < DBL_EPSILON )

Hope this help you

Upvotes: 0

Lavvo
Lavvo

Reputation: 1024

Step (1) As others have said, you need to make sure your width and height are the exact same value. If you are absolutely sure this is the case, then go to Step 2.

Step (2) Even when you think you are absolutely sure of Step 1, this is not usually the case. I say this from my own personal experience trying to do the same thing before. You would be surprised some of the crazy thing AutoLayout does to your dimensions at runtime. Even when you think your values are correct, they changed slightly. Let me guess, are you using Storyboard to create your ImageView? If your answer is yes, go to Step 3.

Step (3) In order to verify this issue is caused by AutoLayout doing something funny, create a test UIImageView all in code without using any Stroyboards at all, by doing this (I'm not on my Mac right now, so syntax may be a little off):

var imageView: UIImageView = UIImageView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0 height: 100.0))
imageView.layer.cornerRadius = (imageView.bounds.size.width/2)
imageView.layer.borderWidth = 5.0
imageView.layer.borderColor = UIColor.redColor()
imageView.backgroundColor = UIColor.yellowColor()
self.view.addSubview(imageView)

If you run this and it shows up as a proper circle. Then this was the cause of your problem. I've learned to create all my objects in strictly code now, I don't even use Storyboards anymore due to all the issues I have had in the past.

Upvotes: 0

Subbu
Subbu

Reputation: 2148

image.layer.cornerRadius = image.frame.size.width /2;
image.layer.masksToBounds = YES;
image.layer.borderWidth = 5;
image.layer.borderColor = [UIColor whiteColor].CGColor;

The height and width of your imageview must be equal

Upvotes: 4

eschanet
eschanet

Reputation: 1045

Have you tried to add:

image.layer.masksToBounds = YES;

Another thing: is the width of your image equal to its height?

Upvotes: 1

Related Questions