【IOS開(kāi)發(fā)基礎(chǔ)系列】UIButton專題

1 使用技巧

1.1 樣式技巧

1.1.1 圓角邊框

1.?UITextField四周的圓角

//需要導(dǎo)入框架QuartzCore.framework,并且在當(dāng)前類中引用#import

textField.layer.cornerRadius = 5.0? ??

1.1.2 邊框顏色

self.layer.borderWidth = 1.0f;??????//邊框?qū)挾?/p>

self.layer.borderColor = [[UIColor colorWithRed:213.0/255 green:213.0/255 blue:213.0/255 alpha:1.0] CGColor];? //邊框顏色

1.1.3 文字設(shè)置

無(wú)法顯示：

self.titleLabel.text = [NSString stringWithFormat:@"%d積分",_scoreValue];

正確顯示：

[self setTitle:[NSString stringWithFormat:@"%d積分",_scoreValue] forState:UIControlStateNormal];

1.1.4 文字圖片同時(shí)顯示

UIButton上的圖片和文字位置調(diào)整

http://blog.csdn.net/yongyinmg/article/details/8566365

UIButton中setTitleEdgeInsets和setImageEdgeInsets的使用

http://my.oschina.net/u/1781028/blog/406683

1.1.5 高亮背景色設(shè)置

UIButton設(shè)置高亮狀態(tài)下的背景色【原創(chuàng)】

http://blog.it985.com/11543.html

? ? 1萧朝，通過(guò)按鈕的事件來(lái)設(shè)置背景色

- (void)viewDidLoad {

????[super?viewDidLoad];

????UIButton *button1 = [[UIButton alloc]? initWithFrame: CGRectMake(50, 200, 100, 50)];

????[button1 setTitle: @"button1" forState: UIControlStateNormal];

????button1.backgroundColor = [UIColor orangeColor];

????[button1 addTarget:?self action:?@selector(buttonBackGroundHighlighted:)? forControlEvents: UIControlEventTouchDown];

????[button1 addTarget:?self action:?@selector(buttonBackGroundNormal:)? forControlEvents: UIControlEventTouchUpInside];

????[self.view addSubview: button1];

}

// button普通狀態(tài)下的背景色

- (void) buttonBackGroundNormal:(UIButton? *)sender

{

????sender.backgroundColor = [UIColor orangeColor];

}

// button高亮狀態(tài)下的背景色

- (void)buttonBackGroundHighlighted:(UIButton? *)sender

{

????sender.backgroundColor = [UIColor greenColor];

}

? ? 2, 通過(guò)把顏色轉(zhuǎn)換為UIImage來(lái)作為按鈕不同狀態(tài)下的背景圖片

- (void) viewDidLoad {

????[super?viewDidLoad];

????UIButton *button2 = [[UIButton alloc]? initWithFrame: CGRectMake(170, 200, 100, 50)];

????[button2 setTitle: @"button2" forState: UIControlStateNormal];

????[button2 setBackgroundImage: [selfimageWithColor: [UIColor redColor]] forState: UIControlStateNormal];

????[button2 setBackgroundImage: [self?imageWithColor: [UIColor grayColor]] forState: UIControlStateHighlighted];

????[self.view addSubview: button2];

}

//? 顏色轉(zhuǎn)換為背景圖片

- (UIImage? *) imageWithColor:(UIColor *)color {

????CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);

????UIGraphicsBeginImageContext(rect.size);

????CGContextRef context = UIGraphicsGetCurrentContext();

????CGContextSetFillColorWithColor(context, [color? CGColor]);

????CGContextFillRect(context, rect);

????UIImage *image =? UIGraphicsGetImageFromCurrentImageContext();

????UIGraphicsEndImageContext();

????return?image;

}

1.1.6 設(shè)置button上的文字和圖片上下垂直居中對(duì)齊

1.1.6.1 網(wǎng)上代碼1

iOS - UIButton(UIEdgeInsets)／設(shè)置button上的文字和圖片上下垂直居中對(duì)齊

http://doc.okbase.net/willingYaTou/archive/38295.html

在UIButton中有三個(gè)對(duì)EdgeInsets的設(shè)置：ContentEdgeInsets献联、titleEdgeInsets里逆、imageEdgeInsets

@property(nonatomic) UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default isUIEdgeInsetsZero

// default is UIEdgeInsetsZero

@property(nonatomic) UIEdgeInsets titleEdgeInsets;? ? ? ? ? ? ? ??

//default is NO. if YES, shadow reverses to shift between engrave and emboss appearance

@property(nonatomic) BOOL reversesShadowWhenHighlighted;?

@property(nonatomic) UIEdgeInsets imageEdgeInsets;? ? ? ? // default is UIEdgeInsetsZero

UIEdgeInsetsMake

????????里面的四個(gè)參數(shù)表示距離上邊界原押、左邊界偎血、下邊界颇玷、右邊界的距離，默認(rèn)都為零磁餐，title／image在button的正中央阿弃。

UIKIT_STATIC_INLINE UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloatleft, CGFloat bottom, CGFloat right) {

??? UIEdgeInsets insets = {top,left, bottom, right};

??? return insets;

}

?self.view.backgroundColor =[UIColor blackColor];

UIButton *button = [UIButton buttonWithType: UIButtonTypeCustom]; ????//button的類型

button.frame = CGRectMake(100,100,90, 90);????//button的frame

button.backgroundColor = [UIColor cyanColor];????//button的背景顏色

// [button setBackgroundImage: [UIImage imageNamed: @"man_64.png"] forState: UIControlStateNormal];

// 在UIButton中有三個(gè)對(duì)EdgeInsets的設(shè)置：ContentEdgeInsets脾还、titleEdgeInsets入愧、imageEdgeInsets

[button setImage: [UIImage imageNamed: @"IconHome@2x.png"] forState: UIControlStateNormal];

//設(shè)置image在button上的位置（上top，左left怔蚌，下bottom桦踊，右right）這里可以寫(xiě)負(fù)值终畅，對(duì)上寫(xiě)－5，那么image就象上移動(dòng)5個(gè)像素

button.imageEdgeInsets = UIEdgeInsetsMake(5, 13, 21, button.titleLabel.bounds.size.width);

[button setTitle: @"首頁(yè)" forState: UIControlStateNormal]; ????//設(shè)置button的title

button.titleLabel.font = [UIFont systemFontOfSize: 16];????//title字體大小

button.titleLabel.textAlignment= NSTextAlignmentCenter;????//設(shè)置title的字體居中

[button setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal];?

[button setTitleColor: [UIColor grayColor] forState: UIControlStateHighlighted];? ??

button.titleEdgeInsets = UIEdgeInsetsMake(71, -button.titleLabel.bounds.size.width-50, 0, 0);//設(shè)置title在button上的位置（上top炼蛤，左left理朋，下bottom嗽上，右right）

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

[self.view addSubview: button];

//button相應(yīng)的事件

- (void) tap {

????UIAlertView *alertView = [[UIAlertView alloc] initWithTitle: @"hello" message: @"willingseal" delegate: self cancelButtonTitle: @"ok" otherButtonTitles: nil];

??? [alertView show];

}

效果圖：我這里使用的image是64*64的

1.1.6.2 網(wǎng)上代碼2

iOS UIButton設(shè)置圖片文字垂直排列

http://my.oschina.net/sayonala/blog/198376

??????經(jīng)過(guò)一下午的查閱資料及嘗試，最終解決了在圖片和文字垂直排列的情況下鲜屏，如果文字長(zhǎng)度變化會(huì)導(dǎo)致圖片位置變動(dòng)的問(wèn)題，最開(kāi)始采用了網(wǎng)上比較多的做法洛史，做法如下：

@interface UIButton (UIButtonExt)?

- (void) centerImageAndTitle: (float) space;?

- (void) centerImageAndTitle;?

@end?

@implementation UIButton (UIButtonExt)?

- (void)centerImageAndTitle: (float) spacing?

{?????

??? // get the sizeof the elements here for readability?

??? CGSizeimageSize = self.imageView.frame.size;?

??? CGSizetitleSize = self.titleLabel.frame.size;?

??? // get the height they will take up as a unit?

??? CGFloattotalHeight = (imageSize.height + titleSize.height + spacing);?

??? // raise the image and push it right to center it?

? ? self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight -imageSize.height), 0.0, 0.0, - titleSize.width);?

??? // lower the text and push it left to center it?

? ? self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, -(totalHeight - titleSize.height),0.0);?????

- (void) centerImageAndTitle?

??? const intDEFAULT_SPACING = 6.0f;?

??? [self centerImageAndTitle: DEFAULT_SPACING];?

?}?

@end

? ? ? ? 后面經(jīng)過(guò)測(cè)試土思，如果button的文字長(zhǎng)度變更己儒，會(huì)導(dǎo)致圖片位置變化捆毫，經(jīng)過(guò)多次修改UIEdgeInsets的值也沒(méi)有達(dá)到期望效果绩卤，最終采用集成UIButton類濒憋，重寫(xiě)layoutSubviews函數(shù)實(shí)現(xiàn)，特將成果記錄一下裆站，以便后續(xù)查閱遏插。

1.1.6.3 正式開(kāi)發(fā)用代碼

-(void) setButtonContentCenter: (UIButton*) btn

{

??? CGSize imgViewSize, titleSize, btnSize;

??? UIEdgeInsets imageViewEdge, titleEdge;

??? CGFloat heightSpace = 10.0f;

??? //設(shè)置按鈕內(nèi)邊距

??? imgViewSize = btn.imageView.bounds.size;

??? titleSize = btn.titleLabel.bounds.size;

??? btnSize = btn.bounds.size;

??? imageViewEdge =UIEdgeInsetsMake(heightSpace,0.0, btnSize.height - imgViewSize.height - heightSpace, - titleSize.width);

??? [btn setImageEdgeInsets: imageViewEdge];

??? titleEdge = UIEdgeInsetsMake(imgViewSize.height + heightSpace, - imgViewSize.width, 0.0, 0.0);

??? [btn setTitleEdgeInsets: titleEdge];

}

2參考鏈接