2011-08-05 90 views
34

我是Iphone开发新手。如何创建一个圆形按钮?

我想创建一个圆形的圆形按钮。这个按钮应该看起来像一个圆圈。

这给出了圆形的矩形按钮。

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

我想出了如何创建一个圆角矩形按钮,但我想创建一个圆形的圆形按钮。请建议。

+0

的可能重复[圆形UIButton](http://stackoverflow.com/questions/666080/round-uibutton) – zoul

回答

86

测试的代码:

.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]; 

结果

enter image description here

几何在这个概念

enter image description here

+1

只是一个更新:你还需要#import 。 – raaz

+0

@raaz感谢哥们,如果您将来发现任何类似的东西,您可以编辑代码:) –

+1

+1用于添加'//半宽度注释。通过将按钮的高度/宽度除以2,可以使“cornerRadius”变圆。 –

-4

做出

[UIButton buttonWithType:UIButtonTypeCustom]; 

,并尝试使用该圆角半径属性

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

步骤1.使用[UIButton buttonWithType:UIButtonTypeCustom]创建按钮。

第2步。CGRectMake(100, 100, 100, 30)是一个矩形形状。也许你想用你的图像的大小,而不是像这样:

CGRect frame = CGRectMake(100, 100, 0, 0); 
frame.size = img.size; 
button.frame = frame; 
1
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]; 
+0

请详细解释你的代码。谢谢 – MBH

0

与圆形图像圆矩形按钮不满足一个圆形按钮的需要。即使他们是自定义按钮也不是。这是因为,如果该按钮在按钮尺寸范围内并且未被剪裁,则该按钮将响应于即使在圆形部分(这仅仅是一个.png图像)之外的水龙头。

这里给出的第一个答案(只有#vijay-apple-dev的第一个答案)是正确的。您需要剪切按钮框的边界,以便在图像外部停止响应。

8

试试这个,它对我有用。只有当你把它放在正方形中时,它才会使你的按钮或任何视图呈圆形,即宽度应该等于高度。

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

真棒工作。 – scott

+0

是的,谢天谢地。 – Tejinder

1

使用斯威夫特像 维杰 - 苹果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"); 
} 
2

在对IOS 8的Xcode 7.0.0此代码的工作完美的我。 假设按钮框的长度和高度相同。

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

故事板选项(应适用于雨燕或ObjC) -

如果您喜欢在故事板的工作,还有另一种选择。

首先,将宽度和高度设置为相同的值以制作完美的正方形。 enter image description here

其次,输入以下属性。重要 - 使您的layer.cornerRadius的值为宽度的一半。

然后,当你运行应用程序,你的按钮是圆的。

enter image description here

+1

欣赏你的方法... – Sujay

+1

显然是一个!根据您的方式或代码,按钮宽度必须设置为等于其高度。 – malajisi

1
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) 
    } 

**为了使圆形按钮,你必须给相同的高度和值的按钮,半相同的宽度应给予圆角半径** enter image description here