簡単なルーレットアプリ作ってみた

覚えておけば応用して使えるので備忘用に残します。

○完成形

手順1

テキトーにプロジェクトを作成(今回はRouletteAppと命名)

手順2

プロジェクトが開いたらまずはStoryboardで見た目を作ります。

画像のように、Label , imageView , Buttonをそれぞれ配置してください

手順3

画像ファイルを3枚プロジェクトに入れる(好きな画像で大丈夫です)

*JPEGだと画像が表示されないのでPNG画像を入れてください

手順4

パーツをそれぞれプログラムと紐づける(画像参照)

ラベル →     @IBOutlet weak var rouletteLabel: UILabel!
イメージ →  @IBOutlet weak var rouletteImage: UIImageView!
ボタン →     @IBOutlet weak var rouletteButton: UIButton!と
　　　　　  @IBAction func rouletteAction(_ sender: Any) {
                       }

手順5

以下コードを記述 *(imageNameArray内の名前はそれぞれの画像ファイル名にしておいてください)

◉コードの解説は割愛します🙏

ex: "baseball.png" なら imageNameArray = ["baseball", ~]

import UIKit
class ViewController: UIViewController {
   
   @IBOutlet weak var rouletteLabel: UILabel!
   @IBOutlet weak var rouletteImage: UIImageView!
   @IBOutlet weak var rouletteButton: UIButton!
   
   private var timer: Timer!
   private var changeImageNo = 0
   private let imageNameArray = ["smile","cry","surprised"]
   
   override func viewDidLoad() {
       super.viewDidLoad()
       setupView()
   }
   
   private func setupView() {
       rouletteButton.layer.cornerRadius = 20.0
       rouletteImage.image = UIImage(named: imageNameArray[0])
   }
   
   private func displayImage() {
       let name = imageNameArray[changeImageNo]
       let image = UIImage(named: name)
       rouletteImage.image = image
   }
   
   @objc func updateTimer(_ timer: Timer){
       changeImageNo += 1
       if changeImageNo > 2{
           changeImageNo = 0
       }
       displayImage()
   }
   
   @IBAction func rouletteAction(_ sender: Any) {
       if timer == nil{
           timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(updateTimer(_:)), userInfo: nil, repeats: true)
           rouletteButton.setTitle("ストップ", for: .normal)
           rouletteLabel.text = "再生中です"
       }else{
           timer.invalidate()
           timer = nil
           rouletteButton.setTitle("再生", for: .normal)
           rouletteLabel.text = "ルーレット停止しました"
       }
   }
   
}

ここまで出来たらビルドをして正常に動くかテストしてみてください

以上です