[英]How to hide toolbar after collapsing while recyclerView scrolling down
How to hide toolbar after collapsing while recyclerView scrolling down, show toolbar when recyclerView scrolling up, and expand CollapsingToolbarLayout at the end of list? 如何在recyclelerView向下滚动时折叠后隐藏工具栏,在recyclelerView向上滚动时显示工具栏,并在列表末尾展开CollapsingToolbarLayout? Now CollapsingToolbarLayout just collapse, and toolbar is showing all time when scrolling.
现在,CollapsingToolbarLayout只会崩溃,工具栏会在滚动时显示所有时间。
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".screens.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="@dimen/actionBarHeight"
app:contentScrim="@color/colorPrimary"
app:expandedTitleTextAppearance="@style/TransparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="180dp"
android:adjustViewBounds="true"
android:background="#229944"
android:contentDescription="@null"
android:scaleType="fitCenter"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/actionBarHeight"
android:minHeight="@dimen/actionBarHeight"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
This should work perfectly. 这应该完美。 Tested and working in API 17
在API 17中测试并使用
<android.support.design.widget.CoordinatorLayout
android:id="@+id/careers_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".activity.CareersActivity"
xmlns:tools="http://schemas.android.com/tools">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="@+id/background"
android:layout_width="match_parent"
android:layout_height="256dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:src="@drawable/placeholder"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:titleTextColor="@color/main_color_white"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@android:color/white"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
You may want to change the behaviour of the Toolbar. 您可能想要更改工具栏的行为。 You can provide scroll behaviour by changing layout_scrollFlags.
您可以通过更改layout_scrollFlags来提供滚动行为。
app:layout_scrollFlags="scroll|enterAlways"
Remove pin
and make this change in your Toolbar and it would work! 删除
pin
并在工具栏中进行此更改,它将起作用!
android:fitsSystemWindows="true"
in CoordinatorLayout
. CoordinatorLayout
添加android:fitsSystemWindows="true"
。 app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
from Toolbar
. Toolbar
删除app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
。 Move TabLayout
inside CollapsingToolbarLayout
. 在
CollapsingToolbarLayout
移动TabLayout
。
<android.support.design.widget.AppBarLayout android:id="@+id/appbarlayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:minHeight="@dimen/actionBarHeight" app:contentScrim="@color/colorPrimary" app:expandedTitleTextAppearance="@style/TransparentText" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/toolbar_image" android:layout_width="match_parent" android:layout_height="180dp" android:adjustViewBounds="true" android:background="#229944" android:contentDescription="@null" android:scaleType="fitCenter"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="@dimen/actionBarHeight" android:minHeight="@dimen/actionBarHeight" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" app:layout_scrollFlags="scroll" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
For CollapsingToolbarLayout
use scroll flags: 对于
CollapsingToolbarLayout
使用滚动标志:
app:layout_scrollFlags="scroll|enterAllwaysCollapsed"
this flag combination will disappear toolbar while scrolling down. 滚动时,此标志组合将消失工具栏。 And
CollapsingToolbarLayout
will expand fully when you scroll to top of the list. 滚动到列表顶部时,
CollapsingToolbarLayout
将完全展开。
And no need to remove app:layout_collapseMode="pin"
from Toolbar
, because collapseMode
flags are to define behavior and placement of views inside CollapsingToolbarLayout
and will not effect actual collapsing and expansion of CollapsingToolbarLayout
. 而无需取下
app:layout_collapseMode="pin"
,从Toolbar
,因为collapseMode
标志定义内的行为和观点安置CollapsingToolbarLayout
并不会影响实际的塌陷和扩张CollapsingToolbarLayout
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.