Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

iPhoneアプリ作成:簡単なUIkitアプリ実装

実装結果

 

「Lucky Lunch」というボタンを押すとランダムにメニューを表示することができます。

 

この表示されるメニューに関しては自分の好きなものを表示させることもできます。

 

また、ボタンの表示を「Lucky Item」「Lucky Number」などと変更してやれば占いのアプリの作成などにつなげることもできます。

 

f:id:tk0137:20200926234658p:plain f:id:tk0137:20200926234724p:plain

 

↓過去記事にアプリ作成の前準備について書いています。

 

teaprog.com


 参考書籍

 
 

UIkitとは

 

簡単にいうとアプリに登場するボタンやスイッチなどのことです。UIとはUser Interface(ユーザーインターフェース)のことなのでUIに用いるキット(道具)であるとお分かりいただけると思います。

 

スマートフォンのアプリに限らず、ATMや座席予約サイトなどのタッチパネルも、ユーザーと端末との間のやりとりを中継するものとしてUIと呼ぶことができます。

 

手順(1〜4)

 1.「Label」の設定

 

食事のメニューを表示させるための「Label」の位置を設定します。

 

見やすくなるように文字色や背景色を変えると良いでしょう。

 

左側の「Label」の範囲をクリックすると右側に「Label」の設定項目が出てきます。

下の写真では水色の下線で示していますが、「Color」で文字色、「Alignment」で中央寄せ、「Background」で背景色を設定しています。

 

どの色でも動作に支障は出ないので、好きな色に設定してください。

 

f:id:tk0137:20200927001112j:plain

 

 2.ボタンの設定

 

次にボタンの設定です。

 

以前の記事で「Label」の設置の仕方について書かせていただきましたが、「Button」についても同じように右上の「+」をクリックして、「Button」を設置したい場所にドラッグします。

 

f:id:tk0137:20200928113624j:plain

 

 3.制約の設定

次に「Label」と「Button」の表示される位置の制約をつけていきます。

 

制約とは上下左右の画面の端までの距離、UIkit間の距離を予め設定することです。

 

これによって、端末ごとの画面の大きさの違い、画面を横向きに回転させるといった表示環境に左右されることなく、画面の端やボタンなどのUIkit間の間隔を常に一定に保てるようにできます

 

なので端末ごとにボタンやラベルの配置がずれるといったトラブルを防ぐことができます。

 

制約をつけたいラベルをクリックした状態で画面下の小さいアイコンをクリックします。

 

アイコンの位置は下の画像をご参考にしてください。

 

まず「Label」に制約をつけていきます。

 

「Label」については上、と左右方向に制約をつけます。

 

今回の実行結果の画像では下の画像のように、上に16、左右に20を設定してあります。

 

また制約をつけたい方向に赤の点線が赤の実線になるように一回クリックします。

 

 また、「height」欄にチェックを入れ、「Label」の高さが常に60になるように設定します。

 

以上の制約を設定し、「Add 4 Constraints」となった状態でクリックします。

 

これで「Label」の設定は終了です。

 

f:id:tk0137:20200927001717j:plain

 

次に「Button」についても制約をつけていきます。

 

手順は「Label」について行った方法と同様です。

 

「Button」については上方向と高さと幅の3種類について制約をつけていきます。

 

今回は下の画像のように、上方向に70の間隔をとり、高さを30、幅を110で一定に保つという設定にします。

 

「Add 3 Constraints」と表示されている状態でクリックします。

 

これで「Button」についても制約付けが終了しました。

 

f:id:tk0137:20200927001745j:plain

 

試しに画面を横向きにして、配置が崩れないかどうかを確認してみます。

 

すると下の画像のように「Label」と「Button」がきれいに画面内に収まっていることが分かります。

 

「Label」については上、左右、高さの4種類について制約をつけました。

 

上と左右については画面の端との距離が常に一定に保たれています。

 

幅については制約をつけていないので、画面横方向いっぱいに引き伸ばされた形になっています。

 

 

「Button」については、上方向と高さ、幅の3種類について制約をつけました。

 

なので高さと幅を常に一定に保ちながら、上にある「Label」との距離も一定に保っています。

 

f:id:tk0137:20200927001833j:plain

 

このように制約をうまく使うことで、画面のレイアウトを崩れる心配がなくなります。

 

ですが、制約をつけすぎるのもよくありません。

 

例えば左右方向と幅の両方に制約を付けてしまっていると、横方向に関してはどちらの制約を優先すれば良いのかが定まりません

 

よってアプリを起動する端末やタイミングによってレイアウトが一致しなくなるということが起こりえます。

 

なので制約をつけるときは制約同士がぶつかり合っていないか慎重に確認する必要もあります。

 

私もまだまだ勉強の途中ですので、一緒に頑張りましょう!

 

とりあえずこの時点で実行させてみます。

 

表示に関しては問題なく突破できました。

 

f:id:tk0137:20200927001900p:plain

 

 4.画面に結果を表示させる

 

最後に『「Button」をクリックするとメニューがランダムに表示される』という機構を作っていきます。

 

ここから先はプログラムも編集していくので、下の画像のように「ViewController.swift」というファイルも同時に表示させてください。

 

まず、「Label」にメニューを表示させるという動作をコンピュータに指示できるようにしたいので、「Label」の情報をプログラムに組み込みます必要があります。

 

方法は簡単で、左側のスマホの画面の「Label」をドラッグして右側のプログラムに持っていくだけです。

 

このとき、必ず「class ViewController: ~」の行の下にドラッグするようにします。

 

f:id:tk0137:20200928122811j:plain

 

「Label」をドラッグすると、下の画像のような入力窓が表示されます。

 

今回は「Name」の箇所をmyLabelと変更して「Connect」をクリックします。

 

f:id:tk0137:20200928122739j:plain

 

「Button」についても同様です。

 

先ほどドラッグした「Label」の行の下に挿入します。

 

「Button」については、「Connection」の項目をActionに変更してください。

 

「Name」をtapButtonに変更して「Connect」をクリックします。

 

f:id:tk0137:20200928123227j:plain

 

以上の作業が終了したら、次にコーディングしていきます。

 

以下の3行をfunc tapButtonの{}の内側に記述します。

 

let Lunch = ["ハンバーグ","カレー","オムライス","ざるそば","八宝菜"]
let random = Int(arc4random()) % Int(Lunch.count)
myLabel.text = Lunch[random]

 

下の画像は記述例。

 

f:id:tk0137:20200928123655j:plain

 

この、ハンバーグ、カレーなどのメニューの部分を自分で変えることでアプリで表されるメニューを自分の好きなものに変更することができます。

 

ここまでの作業が終了したら、完成です。

 

実際に実行させてアプリで遊んでみてください。