类似于Google Play音乐“播放器”的ViewPager转换

Question

我想模仿Play Music应用程序播放器界面中看到的ViewPager转换动画。它看起来像这样。现在，那种缩放/淡入动画可以通过自定义PageTransformer轻松完成，如此处所述，困难的部分只是包含歌曲信息等内容的顶部栏。这个栏目就像普通的ViewPager一样滑动。

对我来说，谷歌似乎正在以某种方式结合两个PageTransformers来处理布局的不同部分（1. 顶部栏，2. 封面艺术）。我不知道如何做到这一点，也不确定是否可能。开发人员可能采取的另一种方法是使用两个ViewPagers。一个用于歌曲信息栏，另一个用于封面艺术，然后共享触摸事件以同时滑动/动画。但是，这听起来有点不方便，而且会使用大量CPU。

有什么建议吗？

- Jakob Harteg

---

你看过这个指南了吗？它解释了如何自定义ViewPager的转换。 - Xaver Kapeller

现在我有了，但这并没有真正解决两个不同动画的悖论（可以这么说）。不过还是谢谢。 - Jakob Harteg

为什么？指南中解释的深度页面转换器与Google Play Music应用程序中的基本相同。 - Xaver Kapeller

我更新了问题并提供了更好的解释。 - Jakob Harteg

Answer 1

一个 PageTransformer 并不需要影响整个 View，毕竟是您定义发生的事情。请考虑 ViewPager 内部 Fragments 的布局如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"    
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/top_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        ...

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        ...

    </RelativeLayout>

</LinearLayout>

正如您所看到的，有两个不同的RelativeLayouts，它们都有一个ID。通过这个，您可以在PageTransformer中调用findViewById()来转换布局的不同部分！

public class ExampleTransformer implements ViewPager.PageTransformer {

    public void transformPage(View view, float position) {

        View topBar = view.findViewById(R.id.top_bar);
        View content = view.findViewById(R.id.content);

        if (position < -1) {
            content.setAlpha(0);    
        } else if (position <= 1) {
            // Now you can fade the content without affecting the topBar
            content.setAlpha(...);

            // And by setting the translation on the root view you 
            // can move everything at the same time
            view.setTranslationX(...);
        } else {
            content.setAlpha(0);
        }
    }
}

希望我能帮到你，如果你有任何进一步的问题，请随时问我！

- Xaver Kapeller

---

哦，我不知道，听起来很棒！我会立即尝试。 - Jakob Harteg

我很高兴能够帮助！ - Xaver Kapeller

这一定是我意外发现的最好的答案。这真的很酷，我不知道你可以这样做！ - AdamMc331