在第一个状态下,当我们在最上面的页面上,还没有滚动时,我希望工具栏消耗如下所示(是的,我做到了):
在第二种状态下,当开始向下滚动时,图像和工具栏应该消失,如下所示(仅显示标签):
在最后一个状态,一旦我在列表中的某个点(但不是列表的顶部),我想开始向上滚动,一旦我开始滚动我想要的工具栏(而不是消耗的图像)到开始whowing,如下图所示(如果没有到达列表的顶部,图像将不会显示,只有工具栏):
我能够掌握第一个状态,但另外2个状态是有问题的,
一旦在CollapsingToolbarLayout中实现了一个工具栏,我可以在CollapsingToolbarLayout组件之外实现的可伸缩性并不清楚.
我无法使工具栏隐藏,如果我这样做,那么只有当我到达顶部才会显示.
无论如何,我当前的XML(如下所示)处于第一张图片被执行的状态,但一旦我开始向下滚动,工具栏保持在顶部,不要隐藏.注意:我必须告诉工具栏保持“pin”,因为如果我没有,那么工具栏中的信息就会消失,只有一个空的工具栏会显示(这是另一个帖子,但仍然有意思的是为什么会发生这种情况?) .
这是我当前的xml:
<android.support.design.widget.CoordinatorLayout android:id="@+id/benefit_coordinator_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_material_layout" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/main.collapsing" android:layout_width="match_parent" android:layout_height="wrap_content" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" > <include android:id="@+id/toolbar_search_container" layout="@layout/search_Box" android:layout_height="192dp" android:layout_width="match_parent" app:layout_collapseMode="parallax" /> <include android:id="@+id/toolbar_benefit" layout="@layout/toolbar_main" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:contentScrim="?attr/colorPrimary" /> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/benefit_tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primaryColor" app:tabIndicatorColor="@color/accentColor" app:tabSelectedTextColor="@android:color/white" app:tabTextColor="@android:color/black" app:tabIndicatorHeight="4dp" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/benefit_pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <include layout="@layout/floating_btn_benefits" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="16dp" /> </android.support.design.widget.CoordinatorLayou
解决方法
所以基本上解决方案是,使用以下属性更改组件CollapsingToolbarLayout:
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
并使用以下属性更改工具栏组件
android:minHeight="?attr/actionBarSize"
关于我的paralex效果图像(这是我的toolbar_search_container)我不应该添加任何layout_scrollFlags到它.
那为什么它工作?
要了解它,你需要知道什么是enterAlwaysCollapsed,
enterAlwaysCollapsed效果视图添加了minHeight属性.这意味着,具有minHeight的CollapsingToolbarLayout的每个孩子都将受到此属性的影响.
所以我的工具栏会受到影响.
enterAlwaysCollapsed attrubute定义简单单词:
假设enterAlways被声明,并指定了一个minHeight,你也可以指定enterAlwaysCollapsed.当使用此设置时,您的视图将仅显示在此最小高度.只有当滚动到达顶部时,视图才能扩展到其完整高度…“
那么这不是我们想要的吗? (不要回答这个retorical问题))
另外还有一件事情是,paralexed组件(toolbar_search_container)取决于要扩展的收费栏,因为工具栏只有到达顶部时才会扩展,所以这一切都是非常棒的!
新的代码是:
<android.support.design.widget.CoordinatorLayout android:id="@+id/benefit_coordinator_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_material_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/main.collapsing" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" > <include android:id="@+id/toolbar_search_container" layout="@layout/search_Box" android:layout_height="192dp" android:layout_width="match_parent" app:layout_collapseMode="parallax" /> <include android:id="@+id/toolbar_benefit" layout="@layout/toolbar_main" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:minHeight="?attr/actionBarSize" app:contentScrim="?attr/colorPrimary" app:layout_collapseMode="pin" android:fitsSystemWindows="true" /> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/benefit_tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primaryColor" app:tabIndicatorColor="@color/accentColor" app:tabSelectedTextColor="@android:color/white" app:tabTextColor="@android:color/black" app:tabIndicatorHeight="4dp" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/benefit_pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <include layout="@layout/floating_btn_benefits" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="16dp" /> </android.support.design.widget.CoordinatorLayout>