Xcodeで表示した文字をコーディングで変更してみる
はい、第２回目です。
前回は特にSwiftに触れずに画面に文字だけ表示しました。
今回はこの文字をアプリ上で変更できるようにしてみましょ。
まずはこないだのプロジェクトを起動。
Xcode案内画面の右側に最近開いたプロジェクトの一覧が出るので、作成したプロジェクトをダブルクリック。
案内画面なんて出てねーよという人はメニューバーのFile > Open Recentで最近開いたプロジェクトが出ます。
さて、今回もMain.storyboardを使用していきます。
前回表示したLabelはひとまずそのままにしておき、新たにText Fieldを配置します。
前回Labelをドロップ&ダウンした要領で、Text Fieldを配置。
初期状態では結構スペースが小さいので、Main.storyboardに置いたText Fieldをクリックし、
両脇に出てくる□をドラッグしてサイズ変更しときましょう。
Text Fieldも配置したし、やりたいことはここに入力した文字を
Labelに反映させること。
まずはコード上でこのLabelやText Fieldを変数として扱えるようにします。
そのためにはまず、Main.storyboardとソースコードが両方同時に見えるようなXcodeのレイアウトにしなきゃなりません。
- Xcode画面右上の◯が2つ重なって並んでいるアイコンをクリックこれで同時に見えるようになります。もう一度同じアイコンをクリックすると配置の仕方を変えることができます。
- Main.storyboardのLabelをコントロールキーを押しながらソースコード上にドロップ&ダウンなんじゃ、この操作はと思いますがそういうものと思っておきましょう。
- 表示されたダイアログのNameに変数名を入力。
- Connectボタンをクリック。
- こうするとマウスのボタンを離した行に変数定義の文が入力されます。変なとこに入れちゃったと思ったらclassスコープ内の一番上に移動しておきましょう。
- 同様の操作でテキストフィールドもやっておく。この際、当然ではあるけどLabelで使用した変数名とは別のものにしておくこと。
これでViewControllerクラス上でLabelとText Fieldを扱えるようになりました。
では次にText Fieldに入力した文字をLabelに反映させるコードを入れます。
・・・の前にもう一手間。
何をしたら、というトリガーを作る必要があります。
作り方は先ほどのやり方と最初だけ同じです。
- Text Fieldをコントロールキーを押しながらソースコード上にドロップ&ダウン。
- ダイアログ内のConnectionの中からActionを選択
- ダイアログ内のNameには関数名を入力
- ダイアログ内のEventの中からEditing Changedを選択
- Connectをボタンをクリック
これでText Field編集中にその内容が変更されたら、というトリガー関数ができました。
そのトリガー関数内に
Labelで入力した変数名.text = Text Fieldで入力した変数名.text;
の一文を入れましょう。
これでText Field内で文字を入力するとLabelに即座に反映されるアプリができました。
全然プログラムらしいことやってねーじゃねーか。
本当は裏でコンソール用プログラムで基本をちまちまやってるのですが、
こっちの方がやってて面白いし記事にしやすい気もします。
何かこういうことしてるとUnityで何か作ってたのを思い出します。
