海外の情報込み!GTA6サキドリ!

iOSアプリ開発日記【その3】

iOSアプリ開発日記【その3】

前回の記事


今回新しく作成した画面はこちらです。

この画面を作る上で学んだことは、

  1. Picker View
  2. Image View & 関数
  3. Button & 関数

の3つです(おおまかにわけると)。

それでは一つづつ見ていきます。

iOSアプリ開発【Picker View】

Picker Viewとは生年月日や時間を選ぶときの上下にスクロールするやつです。笑

今回のアプリの画面ではK-POPグループTWICEのメンバーの画像を選ぶために、名前を選択する目的で利用しています。

このようにPicker ViewをつかってTWICEのメンバーの名前を選択すると、そのしたの画像がメンバーの画像に切り替わるという仕組みです。

まず、Picker Viewの選択肢をArrayで作ります。

それからそのArrayの下にPicker View関連の関数をコピペします。

これでPicker Viewがひとまず動くようになります。

つぎに、Picker Viewで選ばれたメンバーの画像をXcodeにアップロードし、わかりやすく名前をつけます。

先ほどのArrayとは別に画像のArray(画像の名前のArray)をつくり、UIImageの型の中にぶちこみます。(このArrayの画像の順番と先ほど作ったArrayの名前の順番を同じにしていないと選んだ名前の画像が表示されませんので注意です。)

それをUIImageView.imageに代入します。

ためしに画像のArrayのインデックスを3にしてみるとメンバーの画像が表示されます。

ただこのArrayのインデックスをrowに設定しないとPicker Viewで選択された名前と同期されないので、ちゃんとインデックスはrowにしておきます。

ちなみにUIImageView(ピンク色のTWICEのロゴ)はIBOutlet接続をしていないと、ViewController(.)swiftファイルないで扱うことができないので忘れないようにしてください。

これでPicker View(と関数)は以上です。

iOSアプリ開発【Image View&関数】

一つ前の項目で使ったImage View(TWICEのロゴの画像を表示する入れもの)をボタンを使って関数を呼び出し操作しようと思います。

これはボタンを押すとさっきの画像がランダムに切り替わるというものです。

まず、いつも通りボタン(この場合Tap?!の部分)をViewController(.)swiftにIBOutlet接続します。

そこでConnectionをActionに変更します。

これでボタンを押したときの関数を書くことができます。

Outlet接続をしたときに表示された関数の中身を書いていきます。

といっても数行でいいんですけどね。

このようなコードを書きます。

ちなみにTwiceMemberRndはUIImageViewの変数名、twiceArrayはTwiceメンバーの画像のArrayです。

これでランダムに画像が表示される関数ができました。

iOSアプリ開発【ボタン&関数】

最後に簡単に、ボタンと関数でテキストフィールドを操作する関数を作ります。

まず新しくボタン(clearの部分)を画面内に追加して、Outlet接続をします。

この場合もActionに設定してください。

そして、テキストフィールドも画面内に追加してOutlet接続をします。

今追加したボタンの関数のなかにコードを書きます。

myTXは今追加したテキストフィールドの変数名です。

このテキストフィールドのテキストを空のStringに変更します。(つまりテキストフィールドをきれいにします。)

そして、一つ前の項目で作ったボタン(Tap?!の部分)の関数部分に以下のように付け加えます。

これでTap?!のボタンをタップするとテキストフィールドの中にButton is tapped!!と表示され、clearボタンを押すとそのテキストフィールドが空になります。(ついでにTap?!ボタンを押すと画像がランダムで切り替わります笑)

 

それでは今回は以上です。

アプリ開発カテゴリの最新記事