Android支持BottomSheetBehavior的额外锚定状态

8
我一直在我的应用中使用AndroidSlidingUpPanel库。自从Android Design Support Library 23.1.1版本以来,这破坏了我的布局的某些部分。由于最新版本引入了BottomSheetBehavior,我想替换AndroidSlidingUpPanel库并改用BottomSheetBehavior。但是,BottomSheetBehavior只有3个状态:隐藏、折叠和展开(以及2个中间状态:拖动和解决)。AndroidSlidingUpPanel还具有锚定状态,这是面板在折叠和展开之间捕捉的状态。我如何使用BottomSheetBehavior并获得此额外的锚定状态?例如,Google的地图应用程序具有此行为。

隐藏:

折叠:

拖动(在折叠和锚定之间):

固定的:

拖动(在锚定和展开之间):

扩展:

有一些视差效果,当位置具有这些效果时,可选图像会在锚定状态下向上滑动到地图上方。并且在完全展开时,位置名称将成为操作栏标题。我最终也对实现类似的东西感兴趣。

我的第一反应是,锚定状态实际上是扩展状态,面板上方的空白空间(其中地图仍然可见)是视图的透明部分。然后,在锚定和扩展状态之间拖动只是滚动面板视图本身的内容。

事实证明,当处于锚定状态时,您可以通过滑动面板上方可见的地图区域来继续向上滚动面板。尽管无法从地图中滑动面板以使其上升到折叠状态,但是从折叠状态开始向上滑动时,此视图的不可见部分必须扩展到其区域(如可选图像所示)。我想我可以走这条路线,但想看看是否有更好的方法。


你找到了图片视差效果向上滑动覆盖地图的解决方案了吗? - MiguelHincapieC
@MiguelHincapieC 没有,目前我只能将其滑动到展开状态,位于屏幕上方的固定位置。 我仍在努力完善视图,以使更多内容扩展到全屏并与操作栏融合出现视差效果。 - Jeff Lockhart
我猜测图像向上滑动的视差效果使用app:layout_collapseParallaxMultiplier并且值为负数。 - MiguelHincapieC
你有没有注意到在谷歌地图中,当你尝试在锚定点上方滑动时的行为?我的意思是,它不会移动地图,而是像BottomSheetDialog一样移动底部表格 o_O' - MiguelHincapieC
关于我上一条评论,无论是对话框还是其他情况,那种行为都有些奇怪。但你真正需要注意的是minSdkVersion,如果你将其设置为14,它会让你像谷歌地图一样工作;如果你将其设置为17,例如,如果你没有在底部表格内触摸,它就不会让你滚动。 - MiguelHincapieC
同样的事情也发生在 :23.2.0:23.4.0 上,这是怎么回事... - MiguelHincapieC
2个回答

18

重要更新

由于有4或5个关于同一主题但具有不同要求的问题,我尝试回答了所有这些问题。一个不礼貌的管理员删除/关闭了它们,迫使我为每个问题创建一个票,并更改它们以避免“复制粘贴”。您可以在完整答案中找到有关如何获得与Google Maps完全相似行为的所有解释。

回答你的问题

我如何使用BottomSheetBehavior并获得附加的锚定状态?

您可以通过修改默认的BottomSheetBehavior来添加一个额外的状态,按照以下步骤操作:

  1. 创建一个Java类并将其扩展自CoordinatorLayout.Behavior<V>
  2. 将默认的BottomSheetBehavior 文件中的代码复制粘贴到您的新文件中。
  3. 使用以下代码修改方法clampViewPositionVertical
    @Override
    public int clampViewPositionVertical(View child, int top, int dy) {
        return constrain(top, mMinOffset, mHideable ? mParentHeight : mMaxOffset);
    }

    int constrain(int amount, int low, int high) {
        return amount < low ? low : (amount > high ? high : amount);
    }
  1. 添加一个新状态

    public static final int STATE_ANCHOR_POINT = X;

  2. 修改以下方法:onLayoutChildonStopNestedScrollBottomSheetBehavior<V> from(V view)setState(可选)



我将添加这些修改后的方法和一个示例项目链接

public boolean onLayoutChild(CoordinatorLayout parent, V child, int layoutDirection) {
    // First let the parent lay it out
    if (mState != STATE_DRAGGING && mState != STATE_SETTLING) {
        if (ViewCompat.getFitsSystemWindows(parent) &&
                !ViewCompat.getFitsSystemWindows(child)) {
            ViewCompat.setFitsSystemWindows(child, true);
        }
        parent.onLayoutChild(child, layoutDirection);
    }
    // Offset the bottom sheet
    mParentHeight = parent.getHeight();
    mMinOffset = Math.max(0, mParentHeight - child.getHeight());
    mMaxOffset = Math.max(mParentHeight - mPeekHeight, mMinOffset);

    //if (mState == STATE_EXPANDED) {
    //    ViewCompat.offsetTopAndBottom(child, mMinOffset);
    //} else if (mHideable && mState == STATE_HIDDEN...
    if (mState == STATE_ANCHOR_POINT) {
        ViewCompat.offsetTopAndBottom(child, mAnchorPoint);
    } else if (mState == STATE_EXPANDED) {
        ViewCompat.offsetTopAndBottom(child, mMinOffset);
    } else if (mHideable && mState == STATE_HIDDEN) {
        ViewCompat.offsetTopAndBottom(child, mParentHeight);
    } else if (mState == STATE_COLLAPSED) {
        ViewCompat.offsetTopAndBottom(child, mMaxOffset);
    }
    if (mViewDragHelper == null) {
        mViewDragHelper = ViewDragHelper.create(parent, mDragCallback);
    }
    mViewRef = new WeakReference<>(child);
    mNestedScrollingChildRef = new WeakReference<>(findScrollingChild(child));
    return true;
}


public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, V child, View target) {
    if (child.getTop() == mMinOffset) {
        setStateInternal(STATE_EXPANDED);
        return;
    }
    if (target != mNestedScrollingChildRef.get() || !mNestedScrolled) {
        return;
    }
    int top;
    int targetState;
    if (mLastNestedScrollDy > 0) {
        //top = mMinOffset;
        //targetState = STATE_EXPANDED;
        int currentTop = child.getTop();
        if (currentTop > mAnchorPoint) {
            top = mAnchorPoint;
            targetState = STATE_ANCHOR_POINT;
        }
        else {
            top = mMinOffset;
            targetState = STATE_EXPANDED;
        }
    } else if (mHideable && shouldHide(child, getYVelocity())) {
        top = mParentHeight;
        targetState = STATE_HIDDEN;
    } else if (mLastNestedScrollDy == 0) {
        int currentTop = child.getTop();
        if (Math.abs(currentTop - mMinOffset) < Math.abs(currentTop - mMaxOffset)) {
            top = mMinOffset;
            targetState = STATE_EXPANDED;
        } else {
            top = mMaxOffset;
            targetState = STATE_COLLAPSED;
        }
    } else {
        //top = mMaxOffset;
        //targetState = STATE_COLLAPSED;
        int currentTop = child.getTop();
        if (currentTop > mAnchorPoint) {
            top = mMaxOffset;
            targetState = STATE_COLLAPSED;
        }
        else {
            top = mAnchorPoint;
            targetState = STATE_ANCHOR_POINT;
        }
    }
    if (mViewDragHelper.smoothSlideViewTo(child, child.getLeft(), top)) {
        setStateInternal(STATE_SETTLING);
        ViewCompat.postOnAnimation(child, new SettleRunnable(child, targetState));
    } else {
        setStateInternal(targetState);
    }
    mNestedScrolled = false;
}

public final void setState(@State int state) {
    if (state == mState) {
        return;
    }
    if (mViewRef == null) {
        // The view is not laid out yet; modify mState and let onLayoutChild handle it later
        /**
         * New behavior (added: state == STATE_ANCHOR_POINT ||)
         */
        if (state == STATE_COLLAPSED || state == STATE_EXPANDED ||
                state == STATE_ANCHOR_POINT ||
                (mHideable && state == STATE_HIDDEN)) {
            mState = state;
        }
        return;
    }
    V child = mViewRef.get();
    if (child == null) {
        return;
    }
    int top;
    if (state == STATE_COLLAPSED) {
        top = mMaxOffset;
    } else if (state == STATE_ANCHOR_POINT) {
        top = mAnchorPoint;
    } else if (state == STATE_EXPANDED) {
        top = mMinOffset;
    } else if (mHideable && state == STATE_HIDDEN) {
        top = mParentHeight;
    } else {
        throw new IllegalArgumentException("Illegal state argument: " + state);
    }
    setStateInternal(STATE_SETTLING);
    if (mViewDragHelper.smoothSlideViewTo(child, child.getLeft(), top)) {
        ViewCompat.postOnAnimation(child, new SettleRunnable(child, state));
    }
}


public static <V extends View> BottomSheetBehaviorGoogleMapsLike<V> from(V view) {
    ViewGroup.LayoutParams params = view.getLayoutParams();
    if (!(params instanceof CoordinatorLayout.LayoutParams)) {
        throw new IllegalArgumentException("The view is not a child of CoordinatorLayout");
    }
    CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) params)
            .getBehavior();
    if (!(behavior instanceof BottomSheetBehaviorGoogleMapsLike)) {
        throw new IllegalArgumentException(
                "The view is not associated with BottomSheetBehaviorGoogleMapsLike");
    }
    return (BottomSheetBehaviorGoogleMapsLike<V>) behavior;
}

你甚至可以使用回调函数与 behavior.setBottomSheetCallback(new BottomSheetBehaviorGoogleMapsLike.BottomSheetCallback() {....

以下是它的外观
[CustomBottomSheetBehavior]


1
谢谢,当我开始实现最终状态时,我会研究一下这个。不用复制/粘贴代码会很好。如果有可能以某种方式进行子类化会更好,但可能需要在子类中看不到的代码。 - Jeff Lockhart
@MiguelHincapieC 我已经克隆了你的repo,并正在努力解决类似的问题。然而,我需要我的视图使用bottomsheetbehavior是一个LinearLayout,并且内部包含一个NestedScrollView。但是,当我这样做时,onStopNestedScroll从未被调用,因此锚定状态永远不会被触发。你有什么想法吗? - kjanderson2
嗨@kjanderson2,使用LinearLayout不应该有问题。您在定义行为时是否检查了XML? - MiguelHincapieC
@MiguelHincapieC 我试过了,但它没有起作用。然而,我通过重新排列我的布局来解决了这个问题。现在我遇到的问题是,当抽屉处于锚定位置时,仍然可以通过从底板上方的区域拖动来拖动它。因此,我无法与我的底部表格下面的视图交互,因为该表格当前没有占据的区域(在锚点和扩展之间)仍然可以拖动。你有这方面的经验吗?你有任何修复的想法吗? - kjanderson2
@kjanderson2,我不是很理解问题,你能分享一下行为的gif吗? - MiguelHincapieC
显示剩余5条评论

1
有一些简单的方法可以使用锚点 FloatingActionButton 更改 BottomSheetBehavior 的状态。
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

  <android.support.v7.widget.CardView
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:behavior_hideable="false"
    app:behavior_peekHeight="44dp"
    app:cardCornerRadius="0dp"
    app:cardElevation="5dp"
    app:layout_behavior="@string/bottom_sheet_behavior">

</android.support.v7.widget.CardView>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/request_show_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:src="@drawable/fab_requests"
    app:layout_anchor="@id/bottom_sheet"
    app:layout_anchorGravity="top|end" />

现在,您可以点击 FloatingActionButton 来更改状态。
bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet);

    request_show_fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            } else {
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

            }
        }
    });

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接