Swift：UILabelの超基礎的な使い方

swift3を基礎であるUILabelの使い方をメモして行きます

 

UILabelの使い方

storyBoard上で配置してちょいちょい！は簡単ですが、

コード上でちょいちょいするのは難しいですよね・・・

これを

これにします！

コードでUILabelの生成

 

makeLabelというUILabelを生成する関数を定義しました。

それをviewDidLoadの中で処理させています。

UILabelの生成を一箇所にまとめているところがおしゃれな感じです。

 

func makeLabel() {// 一番上のlabelを作る
        let copyLabel = UILabel(frame: CGRect(x: 101, y: 20, width: 100, height: 20))
        // labelの大きさ、座標を指定してる
        
        copyLabel.text = "これ同じのを作ろう！"
        // 文字を変更
        
        copyLabel.backgroundColor = UIColor.blue
        //　背景色を指定
        
        copyLabel.font = UIFont.systemFont(ofSize: 17)
        // フォントの大きさを指定
        
        copyLabel.textColor = UIColor.white
        // 文字の色を指定
        
        copyLabel.sizeToFit()
        // 文字数に合わせてlabelの大きさを変更（サイズが文字にフィットする）
        
        self.view.addSubview(copyLabel)
        // 実際にviewに目に見える形でlabelが出現する
    }

makeLabelの解説

UILabel()

これによってUILabelのインスタンスを生成しています。

インスタンスを生成する際にUILabelのサイズと座標を指定することができます。

UILabel(frame: CGRect(x: 101, y: 20, width: 100, height: 20))

この行ですね。

.text

これによってUILabelの文字を指定することができます。

 

.backgroundColor

これによって背景色を指定することができます。

文字の色は変化しません。

 

.font

これによってフォントサイズを指定することがあります。

記述方法がやや複雑なので、よく忘れます。

UIFont.systemFont(ofSize: 17)

 

 

.textColor

これによって文字の色を変えることができます。

『fontColor』と書いてしまってよく間違えます。

 

.sizeToFit()

生成したUILabelの大きさをはみ出る文字数の場合、

『こんばんは！今日の夕食を・・・』

のように『・・・』となってしまいます。

それを防ぐためのメソッドがこのsizeToFit()です。

文字数に合わせてUILabelのサイズを変化させます。

 

.addSubView()

ここが非常に重要です。

ここまでにインスタンスを生成し、

カスタマイズしてきました。

しかし、実はまだViewにいないのです。

例えるなら、

工場で商品を作り、包装したり、シール貼ったりすることは完了している状態ですね。

まだ出荷されていないんです。

このaddSubViewによってようやく出荷することができます。

 

 

最終的なコードはこちらです。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ここから下が、一番下のlabelをカスタムしている。
        label.text = "これ同じのを作ろう！"
        
        label.backgroundColor = UIColor.blue
        
        label.font = UIFont.systemFont(ofSize: 17)
        
        label.textColor = UIColor.white
        
        label.textAlignment = NSTextAlignment.center
        // 文字を真ん中に揃える
        
        label.sizeToFit()
        
        makeLabel()
    }
    
    func makeLabel() {// 一番上のlabelを作る
        let copyLabel = UILabel(frame: CGRect(x: 101, y: 20, width: 100, height: 20))
        // labelの大きさ、座標を指定してる
        
        copyLabel.text = "これ同じのを作ろう！"
        // 文字を変更
        
        copyLabel.backgroundColor = UIColor.blue
        //　背景色を指定
        
        copyLabel.font = UIFont.systemFont(ofSize: 17)
        // フォントの大きさを指定
        
        copyLabel.textColor = UIColor.white
        // 文字の色を指定
        
        copyLabel.sizeToFit()
        // 文字数に合わせてlabelの大きさを変更（サイズが文字にフィットする）
        
        self.view.addSubview(copyLabel)
        // 実際にviewに目に見える形でlabelが出現する
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


}

こんな感じになりました！
真ん中を元に、下のlabelを変化させ、上にlabelを生成しました！