web-dev-qa-db-ja.com

リストとマップを表示するときのタブの代替(マテリアルデザインでスクロールするときのアプリの問題)

私が設計しているアプリには、マップとしても表示する必要があるリストがあります。

このスレッドでは、そのようなコンテンツをタブとして表示するかどうかの問題について既に議論されています。 タブとActionBarスピナーの間で選択

アプリはマテリアルデザインスタイルのガイドラインに準拠しているため、古いスピナーに代わるものはありますか?

また、タブが使用されている場合は他の問題があります(これは可能性があります)

すべてのアプリで、リストビューを下にスクロールすると、アプリバーが上がったり消えたりして、ステータスバーだけが残り、コンテンツのための余地が残ります。

タブリストでこれを行うと、マップ上のアプリバーはどのように動作しますか?

ユーザーが下にスクロールして(アプリバーが消える)、マップにスワイプすると、ナビゲーションが壊れるため、アプリバーを非表示にできません(スクロールはマップを移動するため、ユーザーはスクロールしてアプリバーを表示できません) )。

ユーザーがタブリストに戻った場合でも、アプリバーは非表示になっている必要がありますか?

enter image description here

4
Adria Perez Pla

スライドレイアウトを使用して、マップ上でリストをスライドできます。

リスト

List

リスト-アンカー付き、地図付き

List - anchored with map

リストが折りたたまれた地図

Map with list collapsed

ユーザーは、リストの要約を表示できるリストヘッダーを使用してリストをスライドできます。

長所:

  • アクションバーは他の目的に使用できます
  • マップとリストの両方を同時に表示できます

短所:

  • 小さな画面が乱雑になることがあります
  • マップとリストの両方を同時に表示できます
2
iceman

はい、代替案があります

ビューが2つしかないため、マテリアルデザインにも適用できる一般的なアプローチは、トップバーにトグルアイコンまたはWord(mapまたはlist)を提供することです。

これにより、タブコントロールを使用して貴重な領域を占有する必要がなくなり、固定トップバーを有効にすることで、厄介なスクロールデザインを回避することができます。

このアプローチは、検索結果をYelp、TripAdvisor、Hotels.comなどの地図に一覧表示またはプロットできる大規模なアプリケーションで使用されます(これらのアプリの一部は、ボタンを上部バーではなく下部バーに配置し、モバイルでの親指によるアクセスを容易にしますデバイス)

以下は、右上のアイコンを使用してビューを切り替える例です。

enter image description here

ハンバーガーアイコンと混同しないように、リストビューに適切なアイコンを選択する必要があります。

4
tohster