How to create a round button?

I w开发者_开发百科ant to create a round circular button. This button should look like a circle.

This code gives round rectangular button.

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame     = CGRectMake(100, 100, 100, 30);
UIImage  *image  = [UIImage imageNamed:@"01.png"];
[button setImage:image forState:UIControlStateNormal];
[image release];

I figured out how to create a rounded rectangular button but I want to create a round circle button. What do I need to change?

Tested Code:

.h

 #import <QuartzCore/QuartzCore.h>

-(void)roundButtonDidTap:(UIButton*)tappedButton;

.m

#define ROUND_BUTTON_WIDTH_HEIGHT YourButtonWidthToBeSetHere

-(void)roundButtonDidTap:(UIButton*)tappedButton{

    NSLog(@"roundButtonDidTap Method Called");

}



UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

[button setImage:[UIImage imageNamed:@"TimoonPumba.png"] forState:UIControlStateNormal];

[button addTarget:self action:@selector(roundButtonDidTap:) forControlEvents:UIControlEventTouchUpInside];

//width and height should be same value
button.frame = CGRectMake(0, 0, ROUND_BUTTON_WIDTH_HEIGHT, ROUND_BUTTON_WIDTH_HEIGHT);

//Clip/Clear the other pieces whichever outside the rounded corner
button.clipsToBounds = YES;

//half of the width
button.layer.cornerRadius = ROUND_BUTTON_WIDTH_HEIGHT/2.0f;
button.layer.borderColor=[UIColor redColor].CGColor;
button.layer.borderWidth=2.0f;

[self.view addSubview:button];

Result

Geometry in this concept

Storyboard Option (should apply to Swift or ObjC) -

If you prefer to work in Storyboards, there's another option.

First, set the width and height to be the same value to make a perfect square.

Second, type in the following attributes. IMPORTANT- make the value of your layer.cornerRadius half the size of your width.

Then, when you run the app, your button will be round.

Try this, it worked for me. It will make your button or any view in circular shape only if you have taken it in square i.e width should be equals to height.

yourButton.layer.cornerRadius = yourButton.bounds.size.width/2;

In Xcode 7.0.0 on IOS 8 this code works perfectly for me. Provided the length and height of button frame is same.

myButton.clipsToBounds = YES;
myButton.layer.cornerRadius = myButton.layer.frame.size.width/2;

UIButton *myButton=[UIButton buttonWithType:UIButtonTypeCustom];
myButton.frame = CGRectMake(50,50,30,30);
[myButton addTarget:self action:@selector(buttonEvent) forControlEvents:UIControlEventTouchUpInside];
[myButton setImage:[UIImage imageNamed:@"sarabjit.png"] forState:UIControlStateNormal];
[self.view addSubView:myButton];

Using Swift like the answer of Vijay-Apple-Dev.blogspot :

let ROUND_BUTTON_WIDTH_HEIGHT YourButtonWidthToBeSetHere   

override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, ROUND_BUTTON_WIDTH_HEIGHT, ROUND_BUTTON_WIDTH_HEIGHT)

   button.layer.cornerRadius = ROUND_BUTTON_WIDTH_HEIGHT / 2.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"TimoonPumba.png"), forState: .Normal)
   button.addTarget(self, action: "roundButtonDidTap", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}

func roundButtonDidTap() {
   NSLog(@"roundButtonDidTap Method Called");
}

override func viewDidLoad() {
    super.viewDidLoad()

    let facebookButton = UIButton()
    facebookButton.frame = CGRectMake(30, 200, 150, 150)
    facebookButton.layer.cornerRadius = 75
    facebookButton.layer.masksToBounds = true
    self.view.addSubview(facebookButton)
    }

** To make round button you have to give same height and same width for the button and half of the value should be given to corner radius **

Step 1. Use [UIButton buttonWithType:UIButtonTypeCustom] to create the button.

Step 2. CGRectMake(100, 100, 100, 30) is a rectangular shape. Maybe you want to use the size of your image instead, like this:

CGRect frame = CGRectMake(100, 100, 0, 0);
frame.size = img.size;
button.frame = frame;

a round-rect button with circular image does not satisfy the need of a round Button. Nor even if they are made custom buttons. This is because, This buttons will respond to taps even outside the circular part ( which is a just a .png image ) if it is inside the button size range and not clipped.

The first answer(and only the first one by #vijay-apple-dev) given here is correct. You need to clip the boundary of the button frame in order to stop it responding just outside the image

make a

[UIButton buttonWithType:UIButtonTypeCustom];

and try to use the corner radius property

   button.layer.cornerRadius = button.bounds.size.width/2 / 2.0