使用自定义行为为CollapsingToolbar创建多个"锚点" /位置

时间:2015-12-21 14:57:39

标签: android android-layout

我正在尝试使用与搜索着陆页中的Google地图应用类似的折叠工具栏。也就是说,有三个"锚点"或职位。取代地图,我会有一张照片。

  • 工具栏已折叠(内容为全屏)

Fullscreen

  • 中间位置

Half way

  • 扩展了工具栏,只显示了一些内容(持久性底部工作表)

All the way open

最好,应用程序应在这些位置之间快照

截至目前,我的布局基本上正常。

两个主要问题是:

  • 在NestedScrollView内部投掷无法正常工作。即使它使用app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior",它也会停止/排除。我相信这是AppBarLayout
  • 的错误
  • 上述锚点未实施。

这是我的布局:

请注意,app:layout_behavior="@string/appbar_anchor_behavior">只是AppBarLayout.Behavior

的未经修改的子类
<android.support.design.widget.CoordinatorLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/main_content"                                                         
 android:layout_width="match_parent"                                               
 android:layout_height="match_parent"                                                           
 android:background="@color/actions_bar_dark"                                                 
 android:fitsSystemWindows="true">


<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_anchor_behavior">

    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll"
            android:fitsSystemWindows="true">

        <ImageView
                android:id="@+id/item_preview_thumb"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:layout_centerInParent="true"
                app:layout_collapseMode="parallax"
                />

        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
        android:id="@+id/contentRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <include layout="@layout/item_detail_content"/>


</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_download"
        android:layout_margin="16dp"
        android:clickable="true"/>

如何使用自定义行为实现此目的?

4 个答案:

答案 0 :(得分:8)

根据您想要实现的目标,您可能想尝试SlidingUpPanelLayout(可以在Github找到)。它拥有您似乎需要的一切:

  • 锚定:为了获得您描述的锚点,您必须设置umanoAnchorPoint属性(基于百分比),或者 - 如果您需要更复杂的锚点计算,例如取决于ImageView高度 - 使用setAnchorPoint方法。
  • Persistant:与上面提到的BottomSheets不同,这种布局实际上是持久的。折叠时面板的高度可以使用umanoPanelHeight属性或setPanelHeight方法进行自定义。
  • Parallax:不确定实施是否符合您的需求,如果您需要,但它确实有基本的视差支持。

您可以在上面链接的Github自述文件中找到更多信息。

答案 1 :(得分:5)

您在问题中提到的内容实际上不是CollapsingToolbar,而是可伸展的BottomSheet。不幸的是,Android sdk还没有为我们提供任何东西(尽管谷歌已经在自己的应用程序中使用它们了。)

  

BottomSheet是一个Android组件,它提供了一个可以忽略的视图   从屏幕的底部。 BottomSheet可以是一个有用的替代品   对于对话框和菜单,但可以保存任何视图,以便用例   层出不穷。此存储库包含BottomSheet组件本身但是   还包括一组底部显示的常见视图组件   片。它们位于commons模块中。

另一方面,一些不错的家伙已经非常友好地开发足够近的库并在GitHub上分享它们供我们使用。它们接近Google使用的BottomSheet组件。

与您想要的最匹配的是这一个 - Flipbard/BottomSheet - 检查此页面上“公共组件”部分下的图像。 (其中一个优点是Flipboard已经在生产中使用了一段时间,因此经过全面测试。)

这是另一个最小的BottomSheet库 - soarcn/BottomSheet,但它只允许可点击的图标。您可以获得源并根据您的需要进行自定义。但是,Flipboard中的第一个是更接近的匹配,因为它可以容纳任何类型的视图,并且更加可定制。

按照以上两个GitHub链接查看示例,设置说明和源代码。

答案 2 :(得分:2)

我不是专家,但请在Github上查看此实现。使用修改后的Android SlidingUpPanel。实现Foursquare就像地图animation.it可能对你有所帮助。

答案 3 :(得分:2)

更新: Look at this answer if you are looking for all google maps behaviors

回答你的问题

  

如何使用自定义行为实现此目的? /使用自定义行为创建多个“锚点”/位置......

Google地图使用的是app:layout_behavior中的BottomSheetBehavior,以显示以折叠模式启动的内容。它不是崩溃的地图,谷歌地图有一个背景图像/工具栏,具有一些视差效果。

您可以通过以下步骤实现您想要修改默认BottomSheetBehavior以增加一个属性的内容:

  1. 创建一个Java类并从CoordinatorLayout.Behavior<V>
  2. 扩展它
  3. 将粘贴代码从默认BottomSheetBehavior文件复制到新文件。
  4. 使用以下代码修改方法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);
    }
    
  5. 添加新状态

    public static final int STATE_ANCHOR_POINT = X;

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



  7. 我将添加修改后的方法和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() {....

    进行回调

    我当时正在处理图像视差效果和工具栏。

    以下是它的外观:
    [CustomBottomSheetBehavior]