iOSアプリでステータスバーとナビゲーションバーを透明にする方法を解説

iOSで透明なステータスバーとナビゲーションバーを実現するには？

画面いっぱいにコンテンツが広がり、ステータスバーやナビゲーションバーが半透明になっているアプリを見かけたことはありませんか？写真アプリや動画アプリなどでは、この演出によって没入感の高いデザインが実現されています。

この記事では、Swiftを使ってステータスバーとナビゲーションバーを透明化したiOSアプリを作成する手順を、初心者向けにわかりやすく解説します。

Step 1：Xcodeで新規プロジェクトを作成する

まずはXcodeを起動し、新しいプロジェクトを作成しましょう。

Xcode → New Project → Single View Application を選択し、プロジェクト名を「TransparentViews」として保存します。

Step 2：Navigation ControllerでView Controllerを埋め込む

次に、Storyboard上でView Controllerを選択し、Editor → Embed In → Navigation ControllerからNavigation Controllerに埋め込みます。

その後、下図のようにImageViewを配置し、任意の画像を設定してください。この画像が背景となり、バーの透明化効果が視覚的に確認しやすくなります。

Step 3：コード追加前の状態を確認する

まずは、透明化のためのコードを一切書かずにアプリをビルドして実行してみましょう。

この時点では、ステータスバーとナビゲーションバーがデフォルトの不透明な状態で表示され、画面は以下のようになります。

Step 4：viewDidLoadに透明化のコードを追加する

ここからが本題です。ViewController.swiftを開き、viewDidLoadメソッド内に以下のコードを追加してください。

override func viewDidLoad(){
   super.viewDidLoad()
   // ナビゲーションバーの背景画像を空にする
   self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
   // 影用の画像も空にする（下部の境界線を消す）
   self.navigationController!.navigationBar.shadowImage = UIImage()
   // 半透明を有効にする
   self.navigationController!.navigationBar.isTranslucent = true
}

各コードのポイント：

• setBackgroundImage(UIImage(), for: .default)：ナビゲーションバーの背景画像を空の画像（UIImage()）に置き換え、背景を消します。
• shadowImage = UIImage()：ナビゲーションバー下部に表示される影の線を非表示にします。
• isTranslucent = true：バーの半透明プロパティを有効にし、背後のコンテンツが透けて見えるようにします。

Step 5：アプリを実行して結果を確認する

コードを追加したら、再度アプリをビルドして実行しましょう。

ナビゲーションバーが透明になり、ImageViewに設定した画像が画面全体に表示されていれば成功です。ステータスバー領域までコンテンツが広がることで、より洗練された没入感のあるUIになります。

まとめ

わずか数行のコードを追加するだけで、iOSアプリのナビゲーションバーを透明化できます。ポイントは以下の3つです。

1. 背景画像を空のUIImageに置き換える
2. shadowImageにも空のUIImageを設定する
3. isTranslucentをtrueにする

ギャラリーアプリやプレイヤーアプリなど、画像・動画を全面に見せたい場面でぜひ活用してみてください。