iOS - UILabel

前言

NS_CLASS_AVAILABLE_IOS(2_0) @interface UILabel : UIView <NSCoding>
    @available(iOS 2.0, *)   public class UILabel : UIView, NSCoding

• 實際上 label 就是一個能夠顯示文字的視圖控件。

一、Label 的建立

• Objective-C

  // 實例化 label 對象
      UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 40, 100, 25)];
  
      // 將 label 加到 window 上顯示出來
      [self.view addSubview:label];

• Swift

  // 實例化 label 對象
      let label:UILabel = UILabel(frame: CGRectMake(10, 40, 100, 25))
  
      // 將 label 加到 window 上顯示出來
      self.view.addSubview(label)

二、Label 的設置

• Objective-C

  // 背景顏色
      label.backgroundColor = [UIColor redColor];
  
      // label 文字
      label.text = @"LabelLabelLabelLabelLabelLabelLabelLabelLabelLabel";
  
      // label 變屬性文字
      label.attributedText = mutableAttributedString;
  
      // 設置字體
  
          // 系統樣式
          label.font = [UIFont systemFontOfSize:30];
  
          // 加粗
          label.font = [UIFont boldSystemFontOfSize:30];
  
          // 傾斜
          label.font = [UIFont italicSystemFontOfSize:30];
  
          // 設置爲指定字體類型的文字
          label.font = [UIFont fontWithName:@"Zapfino" size:15];
  
      // 獲取系統字體庫中的全部字體名稱
      NSArray *fontNameArray = [UIFont familyNames];
  
      // 文字顏色
      label.textColor = [UIColor blackColor];
  
      // 文字對齊方式
      label.textAlignment = NSTextAlignmentCenter;
  
      // 文字陰影
      /*
          shadowColor：陰影顏色，shadowOffset：陰影偏移量
      */
      label.shadowColor = [UIColor greenColor];
      label.shadowOffset = CGSizeMake(5, 5);
  
      // 文字換行方式
      /*
          // 以單詞爲單位換行(最後一行顯示不完以單詞截斷剩下的內容不顯示也不會省略(沒有...))
          NSLineBreakByWordWrapping = 0,     // Wrap at word boundaries, default
  
          // 以字符爲單位換行(最後一行顯示不完以字符截斷剩下的內容不顯示也不會省略(沒有...))
          NSLineBreakByCharWrapping,         // Wrap at character boundaries
  
          // 以單詞爲單位換行(最後一行顯示不完以字符截斷剩下的內容不顯示也不會省略(沒有...))
          NSLineBreakByClipping,             // Simply clip
  
          // 以單詞換行，最後一行以字符截斷，最後一行顯示不完則省略最後一行的開頭，以」...」顯示
          NSLineBreakByTruncatingHead,       // Truncate at head of line: "...wxyz"
  
          // 以單詞換行，最後一行以字符截斷，最後一行顯示不完則省略最後一行的中間，以」...」顯示
          NSLineBreakByTruncatingTail,       // Truncate at tail of line: "abcd..."
  
          // 以單詞換行，最後一行以字符截斷，最後一行顯示不完則省略最後一行的最後，以」...」顯示
          NSLineBreakByTruncatingMiddle      // Truncate middle of line:  "ab...yz"
      */
      label.lineBreakMode = NSLineBreakByWordWrapping;
  
      // 文字行數
      /*
          設置文字行數，0: 默認，行數不限
      */
      label.numberOfLines = 0;
  
      // 文字自動調整
      label.adjustsFontSizeToFitWidth = YES;
  
      // 文字自適應 frame
      /*
          frame 自適配文字，寬度不變，必需要在添加了顯示文字以後設置
      */
      [label sizeToFit];
  
      // 設置 label 每一行文字的最大寬度
      /* 
          在自動計算 label 高度時，爲了保證計算出來的數值 跟 真正顯示出來的效果 一致，若自動換行必須設置
      */
      label.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 20;

• Swift

  // 背景顏色
      label.backgroundColor = UIColor.redColor()
  
      // label 文字
      label.text = "LabelLabelLabelLabelLabelLabelLabelLabelLabelLabel"
  
      // label 變屬性文字
      label.attributedText = mutableAttributedString
  
      // 設置字體
  
          // 系統樣式
          label.font = UIFont.systemFontOfSize(30)
  
          // 設置字體  加粗
          label.font = UIFont.boldSystemFontOfSize(30)
  
          // 設置字體  傾斜
          label.font = UIFont.italicSystemFontOfSize(30)
  
          // 設置爲指定字體類型的文字
          label.font = UIFont(name: "Zapfino", size: 15)
  
      // 獲取系統字體庫中的全部字體名稱
      let fontNameArray:NSArray = UIFont.familyNames()
  
      // 文字顏色
      label.textColor = UIColor.blackColor()
  
      // 文字對齊方式
      label.textAlignment = NSTextAlignment.Center
  
      // 文字陰影
      /*
          shadowColor：陰影顏色，shadowOffset：陰影偏移量
      */
      label.shadowColor = UIColor.greenColor()
      label.shadowOffset = CGSizeMake(5, 5)
  
      // 文字換行方式
      /*
          // 以單詞爲單位換行(最後一行顯示不完以單詞截斷剩下的內容不顯示也不會省略(沒有...))
          case ByWordWrapping
  
          // 以字符爲單位換行(最後一行顯示不完以字符截斷剩下的內容不顯示也不會省略(沒有...))
          case ByCharWrapping
  
          // 以單詞爲單位換行(最後一行顯示不完以字符截斷剩下的內容不顯示也不會省略(沒有...))
          case ByClipping
  
          // 以單詞換行，最後一行以字符截斷，最後一行顯示不完則省略最後一行的開頭，以」...」顯示
          case ByTruncatingHead
  
          // 以單詞換行，最後一行以字符截斷，最後一行顯示不完則省略最後一行的中間，以」...」顯示
          case ByTruncatingTail
  
          // 以單詞換行，最後一行以字符截斷，最後一行顯示不完則省略最後一行的最後，以」...」顯示
          case ByTruncatingMiddle
      */
      label.lineBreakMode = .ByWordWrapping
  
      // 文字行數
      /*
          設置文字行數，0: 默認，行數不限
      */
      label.numberOfLines = 0
  
      // 文字自動調整
      label.adjustsFontSizeToFitWidth = true
  
      // 文字自適應 frame
      /*
          frame 自適配文字，寬度不變，必需要在添加了顯示文字以後設置
      */
      label.sizeToFit()
  
      // 設置 label 每一行文字的最大寬度
      /* 
          在自動計算 label 高度時，爲了保證計算出來的數值 跟 真正顯示出來的效果 一致，若自動換行必須設置
      */
      label.preferredMaxLayoutWidth = UIScreen.mainScreen().bounds.size.width - 20

三、可變屬性 Label 的建立

• Objective-C

  UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 50, 100, 30)];
      label.backgroundColor = [UIColor grayColor];
      [self.view addSubview:label];
  
      NSString *str1 = @"NSMutable";
      NSString *str2 = @"Attributed";
      NSString *str3 = @"String";
  
      // 設置 range 的大小
      NSRange range1 = NSMakeRange(0, str1.length);
      NSRange range2 = NSMakeRange(str1.length, str2.length);
      NSRange range3 = NSMakeRange(str1.length + str2.length, str3.length);
  
      // 實例化可變屬性的字符串對象
      NSMutableAttributedString *str = [[NSMutableAttributedString alloc] 
                                initWithString:[NSString stringWithFormat:@"%@%@%@", str1, str2, str3]];
  
      // 設置文字的顏色和文字的大小
      [str addAttributes:@{NSForegroundColorAttributeName:[UIColor blueColor], 
                                      NSFontAttributeName:[UIFont boldSystemFontOfSize:15]} 
                   range:range1];
      [str addAttributes:@{NSForegroundColorAttributeName:[UIColor brownColor], 
                                      NSFontAttributeName:[UIFont systemFontOfSize:40]} 
                   range:range2];
      [str addAttributes:@{NSForegroundColorAttributeName:[UIColor greenColor], 
                                      NSFontAttributeName:[UIFont italicSystemFontOfSize:25]} 
                   range:range3];
  
      // 向 label 中添加文字
      label.attributedText = str;
  
      // frame 自適配文字，必須放在最後邊，不然會不顯示任何內容
      [label sizeToFit];

• Swift

  let label:UILabel = UILabel(frame: CGRectMake(10, 50, 100, 30))
      label.backgroundColor = UIColor.grayColor()
      self.view.addSubview(label)
  
      let str1:NSString = "NSMutable"
      let str2:NSString = "Attributed"
      let str3:NSString = "String"
  
      // 設置 range 的大小
      let range1:NSRange = NSMakeRange(0, str1.length)
      let range2:NSRange = NSMakeRange(str1.length, str2.length)
      let range3:NSRange = NSMakeRange(str1.length + str2.length, str3.length)
  
      // 實例化可變屬性的字符串對象
      let str:NSMutableAttributedString = NSMutableAttributedString(string: 
                                                             String(format: "%@%@%@", str1, str2, str3))
  
      // 設置文字的顏色和文字的大小
      str.addAttributes([NSForegroundColorAttributeName:UIColor.blueColor(), 
                                    NSFontAttributeName:UIFont.boldSystemFontOfSize(15)], 
                  range: range1)
      str.addAttributes([NSForegroundColorAttributeName:UIColor.brownColor(), 
                                    NSFontAttributeName:UIFont.systemFontOfSize(40)], 
                  range: range2)
      str.addAttributes([NSForegroundColorAttributeName:UIColor.greenColor(), 
                                    NSFontAttributeName:UIFont.italicSystemFontOfSize(25)], 
                  range: range3)
  
      // 向 label 中添加文字
      label.attributedText = str
  
      // frame 自適配文字，必須放在最後邊，不然會不顯示任何內容
      label.sizeToFit()

四、Storyboard 中設置

• 在 Storyboard 場景中設置

  • Label 設置

    Text                          |  文字類型和顯示的文字

    --------------------------------|---------------------
    Color | 文字顏色
    Font | 文字字體
    Alignment | 文字對齊方式
    Lines | 行數
    Behavior |
    -- Enable |
    -- Highlighted |
    |
    Baseline |
    Line Breaks | 斷行方式
    |
    Autoshrink |
    -- Tighten Letter Spacing |
    |
    Highlighted | 高亮顏色
    Shadow | 陰影顏色
    Shadow Offset | 陰影偏移量

五、HUD

• 其餘說法：指示器、遮蓋、蒙板

• UILabel 半透明 HUD 的作法：

  • 背景色設置爲半透明顏色，文字顏色透明度不變。

    • 1> Storyboard 中設置背景半透明顏色

    • 2> 純代碼中設置背景半透明顏色

      • Objective-C

        // 設置背景顏色爲半透明
            self.labelHUD.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];

• 顯示 HUD

  • Objective-C

    // 設置顯示的提示文字
        self.labelHUD.text = @"數據加載完畢";
    
        // 顯示 HUD
        self.labelHUD.alpha = 1.0;

• 隱藏 HUD

  • Objective-C

    • 直接隱藏

      // 隱藏 HUD
          self.labelHUD.alpha = 0.0;

    • 逐漸隱藏

      // 在 1 秒中內隱藏
          [UIView animateWithDuration:1 animations:^{
      
              self.labelHUD.alpha = 0.0;
          }];

六、數字動態變化

• 具體實現代碼見 GitHub 源碼 QExtension

• 具體講解見 iOS - Label 數字動態變化

• 效果

七、跑馬燈

7.1 簡單實現

• Objective-C

  UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(10, 30, [[UIScreen mainScreen] bounds].size.width - 20, 50)];
      backView.backgroundColor = [UIColor grayColor];
      [self.view addSubview:backView];
  
      UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, 120, 30)];
      label.backgroundColor = [UIColor yellowColor];
      label.textColor = [UIColor greenColor];
      label.text = @"Label Marquee";
      [backView addSubview:label];
  
      // 子視圖的範圍不容許超過父視圖的範圍
      backView.clipsToBounds = YES;
  
      // 開始動畫播放
  
          // 設置 label 的起始位置
          CGRect frame = label.frame;
          frame.origin.x = backView.frame.size.width;
          label.frame = frame;
  
          // 開始簡單動畫
          [UIView beginAnimations:nil context:nil];
  
          // 設置動畫時間（開始播放動畫）
          [UIView setAnimationDuration:5];
  
          // 勻速
          [UIView setAnimationCurve:UIViewAnimationCurveLinear];
  
          // 無限重複
          [UIView setAnimationRepeatCount:CGFLOAT_MAX];
  
          // 設置 label 的結束位置
          frame.origin.x = -frame.size.width;
          label.frame = frame;
  
          // 結束動畫
          [UIView commitAnimations];
  
      // 一次播放動畫結束

• Swift

  let backView:UIView = UIView(frame: CGRectMake(10, 30, UIScreen.mainScreen().bounds.size.width - 20, 50))
      backView.backgroundColor = UIColor.grayColor()
      self.view.addSubview(backView)
  
      let label:UILabel = UILabel(frame: CGRectMake(0, 10, 120, 30))
      label.textColor = UIColor.greenColor()
      label.text = "Label Marquee"
      backView.addSubview(label)
  
      // 子視圖的範圍不容許超過父視圖的範圍
      backView.clipsToBounds = true
  
      // 開始動畫播放
  
          // 設置 label 的起始位置
          var frame:CGRect = label.frame
          frame.origin.x = backView.frame.size.width
          label.frame = frame
  
          // 開始簡單動畫
          UIView.beginAnimations(nil, context: nil)
  
          // 設置動畫時間（開始播放動畫）
          UIView.setAnimationDuration(5)
  
          // 勻速
          UIView.setAnimationCurve(UIViewAnimationCurve.Linear)
  
          // 無限重複
          UIView.setAnimationRepeatCount(9999999)
  
          // 設置 label 的結束位置
          frame.origin.x = -frame.size.width
          label.frame = frame
  
          // 結束動畫
          UIView.commitAnimations()
  
      // 一次播放動畫結束

7.2 跑馬燈實現封裝

• 具體實現代碼見 GitHub 源碼 QExtension

• 具體講解見 iOS - 跑馬燈、彈幕

• 效果

八、彈幕

• 具體實現代碼見 GitHub 源碼 QExtension

• 具體講解見 iOS - 跑馬燈、彈幕

• 效果