【Swift】storyboardを使わずにコードだけでUIを作り制約をつける方法
iPhoneアプリを作る時まず最初にstoryboardで見た目を作ってそのあとに機能をコードで書いていくという人が多いと思います。
最初のうちは作っているものがリアルタイムで確認できるため、わかりやすくて便利だと思っていました。
しかし複雑な画面を作りたいと思ったときにstoryboardが煩わしく思えました。
理由は以下です。
- 特殊なファイル形式で保存されているためデバッグが難しい
- 動的なものなど複雑になってくると対処できない
- アシスタントエディタを開くとディスプレイが小さいため非常に見にくい
これらが主な理由です。
そこで今回はコードでどのように制約をつけていくのかということを見ていきたいと思います。
インスタンス化とviewへの追加
例として今回はボタンを付け加えるとしましょう。
その時のスクリプトは以下のようになります。
let button = UIButton() button.translatesAutoresizingMaskIntoConstraints = false view.addSubview(button)
一行目でインスタンス化をしているのはわかりますね。
二行目ではインスタンス化したボタンのAutoLayoutを外しています。これがないとあとで自分で制約を書いたときにエラーが出ます。
忘れやすいので気をつけましょう。
三行目ではviewに追加しています。ここで初めて表示されるようになります。
制約をつける
いきなりですが実際の例を見ていきましょう。
//横方向の位置の制約 button.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true //縦方向の位置の制約 button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20).isActive = true //幅の制約 button.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.4).isActive = true //高さの制約 button.heightAnchor.constraint(equalToConstant: 80).isActive = true
このように使っていきます。
では一行ずつ説明します。
一つ目はボタンの右アンカーつまり右端をviewの右に揃えることを意味しています。
二つ目はボタンのbottomAnchorつまり底をviewの20上に揃えることを意味しています。
constantはequalToで指定したところからずらす距離を指定します。
ここで注意するのはxcodeでは横方向の正の向きは右で、縦方向の正の向きはしたということです。
縦方向は間違えやすいので気をつけましょう。
三つ目はボタンの幅をviewの幅の0.4倍にすることを意味しています。
multiplierの値がequalToで指定してものの縮尺になります。
四つ目はボタンの高さを80にするということを意味しています。
これは特に問題ないでしょう。
isActive = trueをつけないと昨日しないことにも注意してください。
アンカーの種類は他にもあるので書いておきます。
意味はコメントとして書いておくので見てください。
leftAnchor//左端 rightAnchor//右端 topAnchor//一番上 bottomAnchor//一番下 widthAnchor//幅 heightAnchor//高さ centerXAnchor//横方向の中心 centerYAnchor//縦方向の中心
これだけ知っておけば自由にレイアウトとできると思います。
コードでのレイアウトに慣れましょう！
