iOSの進捗バー（進捗表示）

2年 ago

蓮, 翼

2 minutes

このチュートリアルでは、UIProgressViewコンポーネントについて説明し、iOSアプリケーションに進行状況バーを作成します。

iOSの進捗バー – UIProgressView

ProgressViewは、ユーザーにとって長時間かかる処理（ダウンロードやアップロード、Webサービスからの応答待ちなど）の進行状況を表示するために使用されます。このUI要素は非常に重要であり、存在しないとアプリケーションが応答していないという印象をユーザーに与える可能性があります。XCodeのシングルビューiOSアプリケーションを起動しましょう。次に、Main.storyboardにUIProgressViewを追加します。ProgressViewは0.0から1.0までの値を持ち、青色で示されます。この範囲外の値は、1.0よりも大きい場合は1.0に、0.0よりも小さい場合は0.0に切り捨てられます。

iOSプログレスビューのプロパティ

ProgressViewには以下のプロパティがあります。

progressTintColor – Used to change the UIColor of the progress part i.e. the filled part in the ProgressView.
trackTintColor – Used to change the UIColor of the track i.e. the unfilled part of the ProgressView.
ProgressBarStyle – There are two styles: default and bar. The bar style has a transparent track.
trackImage – Here an image is used instead of color for the unfilled part.
progressImage – Image is used to show the progress.

始めましょう。Main.storyboardにはProgressViewの開始/停止ボタンがあります。ViewController.swiftクラスのコードは以下の通りです。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var btn: UIButton!
    var isRed = false
    var progressBarTimer: Timer!
    var isRunning = false
    @IBAction func btnStart(_ sender: Any) {
        
        if(isRunning){
            progressBarTimer.invalidate()
            btn.setTitle("Start", for: .normal)
        }
        else{
        btn.setTitle("Stop", for: .normal)
        progressView.progress = 0.0
        self.progressBarTimer = Timer.scheduledTimer(timeInterval: 0.5, target: self, selector: #selector(ViewController.updateProgressView), userInfo: nil, repeats: true)
        if(isRed){
            progressView.progressTintColor = UIColor.blue
            progressView.progressViewStyle = .default
        }
        else{
            progressView.progressTintColor = UIColor.red
            progressView.progressViewStyle = .bar
            
        }
        isRed = !isRed
        }
        isRunning = !isRunning
    }
    @IBOutlet weak var progressView: UIProgressView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        progressView.progress = 0.0
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @objc func updateProgressView(){
        progressView.progress += 0.1
        progressView.setProgress(progressView.progress, animated: true)
        if(progressView.progress == 1.0)
        {
            progressBarTimer.invalidate()
            isRunning = false
            btn.setTitle("Start", for: .normal)
        }
    }
}

Main.storyboardのビューをSwiftファイルにリンクすることで、IBOutletとIBActionが作成されます。ボタンをクリックすると、selector関数であるupdateProgressViewを通じて進捗バーを更新するタイマーが開始されます。交互のタイマーごとに、ProgressViewのスタイルが切り替わります。シミュレータで実行された上記のアプリケーションの出力は以下の通りです。

プログレスビューの高さを増やす

ProgressViewの高さを以下の方法で変更することができます。

progressView.transform = progressView.transform.scaledBy(x: 1, y: 8)

これにより、高さが8倍に変化します。シミュレーターでどのように見えるか見てみましょう。制約のストーリーボードでも高さを変更することができます。第2の方法の方が良いです。なぜなら、最初の方法ではエッジを形作ろうとするとProgressViewがピクセル化する恐れがあるからです。

角の丸い進捗バー

viewDidLoad() 関数に次のコードを追加してください。

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        progressView.progress = 0.0
        
        progressView.layer.cornerRadius = 10
        progressView.clipsToBounds = true
        progressView.layer.sublayers![1].cornerRadius = 10
        progressView.subviews[1].clipsToBounds = true
    }

私たちはProgressViewの高さの半分の角の半径を設定しました。次は、更新されたコードを使用したアプリケーションの出力です。このチュートリアルはここで終わりです。プロジェクトは以下のリンクからダウンロードできます。

iOSのプログレスビュー