Comment faire le nouvel effet de parallaxe PlayStore

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

entrer la description de l'image ici

Google a récemment annoncé la bibliothèque de support de conception et prend en charge l’implémentation de la barre d’outils Collapsing .

En plus d’épingler une vue, vous pouvez utiliser app:layout_collapseMode="parallax" (et optionnellement app:layout_collapseParallaxMultiplier="0.7" pour définir le multiplicateur de parallaxe) pour implémenter le défilement de parallaxe (par exemple

Exemple:

      

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

EDIT: Plutôt que la bibliothèque tierce, utilisez cette AppBarLayout et CollapsingToolbarLayout http://android-developers.blogspot.in/2015/05/android-design-support-library.html

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

exemple de démonstration,

entrer la description de l'image ici

En fait, quelques minutes après avoir posté cette question, je suis tombé sur deux des bibliothèques qui font l’effet que je cherche et même plus.

Voici des liens vers eux:

  • Rouleaux Parallax
  • Parallèle

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

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

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

Tout d’abord dans la présentation de l’image. Définir la mise en page parent est plus petite que la vue image afin d’éviter que l’image en dehors de la limite ne définisse translationY

    

Ensuite, suivez l’effet de défilement de la vue du recycleur et transformez la vue en image.

*** J’utilise rxbinding et kotlin pour l’implémentation. Vous pouvez utiliser la méthode d’écoute traditionnelle et l’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 } } } }