swift3を基礎であるUILabelの使い方をメモして行きます
Contents
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を生成しました!