web-dev-qa-db-ja.com

iPadのナビゲーションバーとツールバーおよび関連するコントロール

iOSヒューマンインターフェイスガイドライン で説明されているように、iPadのツールバーが一番上に移動しているように見えるため、iPhoneからiPadに移行すると、ナビゲーションバーとツールバーが少し混乱します。 iPadデバイスのナビゲーションバーとツールバーの違いについては明確ではありません。私はそれらと、それぞれの場合に表示できるボタンとコントロールについて疑問があります。それらを解決する例は見つかりません:

1)ナビゲーションバーとツールバーを「混合」して、戻るボタンとツールバー項目を同時に表示することはできますか?たとえば、メールアプリの分割ビューの右側にツールバー項目があり、分割ビューの左側に戻るボタンのあるナビゲーションバーがあるため、このアプリでは戻るボタンとツールバー項目は常に別々のバーにあります:

Mail

同様に、設定アプリでは、分割ビューの右側に戻るボタンのあるナビゲーションバーが表示されますが、ツールバー項目は表示されません。

Settings

IPadのナビゲーション戻るボタンとツールバー項目の両方を表示するバーを備えたアプリの例はどこにありますか?それとも不可能ですか?

2)このようなタイトルのないツールバーではなく、ナビゲーションバーにタイトルのあるセグメント化されたコントロールを表示することはできますか? (iOSヒューマンインターフェイスガイドラインのドキュメントには、それがツールバーであると記載されています):

Segmented

3)設定アプリに似た分割ビューがあるとします。時々右側にツールバーを表示し、別の時にナビゲーションバーを表示することは有効ですか、それとも正しいですか?または、常に同じタイプのバーをアプリ全体に表示する必要がありますか?

ありがとう

3
AppsDev

プログラマーにとっては、次のようになります。

ナビゲーションバーは、画面の上部にあるビューのスタックを制御するものです。最初以外の各ビューには、戻るボタンがあります。そこに追加のボタンを配置しても、それはまだナビゲーションバーです。

ツールバーは画面下部のバーで、ボタンのみが含まれています。

プログラマにとっては、それらはオブジェクトの異なるクラスです。また、見た目はよく似ていますが、ツールバーの上部にセパレータが追加されています。また、ナビゲーションバーのタイトルは中央揃えになっています。

ここの一番上のアイテムはナビゲーションバーです(一番下のアイテムは[戻る]ボタンがありません)。そして一番下はツールバーです。

enter image description here

Apple HIGは2つを混同します。しかし、プログラマーが実際に行うことの現実に従うことが最善だと思います。

1
Steve Waddicor

1)ナビゲーションバーとツールバーを「混合」して、戻るボタンとツールバー項目を同時に表示することは可能ですか? iPadでは、片側にのみナビゲーションがありました。両側でドリルダウンできるようにするには、特別な理由が必要です。はい、UXと開発のナビゲーションバーにツールバー項目を含めることができます。

2)このようなタイトルのないツールバーではなく、タイトルのあるナビゲーションバーにセグメント化されたコントロールを表示することは可能ですか?はい、しかし、その設計とその方法に注意する必要があります少しトリッキーかもしれません。

)たとえば、設定アプリに似た分割ビューがあるとします。時々右側にツールバーを表示し、別の時にナビゲーションバーを表示することは有効ですか、それとも正しいですか?または、アプリ全体で常に同じタイプのバーを表示する必要がありますか?アプリ全体の片側にナビゲーションバーを表示します。ドリルダウンせずにナビゲーションバーと反対側にツールバーを混在させることができます。

0
micap

ナビゲーションバーは、たとえそうでなくても、ツールバーのサブクラスになる可能性のあるクラスです。どちらにも操作可能な一連のアイテム(通常はボタン)があります。ナビゲーションバーには、ビューコントローラーをプレゼンテーションスタックにプッシュしたり、プレゼンテーションスタックからポップしたりする追加機能があります。さらに、ナビゲーションバーにはデフォルトでタイトルラベルがあります。ただし、何らかの理由で必要な場合は、ナビゲーションバーのレイアウトを複製できますwithツールバークラス。

電話の場合も、横軸に沿った画面の空き領域が原因である可能性が高いため、ツールバーは通常画面の下部に配置されます。ただし、iPadでは同じ制約に対応していないため、ツールバーを画面の上部に移動する場合があります。

たとえば、Mail.appには、左側にナビゲーションバーが配置された分割ビュー(ビューをスタックにプッシュしてポップする)と、フィードバック用のツールバー(このビューが最後に更新されたのはいつか)があります。 。ただし、電子メールを読んでいるビューでは、ハンドヘルドデバイスのナビゲーションバーはツールバーに置き換えられています。ツールバーはnotスタックのビューをプッシュまたはポップします。

写真は、iPadのツールバー要素が画面上部のナビゲーションバーに表示されるため、興味深いケーススタディのようなものです。そして、ツールバーは別のツールバーに置き換えられます-サムネイル-フォームファクタが狭いために電話で許可されていないもの。

一言で言えば、Steveはツールバーとナビゲーションバーの主な違いを特定したと思います。ナビゲーションバーには、ビューをスタックにプッシュしたりスタックからポップしたりする目的があります。私の一般的なルール、およびネイティブアプリのほとんど(すべてではないにしても)で使用されているように見えるのは、上部の「ツールバー」領域にボタンを配置する余地がある場合です-そうします。そうでない場合は、オーバーフローを下部の「ツールバー」領域に移動させます。ビューのタイトル。上部に表示され、下部には表示されません。実際のUIToolbarクラスを使用するか、UINavigationBarクラスを使用するかは、主に、クラスを使用してスタックにビューをプッシュまたはポップするかどうかによって決まります。ページと写真は、これらの一般的なルールの興味深いケーススタディです。1つはタブレットとハンドヘルドの両方の上部領域にすべての「アクションボタン」があり、もう1つはそうでないためです。

お役に立てば幸いです。

0
Josh Bruce