【Swift】Split View Controllerの使い方。ボタンでマスター部を出し入れする方法。(Swift 2.1、XCode 7.2)

2020年6月16日

ボタンでマスター部を出し入れする

前回の記事で、Split View Controller(以下、スプリットビューコントロラー)を使って画面をマスター部とディテール部に分割する方法を説明した。⇒「前回記事

その記事の実装では、マスター部を引き出すときは画面端から内側に向かってドラッグした。

 

画面端からドラッグはやりづらいので、ドラッグ以外の方法で出し入れしたいと思うことがある。そこで本記事では、ボタンを押してマスター部を出し入れする実装方法を説明する。

具体的には、ナビゲーションバーの左端にボタンを表示し、ボタンを押してマスター部を出し入れできるようにする。
マスター部を引き出すボタン例

 

以降の作業は前回記事の実装結果から行う。前回記事の実装結果のXcodeプロジェクトをGitHubに置いたので、試してみる人はご利用されたし。
⇒「テスト用プロジェクト

前回記事の実装では、下図のようにディテール部はナビゲーションコントローラーを介さずにビューコントローラーをそのまま起動した。

Split View Controllerの変更前イメージ図

 

上図のままではiPadで起動したときにディテール部にナビゲーションバーが存在しないので、下図のようにディテール部もナビゲーションコントロールを介して起動するようにこれから変更する。

Split View Controllerの修正後イメージ

 

ストーリーボードのビューコントローラーを選択したあとに、メニューの「Editor」⇒「Embed In」⇒「Navigation Controller」を選択する。すると、ビューコントローラーと接続したナビゲーションコントローラーが作られる。

メニューからTab Bar Controllerを追加する

 

TestTableViewController.swiftを以下のコードに変更する。

viewDidLoadメソッドで、ナビゲーションバーの左ボタンに画面モード切り替えボタンを配置している。

切り替えボタンはiPhoneなどのCompact widthの端末では機能しないそのため、戻るボタンを切り替えボタンに置き換えてしまうと、iPhoneで起動したときにナビゲーションバーに何も表示されなくなる。そこで、leftItemsSupplementBackButtonプロパティをtrueにして、戻るボタンの後ろに切り替えボタンが追加されるようにした。

「画面遷移実行前の呼び出しメソッド」でキャストするクラスをナビゲーションコントローラーに変更し、ナビゲーションコントローラーからビューコントローラーを取得して、画像ファイル名を設定するようにした。

 

ViewController.swiftを以下のコードに変更する。

先ほどと同じように、viewDidLoadメソッドでナビゲーションバーの左ボタンに画面モード切り替えボタンを設定している。

 

以下はiPadのプレイ動画。ナビゲーションバーの左ボタンを押してマスター部を出し入れできるようになった。

 

以下はiPhoneのプレイ動画。こちらは変更前と何も変わらない。

AppDelegateで切り替えボタンを設置する

上記コードは、各クラスでナビゲーションバーの切り替えボタンを設定したが、複数画面で共通して使われるナビゲーションバーの設定を各クラスで設定し直すのはスマートではない。通常、このような設定はAppDelegateで一括して設定する。

しかし、「Show Detail」のセグエを使って画面遷移させると、ディテール部の画面が置換されるため起動時に設定したナビゲーションバーのアイテムが消えてしまう。そこで、セグエを使わずにディテール部を変更することにした。

(※もっとスマートな方法が見つかった場合はわかり次第追記する。)

セルとナビゲーションコントローラーを接続したセグエ(下図赤枠)を選択し、Deleteキーで削除する。

セグエを削除する

 

AppDelegate.swiftを以下のコードに変更する。

アプリ起動時に、マスター部とディテール部のナビゲーションバーに切り替えボタンを追加している。

マスター部のデリゲート先にディテール部のビューコントローラーを設定し、セルがタップされたときのイベントをマスター部からディテール部に渡せるようにした。

 

TestTableViewController.swiftを以下のコードに変更する。

ViewControllerに適用するプロトコル(TestTableViewControllerDelegate)を新しく作成した。

「データ選択時の呼び出しメソッド」で、ディテール部のデリゲートメソッドを呼び出したあとにディテール部の画面表示に切り替えている。

 

ViewController.swiftを以下のコードに変更する。

上記で作成したプロトコルを適用し、デリゲートメソッドの「セル選択時の呼び出しメソッド」でイメージビューに画像を設定している。

 

以下はiPadのプレイ動画。前回の実装と動きは同じ。

 

以下はiPhoneのプレイ動画。前回の実装と動きは同じ。

 

自分好みのボタンに変える。

マスター部を出し入れするボタンを自分好みの画像や文字列にするとき、そのまま設定すると以下の動画のようにiPhoneで起動したときに「戻るボタン」の横に切り替えボタンが表示され、しかもiPhoneでは切り替えボタンは機能しないので、何もできないボタンが表示されるだけになる。

 

なので、画面モードの状態からCompact width または Regular widthのどちらでで起動されたのか判別し、Regular widthで起動されているときのみボタンを追加する作りに変更する。

AppDelegate.swiftを以下のコードに変更する。その他のファイルは変更無し。

画面モードがPrimary Hiddenの場合にRegular widthの端末で起動されたと判断し、アイコンを設定したボタンを左ボタンに登録している。

 

以下はiPadのプレイ動画。システムアイコンのボタンが表示された。

 

以下はiPhoneのプレイ動画。システムアイコンは表示されず、いつもの戻るボタンが表示された。