最近的項(xiàng)目開發(fā)過程中,遇到了一個(gè)文案顯示問題,難點(diǎn)是:
1.文案只顯示兩行,但是第一行顯示的寬度不確定,而且部分文案不確定;
2.總共兩行的文案,要顯示3種不一樣字體和2種不一樣的顏色;
3.第1行兩種字號(hào)不一樣的文案還要居中對(duì)齊,居中對(duì)齊。如下圖所示:

文案樣式
針對(duì)這個(gè)問題,從代碼的簡(jiǎn)介性、易讀性以及UI效果上考慮,最好能用一個(gè)label實(shí)現(xiàn)。那么就要解決兩個(gè)問題:
1.顯示2行文案,以及能夠自由控制行間距;
2.第一行文案能夠正確顯示,而且不同字號(hào)的文案能夠居中對(duì)齊。
第一步,解決第一行文案寬度問題,雖然第一行有不確定的文案,但是第二行文案確定,我們可以直接截?。猾@取文案后,計(jì)算文案的寬度,設(shè)置label的寬度。
//通過字號(hào)和文案計(jì)算寬度
- (CGSize)completeTextWidthWithFont:(CGFloat)fontSize text:(NSString *)text
{
NSDictionary *attrs = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:fontSize]};
CGSize size = [text sizeWithAttributes:attrs];
return size;
}
第二步,可以調(diào)整行間距以及第一行上居中問題,代碼如下所示:
- (void)setupSubview
{
NSString *str = @"¥3000額度";
self.label = [[UILabel alloc] init];
self.label.numberOfLines = 2;
//基準(zhǔn)線-用來對(duì)齊,可以調(diào)整為其他數(shù)
CGFloat fontRatio = 0.26;
//調(diào)整行間距方法2
// [self.label setValue:@(25) forKey:@"lineSpacing"];
NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithString:str];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
[paragraphStyle setLineSpacing:8];
//調(diào)整行間距方法2
[attrStr addAttribute:NSParagraphStyleAttributeName
value:paragraphStyle
range:NSMakeRange(0, str.length)];
NSRange rang = [str rangeOfString:@"額度"];
[attrStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor]
range:NSMakeRange(0, 1)];
[attrStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:12]
range:NSMakeRange(0, 1)];
//24是文案3000的字號(hào) 12是¥的字號(hào) fontRatio-基準(zhǔn)線
[attrStr addAttribute:NSBaselineOffsetAttributeName value:@(fontRatio * (24-12)) range:NSMakeRange(0, 1)];
[attrStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor]
range:NSMakeRange(1, rang.location)];
[attrStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:24]
range:NSMakeRange(1, rang.location)];
[attrStr addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor]
range:rang];
[attrStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:18]
range:rang];
self.label.attributedText = attrStr;
//居中
self.label.textAlignment = NSTextAlignmentCenter;
//計(jì)算第一行文案的寬度
CGSize size1 = [self completeTextWidthWithFont:12 text:@"¥"];
CGSize size2 = [self completeTextWidthWithFont:24 text:[str substringWithRange:NSMakeRange(1, rang.location)]];
self.label.frame = CGRectMake(100, 100, size1.width + size2.width,
size1.height + size2.height + 20);
[self.view addSubview:self.label];
}