Effet d'en-tête de parallaxe avec RecyclerView

Je veux changer mon ListView j'ai actuellement sur l'utilisation RecyclerView afin que je puisse faire usage de StaggeredGridLayoutManager mais RecyclerView n'a pas la possibilité d'ajouter un en-tête comme ListView.

Généralement avec une ListView je vide afficher dans l'en-tête et de mettre l'image ci-dessous la liste et de traduire le fond de l'image avec le défilement de la liste pour créer la Parallax effet.

Donc, avec un en-tête comment puis-je créer le même effet de parallaxe avec RecyclerView?

source d'informationauteur tyczj

  1. 26

    Donc, aujourd'hui, j'ai essayé d'archive en effet sur un RecyclerView. J'ai été en mesure de le faire, mais étant donné que le code est trop beaucoup je vais coller ici mon projet github et je vais vous expliquer en quelques points-clés du projet.

    https://github.com/kanytu/android-parallax-recyclerview

    Nous devons d'abord regarder getItemViewType sur le RecyclerView.Adapter classe. Cette méthode définit le type de vue, nous avons affaire. Ce type seront transmises à onCreateViewHolder et là, on peut gonfler les différents points de vue. Donc ce que j'ai fait a été de: vérifier si la position est la première. Si oui, alors gonfler l'en-tête, si pas gonfler une ligne normales.

    J'ai ajouté aussi un CustomRelativeLayout que les clips de la vue, de sorte nous n'avons pas de problèmes avec les diviseurs et avec les lignes d'obtenir sur le dessus de la tête.

    À partir de ce point, vous semblez connaître le reste de la logique derrière elle.

    Le résultat final a été:

    Effet d'en-tête de parallaxe avec RecyclerView

    EDIT:

    Si vous avez besoin d'insérer quelque chose dans l'adaptateur, assurez-vous d'avertir de la position correcte en ajoutant 1 à la notifyItemChanged/Inserted méthode. Par exemple:

    public void addItem(String item, int position) {
    mData.add(position, item);
    notifyItemInserted(position + 1); //we have to add 1 to the notification position since we don't want to mess with the header
}

    Un autre important edit que j'ai fait est le défilement de la logique. Le mCurrentOffset système m'a l'aide ne fonctionne pas avec l'élément d'insertion depuis le décalage va changer si vous ajoutez un élément. Donc, ce que j'ai fait:

    ViewHolder holder = findViewHolderForPosition(0);
if (holder != null)
  ((ParallaxRecyclerAdapter) getAdapter()).translateHeader(-holder.itemView.getTop() * 0.5f);

    Pour tester cela, j'ai ajouté un postDelayed Praticable, a commencé l'application, défile à la fin, ajouter l'élément à la position 0, puis faites défiler jusqu'à nouveau. Le résultat a été:

    Effet d'en-tête de parallaxe avec RecyclerView

    Si quelqu'un est à la recherche d'autres effets de parallax ils peuvent vérifier mes autres repo:

    https://github.com/kanytu/android-parallax-listview

  2. 31

    la façon la plus simple de le faire, est d'utiliser ci-dessous onScrollListener sans s'appuyer sur aucune bibliothèque.

    View view = recyclerView.getChildAt(0);
if(view != null && recyclerView.getChildAdapterPosition(view) == 0)  {
     view.setTranslationY(-view.getTop() / 2);//or use view.animate().translateY();
}

    assurez-vous que votre deuxième viewHolder élément a un fond de couleur pour correspondre à la tiroir/activité d'arrière-plan. ainsi, le défilement des regards de parallaxe.

  3. 0

    Pour kotlin, vous pouvez config le recycleur vue comme ci-dessous

    //setting parallax effects
    recyclerView.addOnScrollListener(object :RecyclerView.OnScrollListener(){
        override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)
            val view = recyclerView?.getChildAt(0)
            if (view != null && recyclerView?.getChildAdapterPosition(view) === 0) {
                val imageView = view.findViewById(R.id.parallaxImage)
                imageView.translationY = -view.top / 2f
            }
        }
    })
  4. 0

    Cette réponse est pour ceux qui sont curieux à propos de l'ajout d'un en-tête de la parallaxe d'une GridLayoutManager ou un StaggeredGridLayoutManager

    Vous devrez ajouter le code suivant à votre carte dans onBindViewHolder ou onCreateViewHolder

    StaggeredGridLayoutManager.LayoutParams layoutParams =
                    (StaggeredGridLayoutManager.LayoutParams) holder.itemView.getLayoutParams();
            layoutParams.setFullSpan(true);