JavaScriptプログラマがSwift iOSアプリを2週間で作って公開してみた〜その21 Launch Screen with xib〜


JavaScriptプログラマー(JSer)がSwiftデビューして、ただ作りたいアプリを作ってみたシリーズ第21回目です。

前回はNSLocalizedStringを使ったラベルの国際化についてでした、今回はアプリ起動時に表示される起動スクリーンの作り方についてです。

起動スクリーンを作る方法はいくつかあるようですが、TwitStockerではxibファイルを使って起動スクリーンを作っています。理由は当時調べていて一番簡単にできそうだったからです。

TwitStockerはUI部品に関して、基本的に今までStoryboardなどは使用せずコードだけで配置してきました。今回紹介する起動スクリーンの部分のみインターフェースビルダーというUIツールを使って作成しました。

起動スクリーンとして使用するファイルの設定

起動時のスクリーンとして使用するファイルをプロジェクトの設定画面から選択します。

「プロジェクトを選択 -> Generalのタブ -> App Icons and Lunch Images」を確認します。
スクリーンショット 2015-03-18 21.46.34

選択肢のデフォルトではLaunchScreenと入っているかと思います。それはインターフェースビルダー用のファイルであるLaunchScreen.xibを指し示しています。storyboardを使った選択肢もあるようですが、今回はxibファイルで。

xibファイルの編集

ファイルツリーにあるLaunchScreen.xibを選択するとこんな画面が出てくると思います。
これが起動時に使用されるスクリーンです。多分デフォルトだとみんなこんな感じだと思います。

スクリーンショット 2015-03-18 21.47.25

もしxibファイルを消してしまったりしていたら、新規ファイル作成時にUser InterfaceのViewを選ぶと作れます。

スクリーンショット 2015-03-22 18.10.30

背景色の設定

Viewを選択した状態で右側のBackgroundのところから色を選択します。

スクリーンショット 2015-03-22 18.13.22

画像の設置

右下のパレットからImage ViewをドラッグしてViewの上に設置します。

スクリーンショット 2015-03-22 18.15.53

次にImage Viewを選択した上で、右上の選択項目から事前にxcode上のImages.xcassetsに登録してあるイメージを選びます。

スクリーンショット 2015-03-22 18.17.14

画像の中央揃え

端末によって画面の大きさが異なるため、アイコンをpx指定の配置ではなく、どのような画面の大きさであっても中央揃えにしたくなると思います。
常に中央揃えにするためにはまず画面右下に小さくある四角形のアイコンを選択して、Horizontal Center in Container/Vertical Center in Containerをチェックして”Add 2 Constrains”を押します。

スクリーンショット 2015-03-22 18.27.15

そうすると以下のように右側のペインの”Show the Size inspector”というタブを選んでみると、2つの制約が追加されています。

スクリーンショット 2015-03-22 18.29.28

画面中央に画像をドラッグしてぴったりはまったら、完成です。

実際にアプリを起動してみると起動スクリーンがセットされて表示されます!
以上でxibによる起動スクリーンの設定方法は終わりです。次回はMacのプレビューアプリ(windowsで言う所のペイント)の使い方についてです(もはや完全にswiftの記事ではないw)

TwitStockerのダウンロードはこちらから。
https://itunes.apple.com/en/app/twitstocker/id958798898?l=ja&ls=1&mt=8