【Swift5/Xcode】入門編！クイズアプリを作成してみよう！参考書より丁寧に解説します。【Part6】

以下のボタンを押してダウンロードしてください。

◯と×の画像データが入っています。

画像ダウンロード

Finderのダウンロードを開いて、先程ダウンロードしたimage.zipをダブルクリックで解凍しましょう。

以下のように、◯と×の画像が入っていることを確認しましょう。

プロジェクトにインポートしましょう。

画像のように、imageフォルダをプロジェクト(SampleQuizフォルダの中)にドラッグ&ドロップしてください。

以下の画像のように設定してください。

①Copy items if neededにチェック

②Create groupsにチェック

③SampleQuizにチェック

④「Finish」をクリック

問題画面にImageViewを配置しましょう。

①右上のプラスボタンをクリック

②ImageViewを問題画面にドラッグ&ドロップ

①ImageViewを選択

②  (Show the Size inspector)を選択

③X、Y、Width、Heightを以下のようにする。

①問題画面のバーをクリック

②command + option + control + enterで2分割表示

controlを押しながら、ドラッグ&ドロップ

ボタンを押した時に呼ばれるブロック内で、正解だったら紐付けたjudgeImageViewに◯の画像を代入し、不正解だったら×の画像を代入するコードを追記しましょう。

@IBAction func btnAction(sender: UIButton) {
    if sender.tag == Int(quizArray[1]) {
        correctCount += 1
        print("正解")
        judgeImageView.image = UIImage(named: "correct")
    } else {
        print("不正解")
        judgeImageView.image = UIImage(named: "incorrect")
    }
    print("スコア：\(correctCount)")
    nextQuiz()
}

これで◯×の表示ができました。

しかし、◯×がずっと表示されたままです。0.5秒経ったら非表示にする処理を追記しましょう。

〇〇秒後に処理をしたい場合は、以下のように書きます。

この場合だと、judgeImageView（◯×）のisHidden（隠すかどうか）をtrue（隠す）にしている処理を0.5秒後におこないます。

DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
    self.judgeImageView.isHidden = true
}

2問目以降表示されないのは、judgeImageView.isHidden = trueにしたせいです。要は◯×の画像を隠している状態だからです。

なので、ボタンを押したら、◯×の画像を再表示する処理を追記してあげましょう。

@IBAction func btnAction(sender: UIButton) {
    if sender.tag == Int(quizArray[1]) {
        correctCount += 1
        print("正解")
        judgeImageView.image = UIImage(named: "correct")
    } else {
        print("不正解")
        judgeImageView.image = UIImage(named: "incorrect")
    }
    print("スコア：\(correctCount)")
    judgeImageView.isHidden = false
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        self.judgeImageView.isHidden = true
    }
    nextQuiz()
}

これで、◯×を0.5秒後に非表示する処理ができました。

この対応は簡単です。

次の問題をセットするブロックnextQuiz()を0.5秒後に表示させるブロックに移動させるだけです。

で、0.5秒後に表示させるブロック内ではself.を付けないといけないので、以下のようにselfをつけて記述してください。

@IBAction func btnAction(sender: UIButton) {
    if sender.tag == Int(quizArray[1]) {
        correctCount += 1
        print("正解")
        judgeImageView.image = UIImage(named: "correct")
    } else {
        print("不正解")
        judgeImageView.image = UIImage(named: "incorrect")
    }
    print("スコア：\(correctCount)")
    judgeImageView.isHidden = false
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        self.judgeImageView.isHidden = true
        self.nextQuiz()
    }
}

実行して確認してみましょう。

おそらく、◯×が非表示になった瞬間に次の問題がセットされるようになっているはずです。

ボタンを押したら、ボタンを押せなくしましょう。

押せなくするには、answerButton1のisEnabled(有効かどうか)をfalse(無効)にします。

@IBAction func btnAction(sender: UIButton) {
    if sender.tag == Int(quizArray[1]) {
        correctCount += 1
        print("正解")
        judgeImageView.image = UIImage(named: "correct")
    } else {
        print("不正解")
        judgeImageView.image = UIImage(named: "incorrect")
    }
    print("スコア：\(correctCount)")
    judgeImageView.isHidden = false
    answerButton1.isEnabled = false
    answerButton2.isEnabled = false
    answerButton3.isEnabled = false
    answerButton4.isEnabled = false
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        self.judgeImageView.isHidden = true
        self.nextQuiz()
    }
}

このままでは、2問目の問題が解けないので、◯×が非表示になったらまたボタンが機能するようにしましょう。

やり方は簡単で、0.5秒経ったら有効にすればいいだけです。

0.5秒経ったら実行されるブロックに以下のように記述してください。

@IBAction func btnAction(sender: UIButton) {
    if sender.tag == Int(quizArray[1]) {
        correctCount += 1
        print("正解")
        judgeImageView.image = UIImage(named: "correct")
    } else {
        print("不正解")
        judgeImageView.image = UIImage(named: "incorrect")
    }
    print("スコア：\(correctCount)")
    judgeImageView.isHidden = false
    answerButton1.isEnabled = false
    answerButton2.isEnabled = false
    answerButton3.isEnabled = false
    answerButton4.isEnabled = false
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        self.judgeImageView.isHidden = true
        self.answerButton1.isEnabled = true
        self.answerButton2.isEnabled = true
        self.answerButton3.isEnabled = true
        self.answerButton4.isEnabled = true
        self.nextQuiz()
    }
}

これで2回目以降も問題が解けるようになります。

これでpart6の◯×を表示する処理は完成です！