時計、砂時計、ぐるぐる、読込中、Now Loding の UI はインフィニット・インジケーターと呼ぶらしい。
iOS では UIActivityIndicatorView というクラスが用意されているのでそれを使ってサンプルコードを書いてみた。
サンプルでは UIButton による Start / Stop ボタンを表示する。ボタンを押すと Activity Indicator が表示される。
もう一度ボタンを押すか、または3秒待つと自動で消える仕組みにした。
Activity Indicator が重なっている部分はボタンを押しても反応しないのが確認できる。重なっていない部分はボタンを押すことができる。
今回の確認環境。
開発環境: Mac OS X El Capitan + Xcode Version 7.3.1 + Swift 2.2
端末: iPhone 6 + iOS 9.3.2
サンプルは、Xcode で新規に Single View Application のプロジェクトを作成して、UIViewController に以下のサンプルコードを貼り付けて実行するだけでOK。
import UIKit
class ViewController: UIViewController {
private var myButton: UIButton!
private var myIndicator: UIActivityIndicatorView!
private var myTimer: NSTimer!
override func viewDidLoad() {
super.viewDidLoad()
// ボタンとインジケータのサイズの基準値
let xsize: CGFloat = self.view.bounds.width / 8
let ysize: CGFloat = self.view.bounds.height / 8
// Start/Stop ボタンを生成
myButton = UIButton()
myButton.frame = CGRectMake(xsize, ysize, xsize * 4, ysize * 4)
myButton.backgroundColor = UIColor.greenColor()
myButton.layer.cornerRadius = 20.0
myButton.setTitleColor(UIColor.blackColor(), forState: .Normal)
myButton.setTitle("Start", forState: .Normal)
myButton.addTarget(self, action: #selector(onClickMyButton(_:)), forControlEvents: .TouchUpInside)
// ボタンを画面に追加
self.view.addSubview(myButton)
// インジケーターを生成
myIndicator = UIActivityIndicatorView()
myIndicator.frame = CGRectMake(xsize * 3, ysize * 3, xsize * 4, ysize * 4)
// インジケータのスタイルを設定
myIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge
myIndicator.color = UIColor.blueColor()
// インジケーターのバックグラウンドを設定
myIndicator.backgroundColor = UIColor.redColor().colorWithAlphaComponent(0.5)
myIndicator.layer.cornerRadius = 20.0
// アニメーションが停止している時はインジケータを表示しない
myIndicator.hidesWhenStopped = true
// インジケーターを画面に追加
self.view.addSubview(myIndicator)
}
// インジケーターのアニメーションを開始
internal func startAnimation() {
myIndicator.startAnimating()
myButton.setTitle("Stop", forState: .Normal)
}
// インジケーターのアニメーションを停止
internal func stopAnimation() {
myIndicator.stopAnimating()
myButton.setTitle("Start", forState: .Normal)
// タイマーが動いているなら止める
if let timer = myTimer {
if timer.valid {
timer.invalidate()
}
}
}
// ボタンが押されたときの処理
internal func onClickMyButton(sender: UIButton){
if myIndicator.isAnimating() {
stopAnimation()
} else {
startAnimation()
// 3秒後に自動でインジケーターを止める
myTimer = NSTimer.scheduledTimerWithTimeInterval(
3.0,
target: self,
selector: #selector(stopAnimation),
userInfo: nil,
repeats: false)
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
-
Ref.
- UIKit User Interface Catalog: Activity Indicators
- UIActivityIndicatorView Class Reference
- 024 UIActivityIndicatorの表示 - Swift Docs
tags: iphone ios swift
Posted by NI-Lab. (@nilab)
