[Swift]ボタン押す度に画像を切り替える。

今回はボタンを押したら画像が切り替わると言うアプリを作ってみたいと思います！
完成イメージはこんな感じです！

imageViewとbuttonを配置する。

とりあえずimageViewとbuttonを配置します。
右上の＋ボタンからimageViewを選択してstoryboardにドラッグ&ドロップします。
検索ボックスにimageとか入力すると候補が出てきます。
同じようにbuttonも配置して下さい。

画像を UPロードする。

次に画像をXcodeにアップロードします。
今回はグー・チョキ・パーの３枚の画像をアップロードしました。
お好きな画像をアップロードして下さい。
左側のAssets.xcassetsを開いて画像をドラッグ&ドロップします。
名前はそれぞれ「gu_s」「pa_s」「tyoki_s」としましたが任意のファイル名を指定して下さい。

imageViewに画像を設定する。

imageViewを選択して右上のホームベースみたいなアイコンをクリックします。
imageの所に画像のファイル名を入力します。
ある程度打つと候補が出てくると思うので選択したらstoryboard上のimageViewに画像が適用されます。

buttonとimageViewを紐づける。

ではbuttonとimageViewをViewController.swiftで制御できるように紐付けをします。
optionを押しながら左側のViewController.swiftを選択すると画面がstoryboardとViewController.swiftの二つに分割されると思います。

imageView選択してcontrol押しながらViewController.swiftへドラッグ&ドロップすると小さいWindowが出るので下記の画像の通り設定します。
Nameの部分は任意の名前を入れて下さい。

buttonでも同じように設定して下さい。
今回はボタンを押した時にイベントが発生するように設定する為、Connectionの部分はActionにして下さい。

アップロードした画像の名前を配列にする。

次にアップロードした３枚の画像のファイル名を配列に格納します。

下記のコードは配列imageNameに「gu_s」「pa_s」「tyoki_s」と言う文字列を格納しました。
この文字列がそれぞれ画像ファイルの名前になっています。
画像の名前をがわからない場合は左側のAssets.xcassetsを開いて確認して下さい。

配列は0から順番にインデックス番号が付けられます。
今回の場合「gu_s」は0「pa_s」は1「tyoki_s」は2がそれぞれのインデックス番号になります。

次に変数、changeImgNoを宣言します。
この変数に0〜2の数字を入れてどの画像を表示させるか決めます。

let imageName = ["gu_s", "pa_s", "tyoki_s"]
var changeImgNo = 0

if文で表示させる画像を分岐させる。

次にボタンが押された時の処理を書きます。
ボタンが押された時の処理はこの{}の中に書いていきます。

   @IBAction func btn(_ sender: Any) {


           }

コードは下記のように書きます。

 @IBAction func btn(_ sender: Any) {
        if changeImgNo == 0 {
            changeImgNo = 1
        } else if changeImgNo == 1 {
            changeImgNo = 2
        } else if changeImgNo == 2 {
            changeImgNo = 0
        }
        let name = imageName[changeImgNo]
        jankenImage.image = UIImage(named: name)
    }

まずif文でchageImgNoが0の時はchageImgNoに1を代入、1の時は2、2の時は0と代入されるように書いています。
ボタンを押すとif文が実行され、chageImgNoの初期値は0なので2行目のchageImgNo == 0が実行され、{}の中に書いてあるchageImgNo = 1が実行されます。
次にボタンを押すとchageImgNo に1が代入されているので、chageImgNo = 2が実行されます。

9行目で配列imageNameのインデックス番号をchangeImgNoで指定しています。

配列は配列名[インデックス番号]で呼び出す事ができます。
例えば今回の場合だとimageName[0]としたら「gu_s」と言う文字列を呼び出す事ができます。
imageName[]の[]の中をchangeImgNoとする事でchangeImgNoの数字が変われば呼び出される文字列も変化すると言う仕組みです。

その取り出した文字列を定数nameに代入しています。
もしchangeImgNoが2だった場合、定数nameに代入される文字列は「tyoki_s」です。

10行目のjankenImage.imageで最初に設置したimageViewを操作しています。
今回は名前がjankenImageなのでjankenImage.imageと書きます。
もしimageViewを複数設置する場合はjankenImageの部分を変更する事で他のimageViewも操作する事ができます。

jankenImage.imageにUIImage(named: name)を代入しています。
UIImage(named: name)のnameの部分に9行目で書いた定数nameを入れる事でimageViewのファイル名を指定しています。
UIImage(named: name)ですが、深く考えず今の所こう言う決まり文句だと思っています。
今回は定数名を指定していますが、普通にUIImage(named: “gu_s”)と書けばぐーが表示されます。

意図した通りになりました。
ここまで読んでくれた方、わかりにくい説明ですみません。
それでも少しでも役に立ってると嬉しく思います。