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

希望本文对您有所帮组,加油!!!

你可能感兴趣的:(iOS-UIButton按钮左文右图/上图下文/图文居左/图文具有/按钮样式大全)