Как сделать новый эффект параллакса PlayStore

Кто-нибудь знает, как я могу добиться нового эффекта прокрутки параллакса - вы можете увидеть эффект при открытии приложения в PlayStore и попробуйте прокрутить вниз, содержимое переместится поверх верхнего изображения. Как я могу это достичь?

enter image description here

ОТВЕТЫ

Ответ 1

Недавно Google анонсировала конструкторскую библиотеку поддержки, и при этом она поддерживает внедрение панели инструментов Collapsing.

В дополнение к закреплению представления вы можете использовать app:layout_collapseMode="parallax" (и необязательно app:layout_collapseParallaxMultiplier="0.7", чтобы установить параллакс множитель) для выполнения прокрутки параллакса (скажем, о браке ImageView в CollapsingToolbarLayout)

Пример:

<android.support.design.widget.AppBarLayout
        android:layout_height="192dp"
        android:layout_width="match_parent">
    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Ответ 2

Вы можете попробовать это (библиотека FadingActionBar): https://github.com/ManuelPeinado/FadingActionBar

Попробуйте пример этой библиотеки на Android: https://play.google.com/store/apps/details?id=com.manuelpeinado.fadingactionbar.demo

РЕДАКТИРОВАТЬ: Вместо библиотеки сторонних разработчиков этот AppBarLayout и CollapsingToolbarLayout http://android-developers.blogspot.in/2015/05/android-design-support-library.html

Ответ 4

Там есть библиотека под названием FadingActionBar, которая делает именно то, о чем вы просите. Вы можете найти библиотеку на GitHub (клик) и демо-приложение в Play Store (щелкните).

Использование будет примерно таким:

FadingActionBarHelper helper = new FadingActionBarHelper()
    // Set the ActionBar drawable - basically the color
    .actionBarBackground(R.drawable.ab_background)
    // Set the Header - usually an image
    .headerLayout(R.layout.header)
    // Set the main layout
    .contentLayout(R.layout.activity_scrollview);
setContentView(helper.createView(this));
helper.initActionBar(this);

Ответ 5

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

Вот ссылки на них:

Ответ 6

Вы можете настроить анимацию параллакса, отслеживая прокрутку просмотра Recycler

Во-первых, в макете просмотра изображений. Установите родительский макет меньше, чем вид изображения, чтобы предотвратить изображение за пределами рамки при установке переводаY

<android.support.percent.PercentRelativeLayout
        android:id="@+id/index_level6_image_section"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipChildren="false">

        <ImageView
            android:id="@+id/index_level6_parallaxImage"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:layout_centerInParent="true"
            android:background="@color/timberwolf"
            android:layout_marginTop="-20"
            android:layout_marginBottom="-20"
            android:scaleType="centerCrop"
            app:imageUrl="@{level6CellViewModel.level6ImageUrl}" />

    </android.support.percent.PercentRelativeLayout>

После этого отследите эффект прокрутки вида ресайклеров и переход на изображение.

*** Я использую rxbinding и kotlin для реализации. Вы можете использовать традиционный метод прослушивания и java-подход с той же идеей.

RxRecyclerView.scrollEvents(recyclerView)
                    .subscribe { event ->
                        // get the visible cell items of the recycler view
                        val firstVisible = layoutManager.findFirstVisibleItemPosition()
                        val visibleCount = Math.abs(firstVisible - layoutManager.findLastVisibleItemPosition())

                        /** loop the visible cell items from the recycler view */
                        for (i in firstVisible..firstVisible + visibleCount) {
                            event.view().layoutManager?.findViewByPosition(i)?.let { cellItem ->
                                /** only for index cell level 6 parallax image */
                                cellItem.findViewById(R.id.index_level6_parallaxImage)?.let { imageView ->
                                    /** setting the parallax effect */
                                    val translationY = (cellItem.top - cellItem.height) / level6ParallaxRate
                                    imageView.translationY = -translationY
                                }
                            }
                        }
                    }