【IOS开发基础系列】UIButton专题

1 使用技巧

1.1 样式技巧

1.1.1 圆角边框

1. UITextField四周的圆角

//需要导入框架QuartzCore.framework,并且在当前类中引用#import

textField.layer.cornerRadius = 5.0

1.1.2 边框颜色

self.layer.borderWidth = 1.0f; //边框宽度

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

1.1.3 文字设置

无法显示：

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

正确显示：

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

1.1.4 文字图片同时显示

UIButton上的图片和文字位置调整

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

UIButton中setTitleEdgeInsets和setImageEdgeInsets的使用

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

1.1.5 高亮背景色设置

UIButton设置高亮状态下的背景色【原创】

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

1，通过按钮的事件来设置背景色

- (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普通状态下的背景色

- (void) buttonBackGroundNormal:(UIButton *)sender

{

sender.backgroundColor = [UIColor orangeColor];

}

// button高亮状态下的背景色

- (void)buttonBackGroundHighlighted:(UIButton *)sender

{

sender.backgroundColor = [UIColor greenColor];

}

2, 通过把颜色转换为UIImage来作为按钮不同状态下的背景图片

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

}

// 颜色转换为背景图片

- (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 设置button上的文字和图片上下垂直居中对齐

1.1.6.1 网上代码1

iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐

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

在UIButton中有三个对EdgeInsets的设置：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

里面的四个参数表示距离上边界、左边界、下边界、右边界的距离，默认都为零，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中有三个对EdgeInsets的设置：ContentEdgeInsets、titleEdgeInsets、imageEdgeInsets

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

//设置image在button上的位置（上top，左left，下bottom，右right）这里可以写负值，对上写－5，那么image就象上移动5个像素

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

[button setTitle: @"首页" forState: UIControlStateNormal]; //设置button的title

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

button.titleLabel.textAlignment= NSTextAlignmentCenter; //设置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);//设置title在button上的位置（上top，左left，下bottom，右right）

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

[self.view addSubview: button];

//button相应的事件

- (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 网上代码2

iOS UIButton设置图片文字垂直排列

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

经过一下午的查阅资料及尝试，最终解决了在图片和文字垂直排列的情况下，如果文字长度变化会导致图片位置变动的问题，最开始采用了网上比较多的做法，做法如下：

@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

后面经过测试，如果button的文字长度变更，会导致图片位置变化，经过多次修改UIEdgeInsets的值也没有达到期望效果，最终采用集成UIButton类，重写layoutSubviews函数实现，特将成果记录一下，以便后续查阅。

1.1.6.3 正式开发用代码

-(void) setButtonContentCenter: (UIButton*) btn

{

CGSize imgViewSize, titleSize, btnSize;

UIEdgeInsets imageViewEdge, titleEdge;

CGFloat heightSpace = 10.0f;

//设置按钮内边距

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参考链接