CODEWITHSUNDEEP
xcodeuitableviewuiviewuibutton
Kex
Kex

Reputation: 8619

circular UIView and buttons?

I'm trying to replicate a button like the one below (YO ap)

enter image description here

this button floats just above the table view, the view is perfectly round though, you can see this by how the k letters sticks out perfectly from underneath. Is it possible to create a circular UIView? Any ideas how the shadow effect is created too?

Thanks

Upvotes: 0

Views: 378

Answers (2)

FreeNickname
FreeNickname

Reputation: 7814

To make a round view you can alter the view's layer's cornerRadius property. For instance, you can create a square (width == height) button somewhere, create an outlet for it in your viewController (e.g. @property (weak, nonatomic) IBOutlet UIButton *bMyButton;) and then set it's corner radius like so:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.bMyButton.layer.cornerRadius = self.bMyButton.frame.size.height / 2;
}

To make the button "float" above the tableView, I believe, you should add it as a subview of the top view (on the same level of hierarchy as the tableView). And, finally, you can "attach" a view to the bottom right corner via constraints (auto layout). You can read more about auto layout here: Auto Layout Guide

As for the shadow, I've never done that, but I guess, you should take a look at other layer properties: shadowRadius, shadowOffset, shadowOpacity, etc.

For instance:

self.bMyButton.layer.shadowRadius = self.bMyButton.frame.size.width / 2 + 5;

Note, that a UIView might not be clipped to it's bounds. This is the case of UIImageView, for example. If you want a round UIImageView, you'll also have to set masksToBounds to YES:

self.imgMyImageView.layer.masksToBounds = YES;

Upvotes: 3

Hemang
Hemang

Reputation: 27072

If you want to add UIButton programmatically. 

//margin
CGFloat margin = 10.f;
//your image
UIImage *image = [UIImage imageNamed:@"side_menu.png"];
//create a button of custom type
UIButton *circularBtn = [UIButton buttonWithType:UIButtonTypeCustom];
//set background colour (if your image includes background colour then you may don't need this)
circularBtn.backgroundColor = [UIColor colorWithRed:245.f/255.f green:71.f/255.f blue:64.f/255.f alpha:1.f];
//set your image
[circularBtn setImage:image forState:UIControlStateNormal];
//dynamic frame
circularBtn.frame = CGRectMake(self.view.frame.size.width - (image.size.width * 2.f + margin ), 
self.view.frame.size.height - (image.size.height * 2.f + margin), 
(image.size.width * 2.f), (image.size.height * 2.f));
//add to self or any other view you want
[self.view addSubview:circularBtn];
//round the button
circularBtn.layer.cornerRadius = circularBtn.frame.size.width/2.f;
//add the shadow
circularBtn.layer.shadowColor = [UIColor blackColor].CGColor;
circularBtn.layer.shadowOpacity = 0.7f;

It should look like,

enter image description here

In my example, I'd the transparent image of size 40x40 (WxH) and @2x.

Upvotes: 0

Related Questions