bgm付きタイマーアプリ作成#2:iPhoneアプリ

iPhoneアプリ
JESHOOTS-com / Pixabay
スポンサーリンク

プログラムを書いてタイマー機能を追加

前回まで

前回はアプリの見た目の部分、パーツを配置したりレイアウトまでを作成しました。

https://saharablog.com/iphone-app/timer-app/

今の段階ではアプリをシミュレータで実行しても表示されるだけで、ボタンをタップしても何も起こりません。これはButtonやLabelといったパーツがアプリのコードと紐付いていないからです。

 

今回することは、

パーツとコードとの紐付け、

次にプログラムを書きタイマーとしての機能を追加して行きます。

 

コードとパーツの紐付け

それでは前回の続き、Main.storyboardを選択した状態からコードとパーツの紐付けをするために下のようにコードの画面を追加で表示させます。

上の状態にする方法を詳しく説明すると①で右側のユーティリティエリアを非表示にし、②でエディタエリアの左側UIパーツ一覧を非表示にします。

そして③でアシスタントエディタを開きますこれでコードの画面を開くことができます。アシスタントエディタでは初期設定でコードの画面が表示されますが任意の画面を開くこともできます。

ここでコードの画面と読んでいるのは④のViewController.swiftでこれがアプリの機能などをプログラムで書く場所です。

 

それではコードとパーツを紐付けて行きます。

紐付けは非常に簡単で“Ctrl”を押しながらドラッグ&ドロップするだけです。

この時

の下にCtrlを押しながらドラッグ&ドロップしてください。

そうすると以下のように出てくるのでNameのみ記述します。Nameとはパーツの名前で自分で好きなように決められます。わかりやすいような名前で入力しましょう。

Connectを押すとこのように自動でコードが記述されます。

同様にして、、順に

と追加していくきます。

Buttonパーツはこの他に押した時にプログラムを呼び出すためにもう一度紐付けする必要があります。今度は

の下に順にCtrlを押しながらドラッグ&ドロップしましょう。

今回はConnectionをActionとしているので先ほどとは内容が少し異なりますがこちらもNameの入力だけでConnectします。

ちなみにドラッグ&ドロップではなく自分でこれらのコードを入力するとうまく紐づけることが出来ません。

このようになったらまずはパーツとコードとの紐付けができました。

コメント