iOS中UILabel的深度定制之图文居中
2019-05-29 本文已影响0人
kyson老师
背景
效果图如果要实现图中所示效果,需要解决两个问题
- 图片和文字居中
- 文字如何居于 label 中间
因此笔者通过以下两步,解决:
//图片和文字居中
+(NSAttributedString *)grabStatusString {
NSMutableAttributedString *attri2 = [[NSMutableAttributedString alloc] init];
// 添加表情
NSTextAttachment *attch = [[NSTextAttachment alloc] init];
attch.image = [UIImage imageNamed:@"ic_grab_gou_green"];
attch.bounds = CGRectMake(1, 1, attch.image.size.width * 1.1, attch.image.size.height * 1.1);
NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
[attri2 insertAttributedString:string atIndex:0];
//文字
NSDictionary *style1 = [LPDAppStyle attributesWithFont:FONT(11) color:COLOR(FFF)];
NSMutableDictionary *resultStyle = [NSMutableDictionary dictionaryWithDictionary:style1];
NSString *statusText = @" 已取餐";
NSAttributedString *statusAttriString = [[NSAttributedString alloc] initWithString:statusText attributes:resultStyle];
[attri2 appendAttributedString:statusAttriString];
return attri2;
}
以及
//文字如何居于 label 中间
-(void)drawTextInRect:(CGRect)rect {
// inset 的意思 是相对u于以前的,以前相对于各个方向是0,那么如果想要改变,则需要 加 或者减
UIEdgeInsets insets = {-1, 2, 2, 2};
[super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];
}
但人工的计算太麻烦,笔者最终找到如下方案:
最终解决方案:
+(NSAttributedString *)grabStatusString {
NSMutableAttributedString *attri2 = [[NSMutableAttributedString alloc] init];
// 添加表情
NSTextAttachment *attch = [[NSTextAttachment alloc] init];
attch.image = [UIImage imageNamed:@"ic_grab_gou_green"];
attch.bounds = CGRectMake(1, (FONT(11).capHeight - attch.image.size.height * 1.1)/2, attch.image.size.width * 1.1, attch.image.size.height * 1.1);
NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
[attri2 insertAttributedString:string atIndex:0];
//文字
NSDictionary *style1 = [LPDAppStyle attributesWithFont:FONT(11) color:COLOR(FFF)];
NSMutableDictionary *resultStyle = [NSMutableDictionary dictionaryWithDictionary:style1];
NSString *statusText = @" 已取餐";
NSAttributedString *statusAttriString = [[NSAttributedString alloc] initWithString:statusText attributes:resultStyle];
[attri2 appendAttributedString:statusAttriString];
return attri2;
}
其中关键的一句代码是:
attch.bounds = CGRectMake(1, (FONT(11).capHeight - attch.image.size.height * 1.1)/2, attch.image.size.width * 1.1, attch.image.size.height * 1.1);
中的:
(FONT(11).capHeight - attch.image.size.height * 1.1)/2
最后笔者告诉大家代码中的几个宏定义:
#define COLOR(value) [UIColor colorWithHexString:@ #value]
#define TOP_HEIGHT (((UINavigationController *)([UIApplication sharedApplication].delegate.window.rootViewController)).navigationBar.frame.size.height + [[UIApplication sharedApplication] statusBarFrame].size.height)
#define FONT(x) [UIFont systemFontOfSize:(x)]
#define BOLD_FONT(x) [UIFont boldSystemFontOfSize:(x)]
#define SAFE_MID_FONT(x) ([UIFont fontWithName:@"PingFangSC-Medium" size:x] ?: BOLD_FONT(x))
@interface LPDAppStyle : NSObject
@end
@implementation LPDAppStyle (TextAttributes)
+ (NSDictionary *)attributesWithFont:(UIFont *)aFont color:(UIColor *)aColor {
return @{NSFontAttributeName: aFont,
NSForegroundColorAttributeName:aColor};
}
@end
最后奉上 效果图:
UILabel 图文排序最终