【Swift】UISplitViewController ボタンでマスター部を出し入れする | はじはじアプリ体験記

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

  • 2016年6月14日
    Swift 2.1で検証
  • Twitterでシェア
  • Facebook
  • LINEで送る

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

前回の記事で、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のプレイ動画。システムアイコンは表示されず、いつもの戻るボタンが表示された。

Swift記事一覧へ
  • Twitterでシェア
  • Facebook
  • LINEで送る
はじはじビットコイン目指せ!最強の暗号通貨トレーダー

コメント

  1. ちき より:

    初めまして、ちきと申します。いつも参考にさせて頂いております。

    SplitViewControlerについて質問させてください。
    新規にTabbedApplicationを作成し、Split View Controllerをタブに
    追加して実行したところ、SplitView以外のタブ(サンプルではFirstView)で端末を回転させるとコンソールに下記のエラーが表示されます。
    (落ちるわけではないのですが気になっています)

    : CGImageCreate: invalid image size: 0 x 0.

    何か回避方法などがあれば、ご教授願いますでしょうか。
    お忙しいところ恐れ入りますがよろしくお願いいたします。

    [実行環境]
    xcode Version 8.2.1
    Swift 3
    シミュレータがiPhone7 PlusやiPadの場合に顕著なようです。

    • 管理人 より:

      はじめまして
      参考にして頂きありがとうございます^^

      明確な回答はできませんが、まずは原因を特定するために、サンプルで使っている画像を1つずつ減らして実行してエラーが出なくなるのかを確認してみてはどうでしょう。

  2. ちき より:

    ご回答ありがとうございます。
    私もImage作成に問題があるものと思い、削除してみたのですが原因が特定できず、新規に作成して画像を全く使用していない状態でも同じエラーが出たので相談した次第です。

    実機ではエラーが出ないので放置しようかと思っていたのですが、TabにSplitViewを追加してさらにViewControllをスタックすると戻った後に画面が表示されないなど、期待通りに動かないので使用するのを諦めました。
    (Tabを使用せずSplitViewだけなら問題なく動きます)

    初心者には少し荷が重かったので、最初は単純な画面構成にして慣れてきたら色々やってみようと思います。

    お忙しいところありがとうございました。

    • 管理人 より:

      もし今後同じような事象が私のほうでも発生して、解決策が分かったらここに追記しておきますね^^

コメントを残す

お名前