1. StackOverflow 文件
  2. Android 教程
  3. 底部表格
  4. 像 Google 地圖一樣的 BottomSheetBehavior

像 Google 地圖一樣的 BottomSheetBehavior

Created: November-22, 2018

Version >= 2.1.x

此示例取決於支援庫 23.4.0。+。

BottomSheetBehavior 的特點是：

  1. 兩個帶有動畫的工具欄，可響應底部的紙張移動。
  2. 當 FAB 靠近模態工具欄（當你向上滑動時出現的那個）時隱藏的 FAB。
  3. 底部背後的背景影象與某種視差效果。
  4. 工具欄中的標題（TextView）在底部工作表到達時顯示。
  5. 通知 satus 欄可以將其背景變為透明或全綵。
  6. 具有錨狀態的自定義底部表單行為。

現在讓我們逐一檢查它們：

工具欄
當你在谷歌地圖中開啟該檢視時，你可以看到一個工具欄，你可以在其中搜尋，這是我唯一一個與谷歌地圖完全不同的工具欄，因為我想更加通用。無論如何，ToolBar 在 AppBarLayout 中，當你開始拖動 BottomSheet 時它被隱藏，當 BottomSheet 到達 COLLAPSED 狀態時它再次出現。
要實現它，你需要：

  • 建立一個 Behavior 並從 AppBarLayout.ScrollingViewBehavior 擴充套件它
  • 覆蓋 layoutDependsOn 和 onDependentViewChanged 方法。這樣做你將聽取 bottomSheet 的動作。
  • 建立一些方法來隱藏和取消隱藏帶有動畫的 AppBarLayout / ToolBar。

這是我為第一個工具欄或 ActionBar 做的方式：

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    return dependency instanceof NestedScrollView;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
                                      View dependency) {

    if (mChild == null) {
        initValues(child, dependency);
        return false;
    }

    float dVerticalScroll = dependency.getY() - mPreviousY;
    mPreviousY = dependency.getY();

    //going up
    if (dVerticalScroll <= 0 && !hidden) {
        dismissAppBar(child);
        return true;
    }

    return false;
}

private void initValues(final View child, View dependency) {

    mChild = child;
    mInitialY = child.getY();

    BottomSheetBehaviorGoogleMapsLike bottomSheetBehavior = BottomSheetBehaviorGoogleMapsLike.from(dependency);
    bottomSheetBehavior.addBottomSheetCallback(new BottomSheetBehaviorGoogleMapsLike.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, @BottomSheetBehaviorGoogleMapsLike.State int newState) {
            if (newState == BottomSheetBehaviorGoogleMapsLike.STATE_COLLAPSED ||
                    newState == BottomSheetBehaviorGoogleMapsLike.STATE_HIDDEN)
                showAppBar(child);
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {

        }
    });
}

private void dismissAppBar(View child){
    hidden = true;
    AppBarLayout appBarLayout = (AppBarLayout)child;
    mToolbarAnimation = appBarLayout.animate().setDuration(mContext.getResources().getInteger(android.R.integer.config_shortAnimTime));
    mToolbarAnimation.y(-(mChild.getHeight()+25)).start();
}

private void showAppBar(View child) {
    hidden = false;
    AppBarLayout appBarLayout = (AppBarLayout)child;
    mToolbarAnimation = appBarLayout.animate().setDuration(mContext.getResources().getInteger(android.R.integer.config_mediumAnimTime));
    mToolbarAnimation.y(mInitialY).start();
}

如果需要，這是完整的檔案

第二個工具欄或模態工具欄：
你必須覆蓋相同的方法，但在這個方法中你必須處理更多行為：

  • 用動畫顯示/隱藏工具欄
  • 更改狀態列顏色/背景
  • 在 ToolBar 中顯示/隱藏 BottomSheet 標題
  • 關閉 bottomSheet 或將其傳送到摺疊狀態

這個的程式碼有點廣泛，所以我會讓連結

FAB

這也是一種自定義行為，但是從 FloatingActionButton.Behavior 延伸出來。在 onDependentViewChanged 中，你必須看到它到達 offSet 或你要隱藏它的位置。在我的情況下，當它靠近第二個工具欄時我想要隱藏它，所以我深入研究 FAB 父（CoordinatorLayout）尋找包含 ToolBar 的 AppBarLayout，然後我使用像 OffSet 這樣的 ToolBar 位置：

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {

    if (offset == 0)
        setOffsetValue(parent);

    if (dependency.getY() <=0)
        return false;

    if (child.getY() <= (offset + child.getHeight()) && child.getVisibility() == View.VISIBLE)
        child.hide();
    else if (child.getY() > offset && child.getVisibility() != View.VISIBLE)
        child.show();

    return false;
}

完成自定義 FAB 行為連結

具有視差效果的 BottomSheet 背後的影象 ：
與其他影象一樣，它是一種自定義行為，這一項中唯一複雜的東西是保持影象錨定到 BottomSheet 的小演算法，並避免影象崩潰，如預設視差效果：

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
                                      View dependency) {

    if (mYmultiplier == 0) {
        initValues(child, dependency);
        return true;
    }

    float dVerticalScroll = dependency.getY() - mPreviousY;
    mPreviousY = dependency.getY();

    //going up
    if (dVerticalScroll <= 0 && child.getY() <= 0) {
        child.setY(0);
        return true;
    }

    //going down
    if (dVerticalScroll >= 0 && dependency.getY() <= mImageHeight)
        return false;

    child.setY( (int)(child.getY() + (dVerticalScroll * mYmultiplier) ) );

    return true;
}

具有視差效果的背景影象的完整檔案

現在結束： 自定義 BottomSheet 行為
要實現 3 個步驟，首先你需要了解預設 BottomSheetBehavior 有 5 個狀態：STATE_DRAGGING, STATE_SETTLING, STATE_EXPANDED, STATE_COLLAPSED, STATE_HIDDEN 和 Google Maps 行為，你需要在摺疊和展開之間新增中間狀態：STATE_ANCHOR_POINT。
我試圖擴充套件預設的 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);
}

  4. 新增新狀態

    public static final int STATE_ANCHOR_POINT = X;

  5. 修改下一個方法：onLayoutChild，onStopNestedScroll，BottomSheetBehavior<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;
}

連結到整個專案 ，你可以在其中檢視所有自定義行為

這就是它的樣子：
[ CustomBottomSheetBehavior ]