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

發(fā)布時間：2020-09-20 14:00:51 來源：腳本之家閱讀：773 作者：萬家豪欄目：移動開發(fā)

前言

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

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

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

1. 通過使用 UILbael 的分類實現(xiàn)修改間距的功能。

2 .使用兩種方法來計算：“富文字”的高度。

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

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

設(shè)置思路

普通的 NSString 文字，不能調(diào)整字體“行間距”或“字間距”，但
NSAttributedString 富文字，可以調(diào)整該間距，所以我們把普通的字體變?yōu)楦晃淖郑缓笫褂酶晃淖謱?yīng)方法即可設(shè)置間距。
設(shè)置過程

給 label 添加一個分類，在分類中聲明并實現(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è)置的 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 = @"測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字";
 [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

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

計算Label富文字高度

計算思路

可以直接計算富字體排布高度，該高度即為 Label 高度，也可以使用 UILable 的方法來計算 Label 高度

方法1.使用UILabel方法：sizeThatFits

- (CGRect)sizeThatFits:(CGSize)size;

通過UILabel的方法sizeThatFits，該方法需要傳入一個參數(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個參數(shù)：

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

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

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

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

使用示例

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

Label富文字計算高度注意點

出現(xiàn)問題

當文字只有一行并且是全是中文時：高度計算不準確

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

解決思路

首先：通過sizeThatFits 或 boundingWithRect 計算出未處理的rect值

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

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

示例代碼

//通過boundingWithRect 計算出未處理的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){
//如果只有一行，進行判斷內(nèi)容中是否全部為漢字
  if ([self containChinese:string]) {
//修正后高度為： 目前高度 - 一個行間距
   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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽