フローティングアクションボタンが他のコンポーネントをブロックしないようにするにはどうすればよいですか?


22

Googleの新しいマテリアルデザインでは、フローティングアクションボタンを使用して、その画面のメインアクションに対してユーザーに注意を引くことをお勧めします。リストビューには、これに関する非常に多くの例があります。

ここで、リストビューに画面いっぱいのアイテムがあり、スクロールできないようにしているとします。リストアイテムに、ユーザーが操作できる特定のコンポーネント(スイッチやお気に入りのスターなど)がある場合、フローティングアクションボタンがこのコンポーネントをブロックしている可能性があります。このケースをどのように処理する必要がありますか?

編集:これは実際には常にリストの最後の項目で発生します。「お気に入りの星」を適切に使用できない例です。この例の時間など、コンテンツもブロックしています。

UIをブロックするフローティングアクションボタンの例

回答:


14

これを処理する方法はいくつかあります。

  1. 重要なコンテンツをボタンの下に配置しないでください

    これは最も明白なアプローチであり、おそらく最も一般的です。可能な場合はいつでも、他のボタン、メインコンテンツなどのアクションボタンの下に重要なものがないことを確認するように設計を構成します。

    パディングまたは空白のエントリを使用して余分なスペースを追加し、重要ではないものがボタンのある場所にないようにコンテンツをフォーマットするか、他の何か-それはあなたが望むコンテンツとデザインに依存します。

  2. ボタンを再配置します

    アクションボタンは、右下にある必要はありません。デザインによっては、別の場所に配置する方が理にかなっている場合があります。以下の例はかなりうまくいくと思います。

    Googleはマテリアルデザインガイドを更新し、フローティングアクションボタン専用のページを作成しました。このページには、アニメーションに加えてさまざまな場所で使用され、サイズ変更が表示されます(以下で説明します)。

Reddit News Proからの最初の画像。Mark DiSciulloの 2番目の画像。

  1. 常にボタンを表示しない

    アクションボタンは、常に見る必要があるほど重要ではない場合があります。このような場合、スクロールまたはスクロールダウン中に非表示にするのが理にかなっています。その方法と方法がコンテンツとデザインに依存している場合、すべてのアプリケーションに当てはまる答えはありません。

    Googleの更新されたガイドラインは、下の画像のようにスライドするのではなく、全体を拡大縮小することでボタンアニメーション化するバージョンを示しています。

フローティングアクションからのイメージ。


8

少し単純で、最もエレガントなソリューションではないかもしれませんが、空の「ダミー」エントリをリストの最後に追加して、ユーザーが最後のエントリよりもさらにスクロールできるようにします。


1
これは、Gmailアプリが使用するため、「公式」ソリューションと見なすことができます。
ヴィッキーチワニ

1
また、ダミーのエントリ(指摘したようにエレガントではないように聞こえる)ではなく、「リストの一番下のパディング」と呼ぶこともできます。
ヴィッキーチワニ


2

受け入れられた答えの「ボタンの再配置」のアイデアを跳ね返して、材料設計ガイドラインのスクロール技術の部分はそのアイデアの1つの可能な実装を持っています。

つまり、フローティングアクションボタンは、コンテンツと柔軟なスペースのあるアプリバーの間の境界線を破ります。スクロールする場合:

柔軟なスペースは、ツールバーのみが残るまで縮小します。ページの上部にスクロールすると、柔軟なスペースが再び元の場所に戻ります。

フローティングアクションボタンは、拡大する素材として画面上にアニメーション表示されます。

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

アプリバーとコンテンツの間のファブ


1

これをRecyclerView.AdapterのonBindViewHolderメソッドで使用して、リストの最後のアイテムの下マージンを72dpに設定し、フローティングアクションボタンの上にスクロールアップするようにしました。

これには、リストにダミーのエントリは必要ありません。

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}

私のために働く:)。
OWADVL
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.