前言
常规的UIButton设置图文混排时显示图左文右,但是很多时候需求需要更多的显示位置,支持xib
GitHub地址:KJEmitterView
这里提供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]; }