miyazaki-dev

【Swift】UILabelで文字を表示・カスタマイズ(大きさ/Font/タップイベント/下線)する方法

Swift

メインストーリーボード無しのプログラミングのみでの実装となります。

普通のUILabelを表示

何もカスタマイズ無しでただViewControllerに表示するだけ。 そして、これに情報をどんどん追加して、デザインを変えていくわけです。

import UIKit

class ViewController: UIViewController {
    
  // 表示のためのlabel
  var testLabel:UILabel!

  override func viewDidLoad() {
    super.viewDidLoad()        
    // インスタンス化
    self.testLabel = UILabel()

    // frame(場所)の設定
    self.testLabel.frame = CGRect(x: 100, y: 50, width: 200, height: 100)
        
    // 表示する文字列
    self.testLabel.text = "普通のUILabel"

    // ViewControllerに置く
    self.view.addSubview(self.testLabel)
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.      
  }
}

ただフォントの大きさを変更する場合

self.testLabel.font = UIFont.systemFont(ofSize: 25)
self.testLabel.font = UIFont.boldSystemFont(ofSize: 25)

UILabelのフォントの色を変更

self.testLabel.textColor = UIColor.red
self.testLabel.numberOfLines = 0
self.testLabel.sizeToFit()

numberOfLinesをゼロしてから、sizeToFit()とすると文字数に合わせて表示してくれます。

UILabelの背景色を変更

self.testLabel.backgroundColor = UIColor.yellow

UILabelの文字列を真ん中に

self.testLabel.textAlignment = NSTextAlignment.center

UILabelをタップできるようにする

class ViewController: UIViewController {

  let sampleUILabel:UILabel   = UILabel()

  override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = .white
        
    self.sampleUILabel.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
    self.sampleUILabel.text = "Hello World!"
    // uilabelをタップできるように
    sampleUILabel.isUserInteractionEnabled = true
    // uilabelに追加するためのtapgestureインスタンスを生成
    let gesture = UITapGestureRecognizer(
      target: self,
      action: #selector(self.uiLabelTapEvent(_:))
    )
    
    // 生成したインスタンスをuilabelにadd
    sampleUILabel.addGestureRecognizer(gesture)

    self.view.addSubview(self.sampleUILabel)
  }
  
  // uilabelがタップされたときに動く関数
  @objc func uiLabelTapEvent(_ sender:UITapGestureRecognizer) {
    print("tapped uilabel")
  }    
}

UILabelに下線をつけるサンプルコード

下線をつけるということは、クリックできるようにする人が多いはずってことで

ついでにタップイベントも追加します。

class ViewController: UIViewController {

  let sampleUILabel:UILabel   = UILabel()

  override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = .white

    let text = "Hello World!"
        
    // テキストをカスタマイズするために、NSMutableAttributedStringにする
    let attributeText = NSMutableAttributedString(string: text)
    // styleをunderLineに。valueをrawValueに。該当箇所を0-text.count文字目まで
    attributeText.addAttribute(
      NSAttributedString.Key.underlineStyle,
      value: NSUnderlineStyle.single.rawValue,
      range: NSMakeRange(0, text.count)
    )

    self.sampleUILabel.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
    self.sampleUILabel.attributedText = attributeText
    // uilabelをタップできるように
    sampleUILabel.isUserInteractionEnabled = true
    // uilabelに追加するためのtapgestureインスタンスを生成
    let gesture = UITapGestureRecognizer(
    target: self,
      action: #selector(self.uiLabelTapEvent(_:))
    )
    
    // 生成したインスタンスをuilabelにadd
    sampleUILabel.addGestureRecognizer(gesture)

    self.view.addSubview(self.sampleUILabel)

  }
  
  // uilabelがタップされたときに動く関数
  @objc func uiLabelTapEvent(_ sender:UITapGestureRecognizer) {
    print("tapped uilabel")
  }    
}