マジPEACE。

A「ほんと日本は平和だよね〜。」→B「マジPEACE。」から誕生。

【Swift】進捗によって画像と達成率が変わる機能(UIProgressView、UIImageView)

完成イメージはこんな感じです。

私はSwiftの参考書を買ってから大体2週間くらいのレベルなのでその程度と考えてください。

f:id:sakusaku57:20171122201459p:plain

 

youtu.be

個人的なイメージとして、ポケモンGOのメダルをモデルにしたものをつくってみようと考えました。

 

作り方がネットにあるかなと思って探したんですけど、なかなかSwiftってないですよね・・・

 

なので、「画像の変更」と「プログレスバーの進捗度表示」を検索して参考にさせていただきました。

 

Swift実装の考え方

  • ボタンをタップしたら進捗度が増え、それに合わせてパーセンテージも増える
  • 進捗度によって、表示されているメダルの色を胴・銀・金に変える

 

実装手順

  1. 変更するメダル画像 3つをフォルダに入れる
  2. ストーリーボードにButoon、Label、Image Viewを配置
  3. ViewControllerに結びつけてコードを実装

 

1.変更するメダル画像 3つをフォルダに入れる

f:id:sakusaku57:20171122203506p:plain

ドラッグ&ドロップで入れることができます。同じ形で色が違うだけの画像を胴・銀・金で用意しました。

 

2.ストーリーボードにButoon、Label、Image Viewを配置

f:id:sakusaku57:20171122203650p:plain

Buttonは「Attributes inspecter」のTypeを「Add Contact」に変更して、プラスにしてみました。

 

他は全くいじっていなく、配置をしています。

 

3.ViewControllerに結びつけてコードを実装

import UIKit

class ViewController: UIViewController {
    
    //画像を入れる
    var blondsM = UIImage(named: "blondsMedal")
    var silverM = UIImage(named: "silverMedal")
    var goldM = UIImage(named: "goldMedal")
    
    //ラベルの紐付け
    @IBOutlet weak var progress: UILabel!
    //プログレスバーの紐付け
    @IBOutlet weak var progressView: UIProgressView!
    
    //ボタンがタップされた時の処理
    @IBAction func progressUpButton(_ sender: UIButton) {
        //現在の進捗に10%追加
        progressView.setProgress(progressView.progress + 0.1, animated: true)
        
        progress.text = "\(Int(progressView.progress * 100))%"
        //進捗によって画像を変更
            if progressView.progress < 0.4 {
                self.medalView.image = blondsM
            }else if progressView.progress < 0.8 {
                self.medalView.image = silverM
            }else{
                self.medalView.image = goldM
    }
}
    
    @IBOutlet weak var medalView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        //起動された時点でのプログレスバーの初期値と画像を設定
        progressView.progress = 0.0
        if progressView.progress == 0.0{
            self.medalView.image = blondsM
        }
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

 

このままだと、データの保存ができていないので、それは今後実装していこうと思います。

画像の変化についてはボタンがタップされた時の条件分岐として書いたので、実際やりたかったこととはちょっとずれていますね・・・

 

でもこれで、最初にアップした動画の通りに動くようになります。

 

まとめ

swiftを使って、作って見たのが初めてだったので、簡単な機能ですが、できた時はめちゃめちゃ嬉しかったです。

 

if文やパーツなど基本的なことが復習できるので、私と同じく初心者の人は、参考にしてみてください。

 

やっぱつくらないと全然覚えられないですね・・・