くるくるを実装してみよう[Activity Indicator View]

Blog

 

今回、紹介するのはくるくるの実装方法です。

くるくるはアプリでローディングや読み込み中によく見るものです。

 

↓ こういったもの。

 

 

 

このくるくるを実装するのはユーザーにとっても親切なので、UXにおいても重要です。

 

 

では、実際にやっていきましょう。

 

 

UIの実装

 

  • Buttonを二つ追加し、それぞれを「スタート」「ストップ」に設定。
  • Activity Indicator Viewを追加。

 

 

 

 

 

Action・Outlet接続

 

  • Active Indicator ViewをOutlet接続。nameを「kurukuru」に。
  • スタートボタンとストップボタンをAction接続。nameをそれぞれ「start」「stop」に。

 

 

 

 

コードの記入

 

  • まず、くるくるを非表示にする。

 

override func viewDidLoad() {
     super.viewDidLoad()
        
     kurukuru.hidesWhenStopped = true

 }

 

  • スタートとストップボタンにアニメーションをスタート、ストップのコードを記入。

 

  @IBAction func start(_ sender: Any) {    
        kurukuru.startAnimating()    
   }
    
    @IBAction func stop(_ sender: Any) {     
        kurukuru.stopAnimating()     
   }

 

全体コード

 

 

import UIKit

class ViewController: UIViewController {

    
    @IBOutlet weak var kurukuru: UIActivityIndicatorView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        kurukuru.hidesWhenStopped = true

    }


    
    @IBAction func start(_ sender: Any) {
        
        kurukuru.startAnimating()
        
    }
    
    
    @IBAction func stop(_ sender: Any) {
        
        kurukuru.stopAnimating()
        
    }
    
}

 

 

これでくるくるが実装できました。

 

実際にみてみましょう。

 

 

実行結果

 

 

 

いかがでしたか?

 

ダウンロード中や読み込み中にこの機能を実装しとけばUXがよくなるので覚えておきましょう。

 

 

以上で「くるくるを実装してみよう[Activity Indicator View]」の説明を終わります。

 

🤗

 

 

コメント