Android 5.0 - 实现 Google Play 电影 Material 设计 "My movies"屏幕

Question

我想从新的 GPlay 电影 Material 版本中实现该屏幕:

如果您还没有尝试过该应用程序，了解我的意思的最好方法是检查它 here .

所以我有一个 RecyclerView 和一个用于网格的 GridLayoutManager。我考虑过在网格中添加一个带有红色背景的标题 View 。请注意，我还想在此标题 View 上添加与电影应用程序相同的视差效果。

现在，我真的不需要标签的支持(我想让它与 RecyclerView 一起工作，而不是 ViewPager)。

我曾经使用基于此教程的解决方案来制作这种屏幕 this tuto Cyrill Mottier 和 this lib 的源代码弗拉维安·洛朗 (Flavien Laurent)。但是这些解决方案适用于 ListViews 或 ScrollViews，但(尚未)适用于 RecyclerView。

您对如何进行这项工作有什么想法吗？

提前致谢

越南

Answer 1

在“我的电影”屏幕(或 Google Play 音乐应用程序)中滚动时会发生很多事情。下面是它的基本工作原理:

总体思路

1. 使用 RecylcerView

   后面的操作栏颜色创建一个简单的彩色 View

2. 将您的选项卡(或虚拟选项卡，在您的情况下)添加到 Toolbar 容器 View 。

3. 将 OnScrollListener 添加到您的 RecyclerView(比较困难的部分)。使用 dy(y 方向的增量)来视差滚动你的彩色 View 。如果向下滚动，翻译屏幕顶部的工具栏容器。如果骂向上，显示工具栏容器(除非它已经可见)

代码

在您的activity.xml中:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <!-- Actual content (could also be in a fragment -->
    <View
    android:id="@+id/coloredView"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="#CC0000" />


    <android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginRight="12dp"
    android:layout_marginLeft="12dp"
    android:paddingTop="120dp"
    android:clipToPadding="false" />

    <!-- Toolbar (container)  -->
    <LinearLayout
    android:id="@+id/toolbar_container"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar

        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:layout_gravity="top"
        android:gravity="center_vertical"
        android:background="#CC0000"
        android:minHeight="0dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        style="@style/Toolbar" />

    <!-- Fake tab ;) -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:text="Dummy tab"
        android:background="#CC0000"
        android:padding="16dp"
        android:textAllCaps="true"
        android:textColor="#fff" />
    </LinearLayout>
</FrameLayout>

在 MainActivity.java 的 onCreate() 中:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Init your recyclerview here.

    final View toolbarContainer = findViewById(R.id.toolbar_container);
    final View coloredView = findViewById(R.id.coloredView);

    recyclerView.setOnScrollListener(new RecyclerView.OnScrollListener() {

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            if (dy < 0) {
                onScrollUp(dy);
            } else {
                onScrollDown(dy);
            }
        }

        private void onScrollDown(int dy) {
            coloredView.setTranslationY(coloredView.getTranslationY() - dy / 3);
            toolbarContainer.setTranslationY(toolbarContainer.getTranslationY() - dy);
        }

        private void onScrollUp(int dy) {
            coloredView.setTranslationY(coloredView.getTranslationY() - dy / 3);

            if (toolbarContainer.getTranslationY() < 0) {
                showToolbar();
            }
        }

        private void showToolbar() {
            toolbarContainer.animate()
                    .translationY(0)
                    .setDuration(200)
                    .setInterpolator(new DecelerateInterpolator())
                    .start();
        }

    });

结果

(我遗漏了一些细节，例如工具栏阴影或工具栏在未完全隐藏时显示其完整高度。)

希望对您有所帮助!

PS:你的问题标题很具体。也许您应该将其更改为类似“在 Recyclerview 滚动条上隐藏工具栏，就像在 Google Play/Play 音乐中一样”，以便更容易找到该线程；)