iPhoneアプリをSwiftで開発している人は必ずStoryboardを使ったことがあると思います。
Storyboardを使わずにUIを構築する方法を知っておくと、色んな場面(ユーザーの操作に合わせてUIを追加したい時など)で役に立つので、本記事ではStoryboardを使わずにカウントアプリを実装して、Storyboardを使った開発との違いを示したいと思います。
対象読者
- iPhoneアプリ開発初心者〜ちょっと慣れてきた人
- Storyboardを使ったアプリ開発に慣れてきて、コードだけでUIを構築してみたい人
- Storyboardなんてboredだぜ！って人 (は？)
バージョン
Swift 5.3
Xcode 12.2
iOS 14.2
実装
一旦実装です
import UIKit
class ViewController: UIViewController {
let countLabel: UILabel = UILabel()
let plusButton: UIButton = UIButton()
var count: Int = 0
override func viewDidLoad() {
super.viewDidLoad()
// ラベルの位置を指定
countLabel.frame.size = CGSize(width: 100, height: 50)
countLabel.center = CGPoint(x: view.frame.width / 2 , y: 250)
// ラベルの文字を中央揃えに
countLabel.textAlignment = .center
// フォントを設定
countLabel.font = UIFont(name: "HiraginoSans-W6", size: 32)
// ラベルに文字を設定
countLabel.text = String(count)
// viewにラベルを追加
view.addSubview(countLabel)
plusButton.frame = CGRect(x: view.frame.width / 2, y: 300, width: 150, height: 50)
plusButton.center = view.center
plusButton.titleLabel?.textAlignment = .center
plusButton.titleLabel?.font = UIFont(name: "HiraginoSans-W6", size: 32)
// 背景色を設定
plusButton.backgroundColor = UIColor.systemOrange
// ボタンを角丸に
plusButton.layer.cornerRadius = 10
// ボタンの文字を設定
plusButton.setTitle("+1", for: .normal)
// 文字の色を設定
plusButton.setTitleColor(UIColor.white, for: .normal)
// ボタンが押された時に発火するイベントを設定
plusButton.addTarget(nil, action: #selector(plus), for: .touchUpInside)
view.addSubview(plusButton)
}
@objc func plus() {
count += 1
countLabel.text = String(count)
}
}
解説
Storyboardを使った実装との違いを軸に解説していきたいと思います。
UIの配置
Storyboardを使ったUIはドラッグ＆ドロップで配置できましたが、コードで実装する場合、主にframeというものを設定する必要があります。
frameとはCGRect型のUIViewクラスのプロパティで、親要素からみたUIView自身の位置を指定するときに使います。
例えば、今回はカウントアプリのボタンはframeプロパティを使って、x,y,width,heightを指定しています。
plusButton.frame = CGRect(x: view.frame.width / 2, y: 300, width: 150, height: 50)
また、frameでは大きさだけを指定して、UIViewが持つcenterというプロパティからUIの位置を指定することも可能です。
centerはUIViewの中心をどの位置に配置するかを指定するプロパティです。今回の例ではラベルをframeとcenterを用いて指定しています。
親要素の中心に配置したいときに便利です。
countLabel.frame.size = CGSize(width: 100, height: 50)
countLabel.center = CGPoint(x: view.frame.width / 2 , y: 250)
そして、最後にaddSubView(_ view:)でUIを配置します。これはviewのsubviewを追加したい時の関数です。
今回でいうとviewはUIViewControllerが持っているviewというプロパティ、subviewはUIButtonやUILabelに当たります。
view.addSubview(countLabel)
view.addSubview(plusButton)
イベントの登録
Storyboardを使う方法ではドラッグ＆ドロップで関数とボタンを関連付けとボタンがどのように操作(Touch up Insideなど)されたら関数が起動するかを設定していました。
コードで実装する場合はaddTarget(_:action:for)を使って関数とボタンの関連付けをします。
plusButton.addTarget(nil, action: #selector(plus), for: .touchUpInside)
終わりに
意外とやってみると簡単だと感じた方が多いんではないかと思います。
Web系の言語から入った自分としてはこっちのほうが性に合ってる気がします🤔