FirebaseにBMIデータを登録するIOSアプリを作る(part2)
やること
前回の続きです。
今回は画面周りを秒速で完成させましょう！
環境
Xcode: ver12.0.1
Swift5
目次
Part1. 全体図を把握するのとプロジェクト作成まで
Part2. 画面周りを作成する
Part3. Firebase連携準備
Part.4 コードと画面を接続させる
Part.5 Firebaseへデータを登録する
Part.5-1 ボタンとラベルをコードと紐付ける 追記
Part.5-2 データ登録処理① 追記
Part.5-3 データ登録処理② 追記
Part.6 Firebaseからデータを取得する 追記
Part.6-1 ボタンとラベルをコードと紐付ける(Get編) 追記
Part.6-2 データ取得処理① 追記
Part.7 完成・動作確認 追記
画面周りを作成する
「Main.storyboard」を表示させましょう。
前回少しやりましたが、
オブジェクトライブラリは「cmd + shift + L」で表示できます。
ラベルを使いたい時は「cmd + shift + L」の後「label」と入力すると出てきます。
出てきたらD&D(ドラッグアンドドロップ)で配置します。
あ、ちなみにボタンから「オブジェクトライブラリ」も出せます。
「+」から表示できます。
ロゴのデザインはどこか適当に拾ってきたものですがどのサイトだったか忘れてしまいました(汗)
このデザインについてはWebで「文字デザイン 変換」などで調べれば出てきますのでググってください。
文字フォントは右サイドの「Font」で変更可能です。
コードで編集もできますが、今回はこちらから編集していきたいと思います。
ボタンは「button」で表示されます。
ここで、背景色も変えていきましょう。画面をタップすると右側にサイドバーが出てくると思いますが、そちらの「BackGround」で背景色は変更可能です。
前回私が作成した時はオレンジ色でしたが、今回は緑色にしてみました。
アプリ起動後の画面のそれぞれのサイズはこんな感じです。
ロゴの「BMIChecker」のフォントサイズ：66
ボタン「BMIを見る」・「BMIを登録する」のフォントサイズ：23
ボタンのテキストカラー：white
次にBMI登録画面を作成します。
新しく画面を作成したい時は、オブジェクトライブラリで「 ViewController」と入力しましょう。
実際、「viewc」くらい入力するとでます。
これを２つ追加します。
「Firebaseから参照する画面」と「Firebaseへ登録する画面」を作成するためです。
「Firebaseへ登録する画面」についてはこんな感じ。
はい。この白いやつは「テキストフィールド」と言われていて文字入力をする時に使用します。「textfeild」と入力すると出てきます。
続いて、「Firebaseから参照する画面」について。
こちらも登録画面とほとんど変わりませんので、コピペしましょう。
「shiftキー」を押下しながらクリックしていくと複数選択できます。
コピペ後の画面がこちら。以下は完成品からコピペしたので既に「Firebaseから参照する画面」の状態です。
全体図はこんな感じになりました。
忘れてましたが、「BMIChecker」とその下のメッセージの色も白色に変えておきましょう。
以上、画面周り完成です。
