1

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

在此处输入图像描述

如果您还没有尝试过该应用程序，那么了解我的意思的最佳方法是在此处查看。

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

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

我曾经使用基于 Cyrill Mottier 的这个 tuto这个tuto 和 Flavien Laurent 的这个 lib的源代码的解决方案来制作这种屏幕。但这些解决方案适用于ListViewsor ScrollViews，但（尚未）适应RecyclerView.

您对如何使这项工作有一些想法吗？

提前致谢，

维欧玛

4

1 回答 1

2

There's quite a bit going on when scrolling in in the My Movies screen (or in the Google Play Music app). Here's how thing basically work:

General Idea

  1. Create a simple colored view with your actionbar color behind your RecylcerView

  2. Add your tabs (or dummy tab, in your case) to the Toolbar container view.

  3. Add an OnScrollListener to your RecyclerView (the more difficult part). Use the dy (delta in y-direction) to parallax-scroll your colored view. If scrolling down, translate the toolbar container towards the top of the screen. If scolling up, show the toolbar container (unless it's already visible)

Code

In your 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>

In onCreate() of your MainActivity.java:

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

    });

Result

enter image description here

(I've left out little details like the toolbar shadow or the toolbar showing its full height if it wasn't fully hidden.)

Hope that helps!

PS: The title of your question is very specific. Maybe you should change it to something like "Hiding toolbar on recyclerview scroll like in Google Play/Play Music" so that this thread is easier to find ;)

于 2015-02-11T10:07:03.503 回答