iOS UILabel 設(shè)置內(nèi)容的間距及高度的計(jì)算示例

更新時(shí)間：2017年11月06日 09:07:15 作者：萬(wàn)家豪

本篇文章主要介紹了iOS UILabel 設(shè)置內(nèi)容的間距及高度的計(jì)算示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

UILabel 是的使用頻率是非常頻繁，當(dāng)文字較多的時(shí)候，會(huì)顯得密密麻麻的，不利于UI顯示及用戶觀看。通常我們需要對(duì) Label 中“行間距”或“文字間距”進(jìn)行調(diào)整，從而使文字沒(méi)那么緊密，提高用戶體驗(yàn)。

當(dāng)調(diào)整“行間距”或“字間距”后，很多時(shí)候需要對(duì)Label進(jìn)行高度自適應(yīng)，此時(shí)會(huì)出現(xiàn)高度計(jì)算錯(cuò)誤的問(wèn)題，所以我們需要對(duì)“富文字”高度進(jìn)行計(jì)算。計(jì)算結(jié)束后，經(jīng)測(cè)試發(fā)現(xiàn)：當(dāng)文字為1行并且全部文字為“中文”時(shí)，高度計(jì)算不準(zhǔn)確，最后對(duì)該問(wèn)題進(jìn)行處理。

綜上所述：分為以下三步進(jìn)行設(shè)置“UILabel 內(nèi)容的間距及高度的計(jì)算”

1. 通過(guò)使用 UILbael 的分類(lèi)實(shí)現(xiàn)修改間距的功能。

2 .使用兩種方法來(lái)計(jì)算：“富文字”的高度。

3. 對(duì)“高度計(jì)算結(jié)果”特殊情況進(jìn)行處理。

一.設(shè)置 Label “行間距”或“字間距”

設(shè)置思路

普通的 NSString 文字，不能調(diào)整字體“行間距”或“字間距”，但
NSAttributedString 富文字，可以調(diào)整該間距，所以我們把普通的字體變?yōu)楦晃淖?，然后使用富文字?duì)應(yīng)方法即可設(shè)置間距。
設(shè)置過(guò)程

給 label 添加一個(gè)分類(lèi)，在分類(lèi)中聲明并實(shí)現(xiàn)三種方法

@interface UILabel (ChangeLineSpaceAndWordSpace)
//1.設(shè)置：行間距
+ (void)changeLineSpaceForLabel:(UILabel *)label WithSpace:(float)space;

//2.設(shè)置：字間距
+ (void)changeWordSpaceForLabel:(UILabel *)label WithSpace:(float)space;

//3.設(shè)置：行間距 與 字間距
+ (void)changeSpaceForLabel:(UILabel *)label withLineSpace:(float)lineSpace WordSpace:(float)wordSpace;
@end

1.設(shè)置：行間距

//傳入需要設(shè)置的 Label 與需要設(shè)置的行間距數(shù)值
+ (void)changeLineSpaceForLabel:(UILabel *)label WithSpace:(float)space {
 NSString *labelText = label.text;
 NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:labelText];
 NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
 [paragraphStyle setLineSpacing:space];
 [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [labelText length])];
 label.attributedText = attributedString;
 [label sizeToFit];
}

2.設(shè)置：字間距

//傳入需要設(shè)置的 Label 與需要設(shè)置的字間距數(shù)值
+ (void)changeWordSpaceForLabel:(UILabel *)label WithSpace:(float)space {
 NSString *labelText = label.text;
 NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:labelText attributes:@{NSKernAttributeName:@(space)}];
 NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
 [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [labelText length])];
 label.attributedText = attributedString;
 [label sizeToFit];
}

3.同時(shí)設(shè)置：行間距與字間距

//傳入需要設(shè)置的 Label 與需要設(shè)置的行間距數(shù)值與字間距數(shù)值
+ (void)changeSpaceForLabel:(UILabel *)label withLineSpace:(float)lineSpace WordSpace:(float)wordSpace {
 NSString *labelText = label.text;
 NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:labelText attributes:@{NSKernAttributeName:@(wordSpace)}];
 NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
 [paragraphStyle setLineSpacing:lineSpace];
 [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [labelText length])];
 label.attributedText = attributedString;
 [label sizeToFit];
}

使用示例

//設(shè)置label內(nèi)容，將lable內(nèi)容變?yōu)橛虚g距的內(nèi)容
 testLabel.text = @"測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字測(cè)試文字";
 [UILabel changeLineSpaceForLabel:testLabel WithSpace:20];//設(shè)置testLabel中內(nèi)容的行間距為20
 [UILabel changeWordSpaceForLabel:self.testLabel WithSpace:20];//設(shè)置testLabel中內(nèi)容的字間距為20
// 
 [UILabel changeLineSpaceForLabel:self.testLabel WithSpace:20];//設(shè)置testLabel中內(nèi)容的行間距為20，字間距為20

計(jì)算Label富文字高度

計(jì)算思路

可以直接計(jì)算富字體排布高度，該高度即為 Label 高度，也可以使用 UILable 的方法來(lái)計(jì)算 Label 高度

方法1.使用UILabel方法：sizeThatFits

- (CGRect)sizeThatFits:(CGSize)size;

通過(guò)UILabel的方法sizeThatFits，該方法需要傳入一個(gè)參數(shù)，即可算出目前l(fā)abel高度。

參數(shù)1. size：其中size的寬度為label的寬度，size的一般填入最大高度。

CGSize size = [label sizeThatFits:CGSizeMake(label.frame.size.width, CGFLOAT_MAX)];

方法2.使用NSString方法：boundingWithRect

- (CGRect)boundingRectWithSize:(CGSize)size
            options:(NSStringDrawingOptions)options
            context:(nullable NSStringDrawingContext *)context;

該方法需要傳入3個(gè)參數(shù)：

參數(shù)1. size：其中size的寬度為label的寬度，size的一般填入最大高度。

參數(shù)2. options：文本繪制時(shí)的附加選項(xiàng)

1. NSStringDrawingUsesLineFragmentOrigin （整個(gè)文本將以每行組成的矩形為單位計(jì)算整個(gè)文本的尺寸）
2. NSStringDrawingUsesFontLeading （使用字體的行間距來(lái)計(jì)算文本占用的范圍，即每一行的底部到下一行的底部的距離計(jì)算）
3. NSStringDrawingUsesDeviceMetrics （將文字以圖像符號(hào)計(jì)算文本占用范圍，而不是以字符計(jì)算。也即是以每一個(gè)字體所占用的空間來(lái)計(jì)算文本范圍）
4. NSStringDrawingTruncatesLastVisibleLine （當(dāng)文本不能適合的放進(jìn)指定的邊界之內(nèi)，則自動(dòng)在最后一行添加省略符號(hào)。如果NSStringDrawingUsesLineFragmentOrigin沒(méi)有設(shè)置，則該選項(xiàng)不生效）

參數(shù)3. context：上下文，一般傳nil

使用示例

NSStringDrawingOptions options = NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading;
CGRect rect = [attributeString boundingRectWithSize:CGSizeMake(label.frame.size.width, CGFLOAT_MAX) options:options context:nil];

Label富文字計(jì)算高度注意點(diǎn)

出現(xiàn)問(wèn)題

當(dāng)文字只有一行并且是全是中文時(shí)：高度計(jì)算不準(zhǔn)確

解決思路

首先：通過(guò)sizeThatFits 或 boundingWithRect 計(jì)算出未處理的rect值

第一步：對(duì)rect值，進(jìn)行判斷： “是否只有一行并且該行文字全為中文”

第二步：修復(fù)高度值，對(duì)高度值進(jìn)行調(diào)整： “減去一個(gè)行間距值”

示例代碼

//通過(guò)boundingWithRect 計(jì)算出未處理的rect值
 NSStringDrawingOptions options = NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading;
 CGRect rect = [attributeString boundingRectWithSize:CGSizeMake(label.frame.size.width, CGFLOAT_MAX) options:options context:nil];

//判斷內(nèi)容是否只有一行 : (目前高度 - 字體高度) <= 行間距
 if ((rect.size.height - _font.lineHeight) <= paragraphStyle.lineSpacing){
//如果只有一行，進(jìn)行判斷內(nèi)容中是否全部為漢字
  if ([self containChinese:string]) {
//修正后高度為： 目前高度 - 一個(gè)行間距
   rect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height-paragraphStyle.lineSpacing);
  }
 }

//判斷內(nèi)容中是否全部為漢字
- (BOOL)containChinese:(NSString *)str {
  for(int i=0; i< [str length];i++){ int a = [str characterAtIndex:i];
   if( a > 0x4e00 && a < 0x9fff){ 
     return YES; 
   }
  }
  return NO;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: