前言
- 常规的UIButton设置图文混排时显示图左文右，但是很多时候需求需要更多的显示位置，支持xib
. Demo地址
gif
这里提供8种位置：
typedef NS_ENUM(NSInteger, KJButtonContentLayoutStyle) {
KJButtonContentLayoutStyleNormal = 0, // 内容居中-图左文右
KJButtonContentLayoutStyleCenterImageRight, // 内容居中-图右文左
KJButtonContentLayoutStyleCenterImageTop, // 内容居中-图上文下
KJButtonContentLayoutStyleCenterImageBottom,// 内容居中-图下文上
KJButtonContentLayoutStyleLeftImageLeft, // 内容居左-图左文右
KJButtonContentLayoutStyleLeftImageRight, // 内容居左-图右文左
KJButtonContentLayoutStyleRightImageLeft, // 内容居右-图左文右
KJButtonContentLayoutStyleRightImageRight, // 内容居右-图右文左
};
Xib显示
|
|
|---|
支持在xib右上角设置相关属性
layoutType 图文类型，默认为内容居中-图左文右
0: 内容居中-图左文右
1: 内容居中-图右文左
2: 内容居中-图上文下
3: 内容居中-图下文上
4: 内容居左-图左文右
5: 内容居左-图右文左
6: 内容居右-图左文右
7: 内容居右-图右文左
padding 图文间距，默认0px
periphery 图文边界间距，默认5px
该属性只是针对于，内容居左和内容居右的时候有效
API
兼容旧版kj_ButtonContentLayoutType、kj_Padding、kj_PaddingInset这三个属性仍然可用
/// 图文样式
@property(nonatomic,assign)IBInspectable NSInteger layoutType;
/// 图文间距，默认为0px
@property(nonatomic,assign)IBInspectable CGFloat padding;
/// 图文边界的间距，默认为5px
@property(nonatomic,assign)IBInspectable CGFloat periphery;
//*************************** 暂时保留，兼容旧版 *******************************
/// 图文样式
@property(nonatomic,assign) KJButtonContentLayoutStyle kj_ButtonContentLayoutType DEPRECATED_MSG_ATTRIBUTE("Please use layoutType");
/// 图文间距
@property(nonatomic,assign) CGFloat kj_Padding DEPRECATED_MSG_ATTRIBUTE("Please use padding");
/// 图文边界的间距，默认为5px
@property(nonatomic,assign) CGFloat kj_PaddingInset DEPRECATED_MSG_ATTRIBUTE("Please use periphery");
setter/getter
#pragma mark - SET
- (NSInteger)layoutType{
return [objc_getAssociatedObject(self, @selector(layoutType)) integerValue];;
}
- (void)setLayoutType:(NSInteger)layoutType{
objc_setAssociatedObject(self, @selector(layoutType), @(layoutType), OBJC_ASSOCIATION_ASSIGN);
[self kj_setButtonContentLayout];
}
- (CGFloat)padding{
return [objc_getAssociatedObject(self, @selector(padding)) floatValue];
}
- (void)setPadding:(CGFloat)padding{
objc_setAssociatedObject(self, @selector(padding), @(padding), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self kj_setButtonContentLayout];
}
- (CGFloat)periphery{
return [objc_getAssociatedObject(self, @selector(periphery)) floatValue];
}
- (void)setPeriphery:(CGFloat)periphery{
objc_setAssociatedObject(self, @selector(periphery), @(periphery), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self kj_setButtonContentLayout];
}
- (KJButtonContentLayoutStyle)kj_ButtonContentLayoutType{
return (KJButtonContentLayoutStyle)[objc_getAssociatedObject(self, @selector(kj_ButtonContentLayoutType)) integerValue];
}
- (void)setKj_ButtonContentLayoutType:(KJButtonContentLayoutStyle)kj_ButtonContentLayoutType{
objc_setAssociatedObject(self, @selector(kj_ButtonContentLayoutType), @(kj_ButtonContentLayoutType), OBJC_ASSOCIATION_ASSIGN);
self.layoutType = kj_ButtonContentLayoutType;
}
- (CGFloat)kj_Padding{
return [objc_getAssociatedObject(self, @selector(kj_Padding)) floatValue];
}
- (void)setKj_Padding:(CGFloat)kj_Padding{
objc_setAssociatedObject(self, @selector(kj_Padding), @(kj_Padding), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
self.padding = kj_Padding;
}
- (CGFloat)kj_PaddingInset{
return [objc_getAssociatedObject(self, @selector(kj_PaddingInset)) floatValue];
}
- (void)setKj_PaddingInset:(CGFloat)kj_PaddingInset{
objc_setAssociatedObject(self, @selector(kj_PaddingInset), @(kj_PaddingInset), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
self.periphery = kj_PaddingInset;
}
kj_setButtonContentLayout设置图文混排，
大致思路就是获取图片和文本的尺寸，按照相对应的混排方式设置imageEdgeInsets 和 titleEdgeInsets
- (void)kj_setButtonContentLayout{
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
CGFloat imageWith = self.imageView.image.size.width;
CGFloat imageHeight = self.imageView.image.size.height;
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
CGSize size = [self.titleLabel.text sizeWithFont:self.titleLabel.font];
CGFloat labelWidth = size.width;
CGFloat labelHeight = size.height;
#pragma clang diagnostic pop
UIEdgeInsets imageEdge = UIEdgeInsetsZero;
UIEdgeInsets titleEdge = UIEdgeInsetsZero;
if (self.periphery == 0) self.periphery = 5;
switch (self.layoutType) {
case KJButtonContentLayoutStyleNormal:{
titleEdge = UIEdgeInsetsMake(0, self.padding, 0, 0);
imageEdge = UIEdgeInsetsMake(0, 0, 0, self.padding);
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
}
break;
case KJButtonContentLayoutStyleCenterImageRight:{
titleEdge = UIEdgeInsetsMake(0, -imageWith - self.padding, 0, imageWith);
imageEdge = UIEdgeInsetsMake(0, labelWidth + self.padding, 0, -labelWidth);
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
}
break;
case KJButtonContentLayoutStyleCenterImageTop:{
titleEdge = UIEdgeInsetsMake(0, -imageWith, -imageHeight - self.padding, 0);
imageEdge = UIEdgeInsetsMake(-labelHeight - self.padding, 0, 0, -labelWidth);
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
}
break;
case KJButtonContentLayoutStyleCenterImageBottom:{
titleEdge = UIEdgeInsetsMake(-imageHeight - self.padding, -imageWith, 0, 0);
imageEdge = UIEdgeInsetsMake(0, 0, -labelHeight - self.padding, -labelWidth);
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
}
break;
case KJButtonContentLayoutStyleLeftImageLeft:{
titleEdge = UIEdgeInsetsMake(0, self.padding + self.periphery, 0, 0);
imageEdge = UIEdgeInsetsMake(0, self.periphery, 0, 0);
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
}
break;
case KJButtonContentLayoutStyleLeftImageRight:{
titleEdge = UIEdgeInsetsMake(0, -imageWith + self.periphery, 0, 0);
imageEdge = UIEdgeInsetsMake(0, labelWidth + self.padding + self.periphery, 0, 0);
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
}
break;
case KJButtonContentLayoutStyleRightImageLeft:{
imageEdge = UIEdgeInsetsMake(0, 0, 0, self.padding + self.periphery);
titleEdge = UIEdgeInsetsMake(0, 0, 0, self.periphery);
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
}
break;
case KJButtonContentLayoutStyleRightImageRight:{
titleEdge = UIEdgeInsetsMake(0, -self.frame.size.width / 2, 0, imageWith + self.padding + self.periphery);
imageEdge = UIEdgeInsetsMake(0, 0, 0, -labelWidth + self.periphery);
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
}
break;
default:break;
}
self.imageEdgeInsets = imageEdge;
self.titleEdgeInsets = titleEdge;
[self setNeedsDisplay];
}