marciokoko
marciokoko

Reputation: 4986

How do I create circular uiview like Facebook messages

How do I create circular UIView like Facebook messages.

Is it just a rectangle with rounded corners or a rectangle with a circular image in the center?

Here is the image view: enter image description here And here is the initWithStyle Code for the custom cell class:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code

        [self.userImage setBackgroundColor:[UIColor orangeColor]];
        [self.userImage.layer setCornerRadius:32.0f];
    }
    return self;
}

But I still get a rectangular imageview.

Upvotes: 1

Views: 1536

Answers (3)

pedro0172
pedro0172

Reputation: 3

I'm using UIView with name "viewName", but it can be used with UIImage.

    //Define background color
    self.viewName setBackgroundColor:[UIColor colorWithRed:(84.0 / 255.0) green:(198.0 / 255.0) blue:(89.0 / 255.0) alpha:1]];

    //Create circular view
    self.viewName.layer.cornerRadius = cell.statusColor.frame.size.width / 2;
    self.viewName.clipsToBounds = YES;

Upvotes: 0

user2984254
user2984254

Reputation: 109

just use clipToBound like this:

[cell.yourImage.layer setBorderWidth:2.0f];
[cell.yourImage.layer setBorderColor:[[UIColor blackColor] CGColor]];
[cell.yourImage.layer setShadowRadius:5.0];
[cell.yourImage.layer setShadowOpacity:0.5];
[cell.yourImage.layer setShadowOffset:CGSizeMake(1.0, 0.0)];
[cell.yourImage.layer setShadowColor:[[UIColor blackColor] CGColor]];
[cell.yourImage.layer setCornerRadius:10.0];
cell.yourImage.clipsToBounds = YES;

hope it helps

Upvotes: 0

Mick MacCallum
Mick MacCallum

Reputation: 130193

You have to modify the cornerRadius property on your view's layer. In order to get a circle, you should assign a corner radius equal to half of the views height/width. Here's a basic example:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100.0f, 100.0f, 120.0f, 120.0f)];
[view setBackgroundColor:[UIColor orangeColor]];
[view.layer setCornerRadius:60.0f];
[self.view addSubview:view];

Upvotes: 6

Related Questions