iOS UIButton图文混排快捷显示

简介: iOS UIButton图文混排快捷显示

前言


常规的UIButton设置图文混排时显示图左文右,但是很多时候需求需要更多的显示位置,支持xib


GitHub地址:KJEmitterView

1.png


这里提供8种位置:

typedef NS_ENUM(NSInteger, KJButtonContentLayoutStyle) {
    KJButtonContentLayoutStyleNormal = 0,       // 内容居中-图左文右
    KJButtonContentLayoutStyleCenterImageRight, // 内容居中-图右文左
    KJButtonContentLayoutStyleCenterImageTop,   // 内容居中-图上文下
    KJButtonContentLayoutStyleCenterImageBottom,// 内容居中-图下文上
    KJButtonContentLayoutStyleLeftImageLeft,    // 内容居左-图左文右
    KJButtonContentLayoutStyleLeftImageRight,   // 内容居左-图右文左
    KJButtonContentLayoutStyleRightImageLeft,   // 内容居右-图左文右
    KJButtonContentLayoutStyleRightImageRight,  // 内容居右-图右文左
};


Xib显示

1.png

支持在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设置图文混排,


大致思路就是获取图片和文本的尺寸,按照相对应的混排方式设置imageEdgeInsetstitleEdgeInsets

- (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];
}


备注:本文用到的部分函数方法和Demo,均来自三方库**KJEmitterView**,如有需要的朋友可自行pod 'KJEmitterView'引入即可


UIButton图文混排介绍就到此完毕,后面有相关再补充,写文章不容易,还请点个**小星星**传送门

相关文章
|
存储 自然语言处理 API
iOS 多语言快捷设置Xib设置
iOS 多语言快捷设置Xib设置
iOS 多语言快捷设置Xib设置
|
API iOS开发 Perl
iOS UIButton倒计时、指示器、粒子效果
iOS UIButton倒计时、指示器、粒子效果
iOS UIButton倒计时、指示器、粒子效果
|
JSON iOS开发 数据格式
iOS开发-图文混排之cell自适应
iOS开发-图文混排之cell自适应
101 0
iOS开发-图文混排之cell自适应
|
iOS开发
iOS 之 自定义按钮UIButton
iOS 之 自定义按钮UIButton
320 0
iOS 之 自定义按钮UIButton
|
API iOS开发 Perl
ios UIButton点击快捷回调
ios UIButton点击快捷回调
|
程序员 API iOS开发
iOS UIView添加快捷手势回调
iOS UIView添加快捷手势回调
|
API 开发工具 Android开发
iOS图文混排: 1、封装富文本API,采用block实现链式编程 2、HTML与富文本互转 3、带图片和超链接的富文本【修订】
iOS图文混排: 1、封装富文本API,采用block实现链式编程 2、HTML与富文本互转 3、带图片和超链接的富文本【修订】
334 0
iOS图文混排: 1、封装富文本API,采用block实现链式编程 2、HTML与富文本互转 3、带图片和超链接的富文本【修订】
|
iOS开发
iOS UIButton解读
iOS UIButton解读
182 0
|
iOS开发
iOS UIButton(按钮)
UIButton属性 1.UIButton状态: UIControlStateNormal // 正常状态 UIControlStateHighlighted // 高亮状态 UIControlStateDisabled ...
1023 0
|
iOS开发
(转载)iOS自己总结的超级详细分解富文本大全(AttributedString),图文混排很轻松
原文地址:http://blog.csdn.net/deft_mkjing/article/details/52141936 NSFontAttributeName 设置字体大小和字体的类型 默认12 Helveti...
1490 0