如何防止浮动操作按钮阻塞其他组件?


22

Google的新Material Design建议使用浮动操作按钮来吸引用户注意该屏幕上的主要操作。列表视图中有很多这样的示例。

现在,假设您的列表视图只有足够的项目填满屏幕,因此无法滚动。如果您的列表项具有用户可以与之交互的某个组件,例如开关或喜欢的星星,则浮动操作按钮可能会阻止此组件。我们应该如何处理这种情况?

编辑:这实际上总是与列表的最后一项发生。这是无法正确使用“收藏星号”的示例。它还会阻塞内容,例如本示例中的时间。

浮动操作按钮阻止UI的示例

Answers:


14

您可以通过几种不同的方式来处理此问题。

  1. 不要在按钮下方放置重要内容

    这是最明显的方法,而且可能是最通用的方法。只要有可能,就对结构进行结构设计,以确保动作按钮下方没有其他重要内容,如其他按钮,主要内容等。

    您可以通过使用填充或空白条目来添加额外的空间,对内容进行格式设置,以使不重要的内容不在按钮所在的位置,或者其他一些内容-它取决于内容和所需的设计。

  2. 重新定位按钮

    动作按钮不必位于右下角。根据您的设计,将其放置在其他位置可能更有意义。我认为以下示例做得很好。

    Google刚刚更新了其材质设计指南,并为浮动动作按钮制作了一个页面,该页面显示了该动画在动画和其他位置(在下面进行了讨论)的不同位置和尺寸。

Reddit News Pro的第一张图片。Mark DiSciullo的第二张图片。

  1. 不要一直显示按钮

    有时,操作按钮不够重要,因此需要一直查看。在这种情况下,在滚动或向下滚动时将其隐藏可能是有意义的。如果您这样做以及如何这样做取决于内容和设计,那么对所有应用程序来说,没有一个答案是正确的。

    Google的更新指南显示了一种通过缩放整个内容而不是像下面的图片那样滑动按钮来使按钮动画化的版本。

图片来自浮动动作


8

可能有点简单,不是最优雅的解决方案,但是:在列表的末尾添加一个空的“虚拟”条目,以便用户可以滚动到比最后一个条目更远的位置。


1
由于Gmail应用程序使用它,因此可以将其视为“官方”解决方案。
Vicky Chijwani,2015年

1
另外,您可以将其称为“列表底部的填充”,而不是虚拟条目(如您所指出的那样,听起来不太雅致)。
Vicky Chijwani,2015年


2

在公认的答案中弹开“重新定位按钮”的想法,材料设计准则中的“ 滚动技术”部分可以实现该想法。

即,浮动操作按钮在内容和具有灵活空间的应用程序栏之间打破了边缘。滚动时:

灵活的空间会缩小,直到只剩下工具栏。滚动到页面顶部时,灵活空间会再次增长到位。

浮动动作按钮作为扩展的材料动画到屏幕上。

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
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.