Question

我想从新的GPlay电影素材版本中实现该屏幕：

enter image description here

如果你还没有尝试过该应用，那么查看我的意思的最好方法就是检查它here。

所以我有一个RecyclerView加上一个GridLayoutManager的网格。我想到了为网格添加红色背景的标题视图。请注意，我还想在此标题视图上添加与电影应用相同的视差效果。

目前，我并不需要标签的支持（我想让它与RecyclerView一起使用，而不是ViewPager）。

我曾经使用Cyrill Mottier提供的基于此tuto this tuto的解决方案以及Flavien Laurent的this lib源代码来制作此类屏幕。但这些解决方案适用于ListViews或ScrollViews，但尚未适应RecyclerView。

你对如何使这项工作有所了解吗？

提前致谢，

VieuMa

Answer 1

在“我的电影”屏幕（或Google Play音乐应用）中滚动时，会有相当多的事情发生。这是基本的工作方式：

一般理念

使用RecylcerView
将标签（或您的案例中的虚拟标签）添加到Toolbar容器视图。
向OnScrollListener添加RecyclerView（更难处理的部分）。使用dy（y方向的delta）来视差滚动您的彩色视图。如果向下滚动，请翻译工具栏容器朝向屏幕顶部。如果 scolling 向上，显示工具栏容器（除非它已经可见）

代码

在 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();
        }

    });

结果

enter image description here

（如果它没有被完全隐藏，我还遗漏了工具栏阴影或显示其全高的工具栏等小细节。）

希望有所帮助！

PS：你问题的标题非常具体。也许你应该把它改成像＃34;像在Google Play / Play Music＆＃34;中那样隐藏在recyclerview滚动上的工具栏。这样该线程更容易找到;）

Android 5.0 - 实施Google Play电影资料设计＆＃34;我的电影＆＃34;屏幕

1 个答案:

一般理念

代码

结果