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

Question

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

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

• 中间位置

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

优选地,app应该在这些位置之间捕捉.

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

两个主要问题是:

• 在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"/>

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

Answer 1

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

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

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

Answer 2

你在问题中提到的实际上并不是CollapsingToolbar一个可拉伸的东西BottomSheet.不幸的是,Android sdk还没有为我们提供任何东西(尽管谷歌已经在自己的应用程序中使用它们).

BottomSheet是一个Android组件,它从屏幕底部显示一个不允许的视图.BottomSheet可以是对话框和菜单的有用替代品,但可以保存任何视图,因此用例是无穷无尽的.此存储库包括BottomSheet组件本身,但还包括底部工作表中显示的一组公共视图组件.这些位于commons模块中.

另一方面,一些不错的家伙已经足够开发足够近的库并在GitHub上分享它们供我们使用.它们接近BottomSheetGoogle使用的组件.

与您想要的最匹配的是这个 - Flipbard/BottomSheet - 检查本页"Common Components"部分下的图像.(这一点的一个优点是Flipboard已经在生产中使用了一段时间,所以它经过了彻底的测试.)

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

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