質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • Swift

    8764questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

  • iOS

    4701questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

ナビゲーションコントローラーデザイン

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 199

ryohasegawa

score 112

ナビゲーションコントローラーのデザインについてです。
ストーリーボード上で作業しています。
やりたい事は、以下画像のように標準Appの「写真」のようにヘッダの部分に「戻るボタン」と「もうひとつボタン」をフッターの部分にもボタンを追加したいです。
イメージ説明
ですが、直接BerButtonItemをヘッダーやフッターの部分に持っていくとヘッダーに表示されていた前の画面に戻るボタンが消えてしまいます。
ヘッダーに関しては、NavigationItemを設置してからBerButtonItemを設置すると上画像のようになるんですが、問題はフッター部分です。
現在の状態は下の画像のようになってます。
イメージ説明
ここまでは思っているとうりになります。
次にフッター部分です。このままフッターにBerButtonItemを設置すると下の画像のように戻るボタンが消えてしまいます。
イメージ説明
戻るボタンを消さずにフッター部分にボタンを設置するにはどうすれば良いですか?

追記

イメージ説明

追記2

回答をもとに画面を作ってみました。
イメージ説明
選択を押すとPresents Modllyで画面遷移します。
ですが、問題が一つ...
Navigation Barの上に空間ができてしまいます。
Toolbarの下の隙間は自動でなくなってるとおもいます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

標準Appの「写真」アプリのフッター部分は、TabBarControllerで表示されるTabBarです。

質問しているのは、そうではなくて、1つの画面内に表示するToolBarのように見えますが、ToolBarを画面の下に配置してから、そこにBarButtonItemを貼り付けていますか?

もしかして、ToolBarを配置せずに、ViewControllerのSimurated MetricsのBottom Barを「Translucent Toolbar」にして、そこにBarButtonItemを貼り付けたりしていませんか?
Simurated Metricsの設定はStroyboardの見た目上の話なので、それを変更しただけではToolBarを貼り付けられていません。

もしそうしているのであれば、今貼り付けているBarButtonItemを削除し、Simurated MetricsのBottom Barを「Inferred」に戻し、画面内にToolBarを貼り付け、AutoLayoutでToolBarをSafeAreaの下辺にぴったりくっつくように設定すれば、そこにBarButtonItemを貼り付けて画面下に表示できると思います。


(2019/2/6 14:00追記)

Apple標準の写真アプリのような画面遷移を再現するなら、次のように構成します。

イメージ説明

写真一覧画面の右上の「選択」ボタンからの画面遷移(segueの設定)は
次のように「Present Modally」にします。
(さらに写真アプリに合わせるならAnimatesのチェックをOFFにします)
接続先は、Navigation Controllerです。

イメージ説明

遷移先のNavigation ConrollerのrootViewControllerを「項目を選択」の画面にします。
やり方は、先に「項目を選択」の画面を作ってからEmbed InでNavigation Controllerを
作ってもいいし、Navigation Controllerと「項目を選択」の画面をそれぞれ別に作り、
Navigation Controllerから青い線を引っ張ってドロップした時に現れる黒いメニューの中で
Relationship Segueの「root view Controller」を選択して接続してもかまいません。
どちらでも同じことです。

「項目を選択」の画面のSimulated Metricsは全て「Inferred」です。

イメージ説明

そして、ToolBarを貼り付けて次のようにAutoLayoutを設定します。

イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/04 12:02

    回答ありがとうございます。
    確認してみます

    キャンセル

  • 2019/02/05 13:27

    返信おそくなって申し訳ありません。
    TabBarで画面を作っているのですか、追記した画像のようにフッターにボタンを配置するにはどうすれば良いですか?
    フッターにToolBarを設置してみたのですが、ToolBar自体が背面に行ってしまいボタンが表示されません...

    キャンセル

  • 2019/02/06 00:06 編集

    標準の写真アプリと同じように、先頭画面はTabBarControllerとNavigationContollerを組み合わせた画面になっていて、そこで右上の選択ボタンを押して、追記画面のように上がナビゲーションバーで下がツールバーの画面を表示したいのであれば、先頭画面で選択ボタンを押した時の画面遷移はPresent Modallyで新しいNavigationControllerに画面遷移し、そのrootViewControllerに接続したViewControllerにツールバーを配置すればよいです。

    キャンセル

  • 2019/02/06 01:43

    まず、上がナビゲーションバーで下がツールバーの画面を作りたいのですが、「そのrootViewControllerに接続したViewControllerにツールバーを配置すればよいです。」という意味がわかりません

    「そのrootViewController」 とはPresent Modallyで遷移した新しいNavigationControllerの一個前の事ですか?

    この回答を元に画面作っみました。
    追記します。

    キャンセル

  • 2019/02/06 14:28

    Stroyboardのスクリーンショットを撮って、具体的なやり方を回答に追記しました。

    キャンセル

  • 2019/02/06 16:38

    ありがとうございます!
    勉強してきます。

    キャンセル

同じタグがついた質問を見る

  • Swift

    8764questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

  • iOS

    4701questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。