按钮样式大全.png
随着做过的项目越来越多，发现很多iOS控件的基础属性越来越不能满足实际开发需求了，今天总结一下UIButton的几个不常用但缺很有必要的属性。
一、默认的按钮样式
默认的图文共存按钮.png
这是我们简单常用的按钮样式，在此不再多做介绍。
二、左文右图按钮
左文右图按钮.png
左文右图也是开发过程中常见的一种按钮样式。代码实现方式如下：
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -button.imageView.bounds.size.width, 0, button.imageView.bounds.size.width)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, -button.titleLabel.bounds.size.width)];
关于UIEdgeInsetsMake的用法，相信大家都了解。（不懂得可百度学习）另外。建议大家直接将按钮的这种样式实现代码部分封装成工具类方法，如下：
//实现button左文右图
+ (void)becomeButtonStyle:(UIButton *)button {
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -button.imageView.bounds.size.width, 0, button.imageView.bounds.size.width)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, -button.titleLabel.bounds.size.width)];
}
这样我们使用该样式的时候只需要简单调用即可：
[Tool becomeButtonStyle:self.myButton];//self.myButton 是当前需要实现左文右图的按钮
【友情提示】需要给图片文字之间增加间隙的话，我们只需要简单的在文字字符串前后增加空格即可
三、上图下文按钮
上图下文按钮.png
上图下文样式的按钮多用于一些页面悬浮按钮，比如客服/帮助等按钮，一般会配合切圆显示，例如：
悬浮按钮.png
代码实现方式如下：
//实现button上图下文
+ (void)getButtonStyle:(UIButton *)button {
button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
button.titleEdgeInsets = UIEdgeInsetsMake(button.imageView.frame.size.height, -button.imageView.frame.size.width, 0, 0);
button.imageEdgeInsets = UIEdgeInsetsMake(-button.imageView.frame.size.height, 0, 0, - button.titleLabel.bounds.size.width);
}
如果我们需要调整图片与文字之间的间隙，只需要在对应的位置上增加相应的数字即可，比如我们将图片与文字之间的间隙调整为20，实现图片上衣10，文字下移10，代码修改实现如下：
button.titleEdgeInsets = UIEdgeInsetsMake(button.imageView.frame.size.height, -button.imageView.frame.size.width, -10, 0);//实现文字下移
button.imageEdgeInsets = UIEdgeInsetsMake(-button.imageView.frame.size.height - 10, 0, 0, - button.titleLabel.bounds.size.width);//实现图片上移
调整优化之后的效果如下：
优化上图下文按钮.png
与之对应的上文下图样式在实际开发过程中很少用到，在此不做介绍，实现方式相同。
四、图文共存居左居右按钮
图文同时居左.png
图文同时居左按钮多见与通知按钮：
通知按钮.png
代码实现如下：
button.contentHorizontalAlignment =UIControlContentHorizontalAlignmentLeft;//居右的话，改为UIControlContentHorizontalAlignmentRight
button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
图文同时居右按钮效果：
图文同时居右.png
希望本文对您有所帮组，加油！！！
网友评论