2011-08-05 155 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