Переход ViewPager наподобие Google Play Music Player

Я хочу имитировать анимацию перехода ViewPager, которую вы видите в интерфейсе проигрывателя приложения Play Music. Похоже на это.

Анимационные экраны

Теперь эту анимацию масштабирования/затухания можно легко выполнить с помощью пользовательского PageTransformer, описанного здесь, сложная часть — это просто верхняя панель с информацией о песне и прочим. Этот просто вставляется, как обычный ViewPager.

Таким образом, мне кажется, что Google каким-то образом комбинирует два PageTransformers для разных частей макета (1. Верхняя панель, 2. Обложка). Это я понятия не имею, как это сделать, и если это вообще возможно. Другой способ, которым я мог представить, что разработчики сделали это, - это иметь два ViewPager. Один для панели информации о песне, а другой для скрытого изображения, которое затем будет совместно использовать событие касания для одновременного слайда/анимации. Однако для меня это звучит несколько неудобно и похоже на то, что требует много ресурсов процессора.

Какие-либо предложения?


person Jakob    schedule 16.07.2014    source источник
comment
Вы смотрели это руководство? В нем объясняется, как настроить ViewPager переходы.   -  person Xaver Kapeller    schedule 16.07.2014
comment
Теперь у меня есть, и это не совсем решает парадокс (так сказать) двух разных анимаций. Но спасибо   -  person Jakob    schedule 16.07.2014
comment
Почему? Преобразователь страницы глубины, описанный в руководстве, почти такой же, как и в приложении Google Play Music.   -  person Xaver Kapeller    schedule 16.07.2014
comment
Я обновил вопрос с лучшим объяснением.   -  person Jakob    schedule 16.07.2014


Ответы (1)


PageTransformer не обязательно влияет на все View, в конце концов, именно вы определяете, что происходит. Учтите, что расположение Fragments внутри ViewPager выглядит примерно так:

<?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, у них обоих есть идентификатор. При этом вы можете просто вызывать findViewById() на View внутри PageTransformer и по-разному преобразовывать разные части макета!

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

Я надеюсь, что смог помочь вам, и если у вас есть какие-либо дополнительные вопросы, не стесняйтесь спрашивать!

person Xaver Kapeller    schedule 16.07.2014
comment
Хм, я понятия не имел, звучит здорово! я попробую немедленно - person Jakob; 16.07.2014
comment
Я рад, что смог помочь! - person Xaver Kapeller; 16.07.2014
comment
Это должен быть лучший ответ, на который я когда-либо наткнулся случайно. Это очень круто, я и не знала, что ты так умеешь! - person AdamMc331; 11.06.2015