How do I make a circular button?

Question

*I have this answers here : Correct with help of **Yossi How to put buttons over UITableView which won't scroll with table in iOS***

I know answers work with NavigationControllerController

[self.navigationController.view addSubview:_btnCircle];

I learned to write in Objective C iOS app. Please help me to implement to get the Circle button display on uitableview as shown below. Or help me search keywords.

Example 1:

enter image description here

Example 2:

enter image description here

Those are all custom Table Cells. Before worrying about circular buttons I would get my custom cell set up first. [You can find some inputs here](http://www.appcoda.com/customize-table-view-cells-for-uitableview/). About making buttons you already have got answers for that. — GoodSp33d, Jul 19 '14 at 17:38
For everybody who is interested in adding a customizable UIButton on top of a UITableView, UICollectionView or a UIScrollView. This solution may help http://stackoverflow.com/a/35622509/2269679 — Manuel Escrig, Feb 25 '16 at 15:46

malex · Answer 1 · 2014-07-21T10:53:45.327

12

The simplest way is to add QuartzCore Framework

#import <QuartzCore/QuartzCore.h>

and then use the following code for your button:

button.layer.cornerRadius = 0.5 * button.bounds.size.width;

Now you have the round button from the square one.

edited Jul 21 '14 at 10:53

answered Jul 19 '14 at 17:09

malex

9,874
3
56
77

`width * 0.5` might be better to use. – GoodSp33d Jul 19 '14 at 17:20
Thank u, but how to show button on table view like example picture – November Man Jul 19 '14 at 17:23
You should add the button as a subview for your tableViewCell – malex Jul 19 '14 at 17:24
And then you can use `[UITableViewCell viewWithTag:]` method to get the actual button and set the corner radius. Even better would be if you create a UITableViewCell subclass and do all you need in it's implementation. Then you can use IBOutlet properties and create a template XIB for the tableView. – Julian F. Weinert Jul 19 '14 at 17:26
@GoodSp33d: Why is `width * 0.5` better than `width / 2`? It's mathematically identical... – Julian F. Weinert Jul 19 '14 at 17:27
1

Divisions are slower. You might not gain significant advantage, but you know drops make an ocean ;) – GoodSp33d Jul 19 '14 at 17:36
@GoodSp33d good suggestion. [Why is division more expensive than multiplication?](http://stackoverflow.com/questions/15745819/why-is-division-more-expensive-than-multiplication) – Pawan Rai Jul 19 '14 at 18:16
Bro how to button fixed, not scroll flow tableview – November Man Jul 19 '14 at 18:53
Thanks i have tips . goToTop = [UIButton buttonWithType:UIButtonTypeCustom]; goToTop.frame = CGRectMake(130, 70, 60, 20); [goToTop setTitle:@"go to top" forState:UIControlStateNormal]; [goToTop addTarget:self action:@selector(goToTop) forControlEvents:UIControlEventTouchUpInside]; [goToTop setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [goToTop.layer setBorderColor:[[UIColor whiteColor] CGColor]]; goToTop.titleLabel.font = [UIFont fontWithName:@"Helvetica-Bold" size:13]; [self.navigationController.view addSubview:goToTop]; – November Man Jul 19 '14 at 19:56

score 4 · Answer 2 · edited Jul 19 '14 at 19:10

4

In order to make any button round you need to set the cornerRadius property of the button.

Note- In order to make circle you need to make sure that height and width are equal and radius is set half of the width/height. This will make perfect round circle.

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setFrame:CGRectMake(10, 10, 50, 50)];
btn.layer.cornerRadius = 0.5 * btn.bounds.size.width;

edited Jul 19 '14 at 19:10

malex

9,874
3
56
77

answered Jul 19 '14 at 17:10

Shubhendu

1,081
8
13

Thank u, but how to show button on table view like example picture – November Man Jul 19 '14 at 17:16
you can create a new class inheriting from UITableViewCell Class. There you can create the button and add it. – Shubhendu Jul 19 '14 at 17:17
get the refrence of button using tag and do like this uibutton *button==(uibutton*)[cell viewwithtag:urbutton tag]; – kamalesh kumar yadav Jul 19 '14 at 17:22
Hi Thank i understand your mean, one more i want drag button, what method i can do? – November Man Jul 19 '14 at 17:25
@NovemberRain thats a different question. if you want to know than ask another question – Shubhendu Jul 19 '14 at 17:44
Bro how to button fixed, not scroll flow tableview – November Man Jul 19 '14 at 18:54
I do it, but please help me Button Home fixed not scroll flowing tableview http://i.stack.imgur.com/WIbjq.png – November Man Jul 19 '14 at 18:58

score 0 · Answer 3 · answered Jul 27 '21 at 17:31

For Swift:

button.layer.masksToBounds = true
button.layer.cornerRadius = self.frame.width / 2

If you are creating a custom UIButton (or a custom UIView), implement the following inside the custom class:

override func layoutSubviews() {
    super.layoutSubviews()
    self.layer.masksToBounds = true
    self.layer.cornerRadius = self.frame.width / 2
}

How do I make a circular button?

3 Answers3