【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参考链接
iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐
http://doc.okbase.net/willingYaTou/archive/38295.html
UIButton的titleEdgeInsets和imageEdgeInsets属性