在折叠工具栏布局上将 RecyclerView 锚定得更高
Anchor a RecyclerView little higher on a Collapsing Toolbar Layout
-
android
-
material-design
-
android-recyclerview
-
android-coordinatorlayout
-
android-collapsingtoolbarlayout
是否可以将 RecyclerView 锚定在比其通常位置稍高一点的位置,就像大多数可折叠视图上的 FAB 图标一样(有关预期结果,请参见图 1)。
图片 1
我尝试了以下代码,但没有给出预期的结果(当前结果请参见图 2)
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
app:expanded="true">
<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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/bannerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="@drawable/starter_screen_bg"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/categories"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:gravity="center"
>
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
图 2
添加app:layout_behavior="@string/appbar_scrolling_view_behavior"
将回收视图附加到可折叠视图,然后忽略添加边距底部。
但是删除它会得到预期的结果,但是滚动视图不会按预期运行(没有视差效果)并且在背景图像滚动后滚动。
所以可以像第一张图一样实现折叠视图。
这实际上很容易实现 - 每个具有 app:layout_behavior="@string/appbar_scrolling_view_behavior"
的视图都有一个 behavior_overlapTop
属性。所以你需要做的就是将这个 属性 设置为你的 RecyclerView
:
<android.support.v7.widget.RecyclerView
android:id="@+id/categories"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:behavior_overlapTop="64dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:gravity="center"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
app:expanded="true">
<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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/bannerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="@drawable/starter_screen_bg"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/categories"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:behavior_overlapTop="?actionBarSize" // Changed Here only
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:gravity="center" />
</android.support.design.widget.CoordinatorLayout>
android
material-design
android-recyclerview
android-coordinatorlayout
android-collapsingtoolbarlayout
是否可以将 RecyclerView 锚定在比其通常位置稍高一点的位置,就像大多数可折叠视图上的 FAB 图标一样(有关预期结果,请参见图 1)。
图片 1
我尝试了以下代码,但没有给出预期的结果(当前结果请参见图 2)
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
app:expanded="true">
<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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/bannerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="@drawable/starter_screen_bg"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/categories"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:gravity="center"
>
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
图 2
添加app:layout_behavior="@string/appbar_scrolling_view_behavior"
将回收视图附加到可折叠视图,然后忽略添加边距底部。
但是删除它会得到预期的结果,但是滚动视图不会按预期运行(没有视差效果)并且在背景图像滚动后滚动。
所以可以像第一张图一样实现折叠视图。
这实际上很容易实现 - 每个具有 app:layout_behavior="@string/appbar_scrolling_view_behavior"
的视图都有一个 behavior_overlapTop
属性。所以你需要做的就是将这个 属性 设置为你的 RecyclerView
:
<android.support.v7.widget.RecyclerView
android:id="@+id/categories"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:behavior_overlapTop="64dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:gravity="center"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
app:expanded="true">
<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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/bannerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="@drawable/starter_screen_bg"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/categories"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:behavior_overlapTop="?actionBarSize" // Changed Here only
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:gravity="center" />
</android.support.design.widget.CoordinatorLayout>