【问题标题】:Android Support BottomSheetBehavior additional anchored stateAndroid 支持 BottomSheetBehavior 附加锚定状态
【发布时间】:2016-05-01 06:32:59
【问题描述】:

我一直在我的应用程序中使用AndroidSlidingUpPanel 库。使用自 23.1.1 以来的 Android 设计支持库版本,这破坏了我的布局中的一些内容。由于最新版本引入了BottomSheetBehavior,我希望替换 AndroidSlidingUpPanel 库并改用 BottomSheetBehavior。但是,BottomSheetBehavior 只有 3 个状态,隐藏、折叠和展开(以及 2 个中间状态拖动和沉降)。 AndroidSlidingUpPanel 还具有锚定状态,这是面板在折叠和展开之间捕捉到的状态。如何使用 BottomSheetBehavior 并获得这个额外的锚定状态?

例如,Google 的地图应用程序就有这种行为。

隐藏:

已折叠:

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

锚定:

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

扩展:

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

我的第一直觉是锚定状态实际上是展开状态,面板上方的空白区域仍然可见地图,是视图的透明部分。那么在锚定状态和展开状态之间的拖动只是滚动面板视图本身的内容。

这一点通过以下事实得到验证:在锚定状态下,您可以通过在面板上方滑动可见地图区域来继续向上滚动面板。从折叠状态向上滑动时,视图的这个不可见部分必须扩展到其区域(就像可选图像可见的那样),因为在折叠状态下无法从地图上向上滑动面板。我想我可以走这条路,但想看看是否有更好的方法。

【问题讨论】:

  • 您是否找到了解决在地图上滑动时出现视差效果的图像的解决方案?
  • @MiguelHincapieC 不,我没有。正如我目前拥有的那样,我只让它向上滑动到展开状态,部分向上滑动到屏幕上方,如上面的锚定位置。仍在努力完成视图以将更多内容扩展到全屏,并将视差效果合并到操作栏中。
  • 我猜图像向上滑动的视差效果使用带有负值的app:layout_collapseParallaxMultiplier
  • 当您尝试在锚点上方滑动时,您是否注意到谷歌地图中的行为?我的意思是,它不会移动地图,而是像 BottomSheetDialog 一样移动底部表 o_O'
  • 关于我的最后一条评论,无论是否是 Dialog,这种行为都有点奇怪,但你真正需要注意的是 minSdkVersion 如果你设置为 14 它让你像谷歌地图一样工作,例如,如果你设置为 17,如果你没有触摸底部表格,它就不会让你滚动。

标签: android android-support-library android-design-library bottom-sheet


【解决方案1】:

重大更新 因为有大约 4 或 5 个关于同一主题但有不同要求的问题,我试图回答所有问题。一个不礼貌的管理员删除/关闭了它们,让我为每个人创建一张票并更改它们以避免“复制粘贴”。我会给你一个full answer 的链接,在那里你可以找到关于如何获得像谷歌地图这样的完整行为的所有解释。


回答您的问题

我如何使用 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&lt;V&gt; from(V view)setState(可选)



我将添加那些修改后的方法和link to the example project

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() {.... 使用回调

这是它的样子
[]

【讨论】:

  • 谢谢,我会在实现最终状态时对此进行研究。不必复制/粘贴代码会很好。如果可以以某种方式进行子类化会更好,但可能需要在子类中不可见的代码。
  • 是的,我尝试子类化,但在 %$# 中很痛苦。现在我正在研究像谷歌地图这样的视差图像效果。
  • @JeffLockhart 我明白了!现在它使用图像视差效果和工具栏动画......我只是错过了当你继续向上滑动时工具栏的颜色:D
  • 您好,您觉得我的回答有帮助吗,还是需要更多帮助? :)
  • 好的,谢谢。我们仍在努力完成此行为的设计,之后我将能够在代码中完成它的实现。此信息很有帮助,谢谢。
【解决方案2】:

有一些简单的方法可以改变 BottomSheetBehavior 使用锚 FloatingActionButton

改变状态
<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);

            }
        }
    });

【讨论】:

    猜你喜欢
    • 2020-09-16
    • 2018-05-31
    • 1970-01-01
    • 2011-05-29
    • 2012-01-22
    • 1970-01-01
    • 1970-01-01
    • 2015-08-17
    • 2018-06-07
    相关资源
    最近更新 更多