進歩状況バーを作ってみよう

Blog

 

今回は、UIProgressViewを使って、進歩状況バーを作っていきます。

 

イメージはボタンを押すと10%づつ完了していくようなアプリです。

 

完成イメージ

 

 

 

 

開発環境

  • Swift4
  • Xcode9
  • UIProgressView

 

 

ではやっていきましょう。

 

 

UIの設定

 

  1. labelを追加。
  2. progressViewを追加し「Progress」を0に設定。
  3. Buttonを二つ追加。それぞれ「完了!」と「Reset」に変更。

 

 

 

 

コネクト

 

  1. LabelをOutlet接続。「label」
  2. ProgressViewをOutlet接続。「progressView」
  3. 完了ボタンをAction接続。「doneBtn」
  4. ResetボタンをAction接続。「resetBtn」

 

 

 

 

 

コーディング

 

  1. 変数progressに0を代入。
  2. 完了ボタンにコードを記入。
  3. Resetボタンにコードを記入。

 

 

 

 

import UIKit

class ViewController: UIViewController {
    
    var progress:Float = 0
    
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var progressView: UIProgressView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    @IBAction func doneBtn(_ sender: Any) {
        
        progressView.setProgress(progressView.progress + 0.1 , animated: true)
        label.text = "\(Int(progressView.progress * 100 ))%完了"
        
    }
    
    @IBAction func resetBtn(_ sender: Any) {
        
        progressView.setProgress(progress, animated: false)
        label.text = "0%完了"
        
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

 

 

 

実行結果

 

 

 

 

 

いかがでしたか。

以上で「進歩状況バーを作ってみよう」の説明を終わります。

 

🤗

 

 

コメント