简单易懂实用的button设置文字图片排列的方法,mark了!转自:http://www.jianshu.com/p/3052a3b14a4e
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 <UIKit/UIKit.h> 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文件如下,实现方法
#import "UIButton+ImageTitleSpacing.h" @implementation UIButton (ImageTitleSpacing) - (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style imageTitleSpace:(CGFloat)space { // 1. 得到imageView和titleLabel的宽、高 CGFloat imageWith = self.imageView.frame.size.width; CGFloat imageHeight = self.imageView.frame.size.height; CGFloat labelWidth = 0.0; CGFloat labelHeight = 0.0; if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) { // 由于iOS8中titleLabel的size为0,用下面的这种设置 labelWidth = self.titleLabel.intrinsicContentSize.width; labelHeight = self.titleLabel.intrinsicContentSize.height; } else { labelWidth = self.titleLabel.frame.size.width; labelHeight = self.titleLabel.frame.size.height; } // 2. 声明全局的imageEdgeInsets和labelEdgeInsets UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero; UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero; // 3. 根据style和space得到imageEdgeInsets和labelEdgeInsets的值 switch (style) { case MKButtonEdgeInsetsStyleTop: { imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth); labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0); } break; case MKButtonEdgeInsetsStyleLeft: { imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0); labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0); } break; case MKButtonEdgeInsetsStyleBottom: { imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth); labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0); } break; case MKButtonEdgeInsetsStyleRight: { imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0); labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0); } break; default: break; } // 4. 赋值 self.titleEdgeInsets = labelEdgeInsets; self.imageEdgeInsets = imageEdgeInsets;