先日MailBoxというアプリを僕のスマホにダウンロードしました。

ScreenShot90

DropBoxの容量が増えるために入れてみただけですが、とっても使い心地が良いのでそのまま使わせて頂いています。

で、このMailBoxというアプリ、ローディング中にステータスバーをアニメーションした後隠して、テキストを表示するという些細な機能を実装していました。

この表示がとってもおしゃれに見えたので、今回実装してみました。

ただNavigationBarと一緒にやるとうまく行かなかったので、今回はUIViewControllerだけでやってみました。

※追記 出来ました。 -> 【iOS】NavigationBar付きのStatuBarの上にテキストを表示する

こんな感じになります。

Animation02

それではまずはソースコードをご覧ください。

ソースコード

ViewController.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import UIKit
class ViewController: UIViewController {
var shouldBeHidingStatusBar: Bool = false
var statusBarTextLabel: UILabel?
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.statusBarTextLabel = UILabel(frame: CGRect(x: 0.0, y: -20.0, width: self.view.frame.size.width, height: 20.0))
self.statusBarTextLabel?.textAlignment = NSTextAlignment.Center
self.statusBarTextLabel?.font = UIFont.systemFontOfSize(13.0)
self.statusBarTextLabel?.alpha = 0.0
self.statusBarTextLabel?.text = "Hidden StatusBar"
self.statusBarTextLabel?.textColor = UIColor.whiteColor()
self.statusBarTextLabel?.backgroundColor = UIColor.blueColor()
self.view.addSubview(self.statusBarTextLabel!)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@IBAction func startStatusBarAnimation(sender: AnyObject) {
self.shouldBeHidingStatusBar = !self.shouldBeHidingStatusBar
if self.shouldBeHidingStatusBar {
self.statusBarHiddenAnimation()
} else {
self.statusBarShowAnimation()
}
}
override func prefersStatusBarHidden() -> Bool {
return self.shouldBeHidingStatusBar
}
override func preferredStatusBarUpdateAnimation() -> UIStatusBarAnimation {
return UIStatusBarAnimation.Slide
}
// MARK: private method
private func statusBarHiddenAnimation() {
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.setNeedsStatusBarAppearanceUpdate()
} , completion: { (finished: Bool) -> Void in
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.statusBarTextLabel?.frame.origin = CGPoint(x: 0.0, y: 0.0)
self.statusBarTextLabel?.alpha = 1.0
})
})
}
private func statusBarShowAnimation() {
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.statusBarTextLabel?.frame.origin = CGPoint(x: 0.0, y: -20.0)
self.statusBarTextLabel?.alpha = 0.0
self.setNeedsStatusBarAppearanceUpdate()
})
}
}

一個ずつメソッドを紹介していきます。

override func prefersStatusBarHidden() -> Bool

これがStatusBarの状態を返すメソッドになります。

setNeedsStatusBarAppearanceUpdate()を呼ぶとprefersStatusBarHidden() -> Boolが呼ばれるので、このメソッドをオーバーライドします。

表示している、していないは状態を保持しておいてそれを返すようにしています。

ちなみにですが

  • falseを返す -> StatusBarを表示する
  • trueを返す -> StatusBarを非表示にする

という感じです。

override func preferredStatusBarUpdateAnimation() -> UIStatusBarAnimation

これでアニメーションを指定します。

またこれを指定した状態でUIView#animateWithDuration:animationsメソッドのanimationsブロックのなかでsetNeedsStatusBarAppearanceUpdate()を呼ぶとアニメーションが実行されます。

1
2
3
UIView.animateWithDuration(0.5, animations: { () -> Void in
self.setNeedsStatusBarAppearanceUpdate()
})

のような形です。

今回はStatusBarのアニメーションの後にUILabelをアニメーションで表示するようにしてみました。

UIStatusBarAnimation

UIStatusBarAnimationenumとなっており

1
2
3
4
5
enum UIStatusBarAnimation : Int {
case None
case Fade
case Slide
}

を指定することが出来ます。

終わりに

サンプルコードはGitHubに上げておきましたので、よかったら見てください。

NinjaAdMax / SampleStatusBarAnimation

次はNavigationBarがあるやつでもかっこよくアニメーションできるようにしてみたいです。

参考

Objective-C - iOS7でナビゲーションバーやステータスバーをカスタマイズする - Qiita