0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

UILabelで複数行表示させるには

Posted at

iOSアプリを開発し始めた上で、知らなかったがために苦戦したので、忘れないように備忘録を残す。

TL;DR

numberOfLines0 にする。(それだけ)

やってみる

UILabelを設置

Labelを表示させる簡単なアプリを作る。
storyboardでUILabelを配置して、詳細はコードで書く。


import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var testLabel: UILabel!


    override func viewDidLoad() {
        super.viewDidLoad()

        setupLabel()
    }
    
    func setupLabel() {
        testLabel.text = "ラベルだよ"
        testLabel.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 0.3)
    }


}

(UILabelそのものが見やすいように薄く背景色をつける)

こんな感じ。
ラベル置いただけ.png

長い文章にしてみる

Labelに表示させる文章を1行以上になるようにしてみる。
このLabelのままだと、明らかに高さが足りないので、十分な高さにしておく。

コードを少し手直し。


import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var testLabel: UILabel!
    /// 高さを調整するためにConstraintを追加
    @IBOutlet weak var testLabelHeight: NSLayoutConstraint!
    

    override func viewDidLoad() {
        super.viewDidLoad()

        setupLabel()
    }
    
    func setupLabel() {
        testLabel.text = "とっても長い文章になるよ。とっても長い文章になるよ。とっても長い文章になるよ。とっても長い文章になるよ。"
        testLabel.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 0.3)
        
        /// 複数行表示させるため
        testLabelHeight.constant = 80
    }


}

それが、こう。
ラベル伸ばす.png

えぇ...
いい感じに省略してくれてる...

行数を設定する項目があった

高さをどんなにしても、きっちり1行に収めてくれる。
泣きながら調べてみると、 行数 を設定できることがわかった。

先ほどの setupLabel() に、これを追加する。


/// 行数調整
testLabel.numberOfLines = 0

そうすると、晴れて目的通りになる。
ラベル完成.png

まとめ

デフォルトでは行数は 1 になっているので、指定した行数にしたければ、その数値を入れ込む。
何行になってもいいから、全て表示させるには 0 を入れ込めば良い。

(てっきり全部表示してくれるもんだと思い込んでいたので、とにかく不思議でした...)


ちなみに、storyboard上でもこの項目の設定はある。
storyboard項目.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?