swift3を基礎であるUILabelの使い方をメモして行きます
Udemyのオススメの講座
Contents
UILabelの使い方
storyBoard上で配置してちょいちょい！は簡単ですが、
コード上でちょいちょいするのは難しいですよね・・・
これを
これにします！
コードでUILabelの生成
makeLabelというUILabelを生成する関数を定義しました。
それをviewDidLoadの中で処理させています。
UILabelの生成を一箇所にまとめているところがおしゃれな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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のサイズと座標を指定することができます。
|
1 |
UILabel(frame: CGRect(x: 101, y: 20, width: 100, height: 20)) |
この行ですね。
.text
これによってUILabelの文字を指定することができます。
.backgroundColor
これによって背景色を指定することができます。
文字の色は変化しません。
.font
これによってフォントサイズを指定することがあります。
記述方法がやや複雑なので、よく忘れます。
|
1 |
UIFont.systemFont(ofSize: 17) |
.textColor
これによって文字の色を変えることができます。
『fontColor』と書いてしまってよく間違えます。
.sizeToFit()
生成したUILabelの大きさをはみ出る文字数の場合、
『こんばんは！今日の夕食を・・・』
のように『・・・』となってしまいます。
それを防ぐためのメソッドがこのsizeToFit()です。
文字数に合わせてUILabelのサイズを変化させます。
.addSubView()
ここが非常に重要です。
ここまでにインスタンスを生成し、
カスタマイズしてきました。
しかし、実はまだViewにいないのです。
例えるなら、
工場で商品を作り、包装したり、シール貼ったりすることは完了している状態ですね。
まだ出荷されていないんです。
このaddSubViewによってようやく出荷することができます。
最終的なコードはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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を生成しました！
ささお
let copyLabel = UILabel(frame: CGRect(x: 101, y: 20, width: 100, height: 20))
コードでlableを作るとCGRectで座標等を指定しないといけないと思うんですけどそうするとtableviewのcellにlableを挿入したい場合、どのようにすればいいのでしょうか？
コメントありがとうございます！
tableViewのcellにlabelを挿入する方法ですが、
UITableViewCellを継承したオリジナルのCell（いわゆるカスタムセル）を作成する必要があります。
コードではなく、XIBですが、過去にカスタムセルの作成方法を記事にしましたので、
参考にしていただけると嬉しいです！
Swift：UITableViewCellをXIBファイルでカスタムセルにする