1

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.

marciokoko
  • 4,988
  • 8
  • 51
  • 91
  • possible duplicate of [How to make a circular UIView](http://stackoverflow.com/questions/1878595/how-to-make-a-circular-uiview) – Pedro Mancheno Aug 29 '13 at 20:31
  • @pedro.m. If its a duplicate, I concede, but it should have shown up in Suggestions. Now I dont see why it was placed as offtopic because im asking for code. I wasnt asking for code, it was a conceptual question. – marciokoko Aug 30 '13 at 00:36
  • I didn't flag for offtopic, don't look at me. :P – Pedro Mancheno Aug 30 '13 at 13:45

3 Answers3

6

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];
Mick MacCallum
  • 129,200
  • 40
  • 280
  • 281
  • Ok if Im trying to modify the rectangular IBOutlet UIImageView in a cell though. I would need to override the UIImageView's initWithFrame or how do I modify it? I tried adding this in MyCustomCell's initWithStyle but it doesnt work: `[self.userImage setBackgroundColor:[UIColor orangeColor]]; [self.userImage.layer setCornerRadius:60.0f];` – marciokoko Aug 30 '13 at 15:05
  • 63x64pixels inside a custom 90px high cell – marciokoko Aug 30 '13 at 15:08
  • I updated the question to reflect my custom cell class and its init method. The imageview still shows up rectangular, 64x64. – marciokoko Aug 30 '13 at 20:06
  • Yes I did, its imported in my custom cell class and in the build phases link library – marciokoko Aug 30 '13 at 22:22
0

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

user2984254
  • 109
  • 1
  • 7
0

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;
pedro0172
  • 3
  • 3