使って創ってApp

ソフトウェアを使ったり作ったりするブログです

iOSアプリ開発でビューをフェードインで表示させる

iOSアプリ開発でビューをフェードイン表示させます。もちろんフェードアウトもできますよ。

フェードイン表示はアニメーション表示の一種なので、UIView クラスの animateWithDuration メソッドを使用します。

開発環境

完成予定図

f:id:hitxutokun:20160106224502g:plain

ボタンをタップすると、青い背景のビューがフェードインで表示されます。

ビューをフェードイン表示させる

Xcode の Single View Application テンプレートで作成します。

ボタンとビューを配置・設定

ボタンとビューを Main.storyboard に最初からある ViewController のビューに配置します。追加するビューの Alpha を 0 にします。

f:id:hitxutokun:20160106225919p:plain

ビューの背景色を変更し、ボタンのタイトルを Show に変更しました。ビューは透明なので、どこにあるのか分かりません。

f:id:hitxutokun:20160106230715p:plain

画像では、ビューを選択しているのでどこにあるのか分かりますね。青い線が表示されているのは Constraint を設定しているからです。

追加したビューを設定

追加したビューを、Outlet 名を blueView として ViewController.swift にリンクさせます。

ボタンにアクションを設定

ボタンを、アクション名を showBlueView として ViewController.swift にリンクさせます。showBlueView メソッドに以下のコードを書きます。

@IBAction func showView(sender: AnyObject) {
  UIView.animateWithDuration(2.0) { () -> Void in
    self.blueView.alpha = 1.0
  }
}}

これで完成です。

animateWithDuration メソッドの animation 引数のクロージャに、アニメーション終了時のビューのプロパティを書きます。今回は、blueView を不透明にしたいので、 self.blueView.alpha = 1.0 にしました。

まとめ

ビューのプロパティをアニメーションさせながら変えたい時は、UIView クラスの animateWithDuration メソッドを使う。楽にアニメーション表現ができます。