web-dev-qa-db-fra.com

Comment faire le nouvel effet de parallèle Play Store

Est-ce que quelqu'un sait comment obtenir le nouvel effet de défilement de parallaxe - vous pouvez voir l'effet lorsque vous ouvrez une application sur le PlayStore et essayez de faire défiler vers le bas, le contenu passe au-dessus de la première image. Comment puis-je y arriver?

enter image description here

androidandroid-layoutandroid-animationmaterial-designandroid-scroll
46
Darko Petkovski

Google a récemment annoncé Design Support Library , ce qui lui permet de mettre en œuvre Collapsing Toolbar.

En plus d'épingler une vue, vous pouvez utiliser app:layout_collapseMode="parallax" (et éventuellement app:layout_collapseParallaxMultiplier="0.7" pour définir le multiplicateur de parallaxe ) pour implémenter le défilement de parallaxe (par exemple d'un frère Image dans la CollapsingToolbarLayout)

Exemple:

<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>
60
Paresh Mayani

Vous pouvez essayer ceci (bibliothèque FadingActionBar): https://github.com/ManuelPeinado/FadingActionBar

Essayez un exemple de cette bibliothèque sur Android: https://play.google.com/store/apps/details?id=com.manuelpeinado.fadingactionbar.demo </ strike>

EDIT: Plutôt que par les bibliothèques tierces, utilisez cette application et CollapsingToolbarLayout http://Android-developers.blogspot.in/2015/05/Android-design-support-library.html

29
Yuraj

essayez la bibliothèque ObservableScrollView

https://github.com/ksoichiro/Android-ObservableScrollView

application de démonstration de Play Store

https://play.google.com/store/apps/details?id=com.github.ksoichiro.Android.observablescrollview.samples2

échantillon de démonstration,

enter image description here

18
Ranjith Kumar

Il existe une bibliothèque appelée FadingActionBar qui fait exactement ce que vous demandez. Vous pouvez trouver la bibliothèque sur GitHub (clic) et une application de démonstration dans le Play Store (clic) .

L'utilisation serait quelque chose comme ceci:

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);
4
reVerse

En fait, quelques minutes après avoir posté cette question, je me suis heurté à deux des bibliothèques qui produisaient l'effet recherché et même plus.

Voici des liens vers eux:

4
Darko Petkovski

Vous pouvez personnaliser l’animation de parallaxe en suivant le défilement de la vue Recycler.

Tout d'abord dans la mise en page de vue d'image. Définissez la mise en page parent est plus petite que la vue d'image afin d'empêcher l'image en dehors de la limite lorsque vous définissez translationY

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

Après cela, suivez l’effet de défilement de la vue Recycler et effectuez la transition de la vue image. 

*** J'utilise rxbinding et kotlin pour la mise en œuvre. Vous pouvez utiliser une méthode d’écoute traditionnelle et une approche Java avec la même idée.

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
                                }
                            }
                        }
                    }
0
Kit