html两个按钮垂直距离,UIButton 图片文字 左右垂直 显示并设置间距

UIButton 图片文字 左右垂直 显示并设置间距

UIButton+ImageTitleSpace.h

//

// UIButton+ImageTitleSpace.h

// QK365

//

// Created by Sunny on 4/2/2018.

// Copyright © 2018 . All rights reserved.

//

#import

// 定义一个枚举(包含了四种类型的button)

typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {

MKButtonEdgeInsetsStyleTop, // image在上，label在下

MKButtonEdgeInsetsStyleLeft, // image在左，label在右

MKButtonEdgeInsetsStyleBottom, // image在下，label在上

MKButtonEdgeInsetsStyleRight // image在右，label在左

};

/**

UIbutton title 和Image 的样式

*/

@interface UIButton (ImageTitleSpace)

/**

* 设置button的titleLabel和imageView的布局样式，及间距

*

* @param style titleLabel和imageView的布局样式

* @param space titleLabel和imageView的间距

*/

- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style

imageTitleSpace:(CGFloat)space;

@end

UIButton+ImageTitleSpace.m

//

// UIButton+ImageTitleSpace.m

// QK365

//

// Created by Sunny on 4/2/2018.

// Copyright © 2018 All rights reserved.

//

#import "UIButton+ImageTitleSpace.h"

@implementation UIButton (ImageTitleSpace)

/*

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

}

*/

- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style

imageTitleSpace:(CGFloat)space {

/**

* 知识点：titleEdgeInsets是title相对于其上下左右的inset，跟tableView的contentInset是类似的，

* 如果只有title，那它上下左右都是相对于button的，image也是一样；

* 如果同时有image和label，那这时候image的上左下是相对于button，右边是相对于label的；title的上右下是相对于button，左边是相对于image的。

*/

// 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的值

/**

MKButtonEdgeInsetsStyleTop, // image在上，label在下

MKButtonEdgeInsetsStyleLeft, // image在左，label在右

MKButtonEdgeInsetsStyleBottom, // image在下，label在上

MKButtonEdgeInsetsStyleRight // image在右，label在左

*/

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;

}

@end

用法

UIButton *testBtn = [[UIButton alloc] init];

[testBtn layoutButtonWithEdgeInsetsStyle:MKButtonEdgeInsetsStyleRight imageTitleSpace:5];