[IOS](转)带文字图片（二）

明显前两种是很不好的，所以这里只说第三种：

Button有两个属性：titleEdgeInsets和imageEdgeInsets，通过设置这两个，就可以实现所有需要的Button的样式，如：image在上、image在下、image在左、image在右。

在设置这两个之前，我们先要理解Button上面的titleLabel和imageView的位置关系（想象Button默认的image和label的显示）：

titleEdgeInsets是titleLabel相对于其上下左右的inset，跟tableView的contentInset是类似的；如果只有title，那titleLabel的上下左右都是相对于Button的；如果只有image，那imageView的上下左右都是相对于Button的；如果同时有image和label，那image的上下左是相对于Button的，右是相对于label的；label的上下右是相对于Button的，左是相对于label的。

上面一段很重要

理解了，然后我们就可以看懂下面的代码

创建一个Button的Category，.h文件如下，定义一个Enum，用于决定image和label的样式；一个方法用于调用设置。

#import typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) { MKButtonEdgeInsetsStyleTop, // image在上，label在下 MKButtonEdgeInsetsStyleLeft, // image在左，label在右 MKButtonEdgeInsetsStyleBottom, // image在下，label在上 MKButtonEdgeInsetsStyleRight // image在右，label在左};@interface UIButton (ImageTitleSpacing)/** * 设置button的titleLabel和imageView的布局样式，及间距 * * @param style titleLabel和imageView的布局样式 * @param space titleLabel和imageView的间距 */- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style imageTitleSpace:(CGFloat)space;

.m文件如下，实现方法

我写了个Demo在github上，地址：​​自定义Button​​

参考

​​UIButton的titleEdgeInsets属性和imageEdgeInsets属性实现图片文字按要求排列​​，这篇博客里介绍了上面的原理，建议仔细看，理解之后就可以明白​​UIButton 的 imageEdgeInsets 和 titleEdgeInsets​​，这篇博客末尾有github地址，我写的时候没有理解原理，所以设置的时候，参照了他的代码​​如何布局包含Image和Title的UIButton​​，这篇是我最开始参考的，只有代码，没有原理

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。