iOS-UIButton按钮左文右图/上图下文/图文居左/图文具有/按钮样式大全

按钮样式大全.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

希望本文对您有所帮组，加油！！！