RecyclerAfficher les éléments développer / réduire

Je souhaite développer / réduire les éléments de mon recyclerView afin d'afficher plus d'informations. Je veux obtenir le même effet de la SlideExpandableListView .

Fondamentalement, dans mon viewHolder, j'ai une vue qui n'est pas visible et je veux faire une animation de développement / réduction fluide plutôt que de définir la visibilité sur VISIBLE / GONE uniquement. Je n'ai besoin que d'un élément à développer à la fois et ce serait cool d'avoir une certaine élévation pour montrer que l'élément est sélectionné.

C'est le même effet de la nouvelle liste d'historique des appels récents Android. Les options «RAPPEL» et «DÉTAILS» ne sont visibles que lorsqu'un élément est sélectionné.

Veuillez n'utiliser aucune bibliothèque pour cet effet à la place, utilisez la méthode recommandée pour le faire selon Google I / O. Dans la méthode onBindViewHolder de votre recyclerView, procédez comme suit :

final boolean isExpanded = position==mExpandedPosition;
holder.details.setVisibility(isExpanded?View.VISIBLE:View.GONE);
holder.itemView.setActivated(isExpanded);
holder.itemView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mExpandedPosition = isExpanded ? -1:position;
        TransitionManager.beginDelayedTransition(recyclerView);
        notifyDataSetChanged();
    }
});

• Où les détails sont ma vue qui sera affichée au toucher (détails de l'appel dans votre cas. Visibilité par défaut.GONE).
• mExpandedPosition est une variable int initialisée à -1

Et pour les effets sympas que vous vouliez, utilisez-les comme attributs list_item:

android:background="@drawable/comment_background"
android:stateListAnimator="@animator/comment_selection"

où comment_background est:

<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="true"
android:enterFadeDuration="@android:integer/config_shortAnimTime"
android:exitFadeDuration="@android:integer/config_shortAnimTime">

<item android:state_activated="true" android:drawable="@color/selected_comment_background" />
<item android:drawable="@color/comment_background" />
</selector>

et comment_selection est:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_activated="true">
    <objectAnimator
        android:propertyName="translationZ"
        android:valueTo="@dimen/z_card"
        android:duration="2000"
        android:interpolator="@android:interpolator/fast_out_slow_in" />
</item>

<item>
    <objectAnimator
        android:propertyName="translationZ"
        android:valueTo="0dp"
        android:duration="2000"
        android:interpolator="@android:interpolator/fast_out_slow_in" />
</item>
</selector>

Pour cela, juste besoin de lignes simples pas compliquées

dans votre méthode onBindViewHolder, ajoutez le code ci-dessous

final boolean isExpanded = position==mExpandedPosition;
holder.details.setVisibility(isExpanded?View.VISIBLE:View.GONE);
holder.itemView.setActivated(isExpanded);
holder.itemView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mExpandedPosition = isExpanded ? -1:position;
        notifyItemChanged(position);
    }
});

mExpandedPosition est une variable globale int initialisée à -1

Pour ceux qui veulent qu'un seul élément soit développé et que les autres soient réduits. Utilisez ceci

déclarez d'abord une variable globale avec previousExpandedPosition = -1

puis

    final boolean isExpanded = position==mExpandedPosition;
    holder.details.setVisibility(isExpanded?View.VISIBLE:View.GONE);
    holder.itemView.setActivated(isExpanded);

    if (isExpanded)
       previousExpandedPosition = position;

    holder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mExpandedPosition = isExpanded ? -1:position;
            notifyItemChanged(previousExpandedPosition);
            notifyItemChanged(position);
        }
    });

Terminé!!!. Simple et humble .. :)

Ne pas dire que c'est la meilleure approche, mais cela semble fonctionner pour moi.

Le code complet peut être trouvé à l' adresse : Exemple de code sur: https://github.com/dbleicher/recyclerview-grid-quickreturn

Tout d'abord, ajoutez la zone développée à votre disposition de cellule / élément et rendez la disposition de cellule englobante animateLayoutChanges = "true". Cela garantira que le développement / réduction est animé:

<LinearLayout
    android:id="@+id/llCardBack"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:animateLayoutChanges="true"
    android:padding="4dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center|fill_horizontal"
        android:padding="10dp"
        android:gravity="center"
        android:background="@android:color/holo_green_dark"
        android:text="This is a long title to show wrapping of text in the view."
        android:textColor="@android:color/white"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tvSubTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center|fill_horizontal"
        android:background="@android:color/holo_purple"
        android:padding="6dp"
        android:text="My subtitle..."
        android:textColor="@android:color/white"
        android:textSize="12sp" />

    <LinearLayout
        android:id="@+id/llExpandArea"
        android:visibility="gone"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="6dp"
            android:text="Item One" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="6dp"
            android:text="Item Two" />

    </LinearLayout>
</LinearLayout>

Ensuite, faites en sorte que votre classe RV Adapter implémente View.OnClickListener afin que vous puissiez agir sur l'élément sur lequel l'utilisateur clique. Ajoutez un champ int pour contenir la position de la vue développée et initialisez-la à une valeur négative:

private int expandedPosition = -1;

Enfin, implémentez vos méthodes ViewHolder, onBindViewHolder () et remplacez la méthode onClick (). Vous développerez la vue dans onBindViewHolder si sa position est égale à "ExpandPosition", et vous la masquerez dans le cas contraire. Vous définissez la valeur de ExpandPosition dans l'écouteur onClick:

@Override
public void onBindViewHolder(RVAdapter.ViewHolder holder, int position) {

    int colorIndex = randy.nextInt(bgColors.length);
    holder.tvTitle.setText(mDataset.get(position));
    holder.tvTitle.setBackgroundColor(bgColors[colorIndex]);
    holder.tvSubTitle.setBackgroundColor(sbgColors[colorIndex]);

    if (position == expandedPosition) {
        holder.llExpandArea.setVisibility(View.VISIBLE);
    } else {
        holder.llExpandArea.setVisibility(View.GONE);
    }
}

@Override
public void onClick(View view) {
    ViewHolder holder = (ViewHolder) view.getTag();
    String theString = mDataset.get(holder.getPosition());

    // Check for an expanded view, collapse if you find one
    if (expandedPosition >= 0) {
        int prev = expandedPosition;
        notifyItemChanged(prev);
    }
    // Set the current position to "expanded"
    expandedPosition = holder.getPosition();
    notifyItemChanged(expandedPosition);

    Toast.makeText(mContext, "Clicked: "+theString, Toast.LENGTH_SHORT).show();
}

/**
 * Create a ViewHolder to represent your cell layout
 * and data element structure
 */
public static class ViewHolder extends RecyclerView.ViewHolder {
    TextView tvTitle;
    TextView tvSubTitle;
    LinearLayout llExpandArea;

    public ViewHolder(View itemView) {
        super(itemView);

        tvTitle = (TextView) itemView.findViewById(R.id.tvTitle);
        tvSubTitle = (TextView) itemView.findViewById(R.id.tvSubTitle);
        llExpandArea = (LinearLayout) itemView.findViewById(R.id.llExpandArea);
    }
}

Cela ne devrait développer qu'un seul élément à la fois, en utilisant l'animation par défaut du système pour le changement de disposition. Au moins ça marche pour moi. J'espère que ça aide.

Il existe une bibliothèque très simple à utiliser avec le support de gradle: https://github.com/cachapa/ExpandableLayout .

Directement à partir de la documentation de la bibliothèque:

<net.cachapa.expandablelayout.ExpandableLinearLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:el_duration="1000"
    app:el_expanded="true">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Click here to toggle expansion" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Fixed height"
        app:layout_expandable="true" />

 </net.cachapa.expandablelayout.ExpandableLinearLayout>

Une fois que vous marquez votre extensible vues, il suffit d' appeler une de ces méthodes sur le contenant: expand(), collapse()outoggle()

Je sais que cela fait longtemps que la question initiale a été publiée. Mais je pense que pour les lents comme moi, une explication de la réponse de @ Heisenberg serait utile.

Déclarez deux variables dans la classe d'adaptateur comme

private int mExpandedPosition= -1;
private RecyclerView recyclerView = null;

Puis dans onBindViewHolder suivant comme indiqué dans la réponse d'origine.

      // This line checks if the item displayed on screen 
      // was expanded or not (Remembering the fact that Recycler View )
      // reuses views so onBindViewHolder will be called for all
      // items visible on screen.
    final boolean isExpanded = position==mExpandedPosition;

        //This line hides or shows the layout in question
        holder.details.setVisibility(isExpanded?View.VISIBLE:View.GONE);

        // I do not know what the heck this is :)
        holder.itemView.setActivated(isExpanded);

        // Click event for each item (itemView is an in-built variable of holder class)
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

 // if the clicked item is already expaned then return -1 
//else return the position (this works with notifyDatasetchanged )
                mExpandedPosition = isExpanded ? -1:position;
    // fancy animations can skip if like
                TransitionManager.beginDelayedTransition(recyclerView);
    //This will call the onBindViewHolder for all the itemViews on Screen
                notifyDataSetChanged();
            }
        });

Et enfin pour obtenir l'objet recyclerView dans le remplacement de l'adaptateur

@Override
public void onAttachedToRecyclerView(@NonNull RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);

    this.recyclerView = recyclerView;
}

J'espère que cela t'aides.

Il n'est tout simplement pas nécessaire d'utiliser des bibliothèques tierces. Un petit tweak dans la méthode démontrée dans Google I / O 2016 et Heisenberg sur ce sujet, fait l'affaire.

Depuis notifyDataSetChanged() redessine le completRecyclerView , notifyDataItemChanged()est une meilleure option (pas la meilleure) car nous avons la position et le ViewHolderà notre disposition, et notifyDataItemChanged()seulement redessine le particulier ViewHolderà une position donnée .

Mais le problème est que la disparition prématurée du ViewHolder clic et son émergence n'est pas éliminée même si elle notifyDataItemChanged()est utilisée.

Le code suivant ne recourt pas à notifyDataSetChanged()ou notifyDataItemChanged()et est testé sur l'API 23 et fonctionne comme un charme lorsqu'il est utilisé sur un RecyclerView où chaque ViewHolder a un CardViewélément racine:

holder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            final boolean visibility = holder.details.getVisibility()==View.VISIBLE;

            if (!visibility)
            {
                holder.itemView.setActivated(true);
                holder.details.setVisibility(View.VISIBLE);
                if (prev_expanded!=-1 && prev_expanded!=position)
                {
                    recycler.findViewHolderForLayoutPosition(prev_expanded).itemView.setActivated(false);
                    recycler.findViewHolderForLayoutPosition(prev_expanded).itemView.findViewById(R.id.cpl_details).setVisibility(View.GONE);
                }
                prev_expanded = position;
            }
            else
            {
                holder.itemView.setActivated(false);
                holder.details.setVisibility(View.GONE);
            }
            TransitionManager.beginDelayedTransition(recycler);              
        }
});

prev_position est un entier global initialisé à -1. detailsest la vue complète qui est affichée lorsqu'elle est développée et masquée lorsqu'elle est réduite.

Comme dit, l'élément racine de ViewHolderest un CardViewavec foregroundet des stateListAnimatorattributs définis exactement comme l'a dit Heisenberg sur ce sujet.

MISE À JOUR: La démonstration ci-dessus réduira l'élément déjà développé si l'un d'entre eux est développé. Pour modifier ce comportement et conserver un élément développé tel quel, même lorsqu'un autre élément est développé, vous aurez besoin du code suivant.

if (row.details.getVisibility()!=View.VISIBLE)
    {
        row.details.setVisibility(View.VISIBLE);
        row.root.setActivated(true);
        row.details.animate().alpha(1).setStartDelay(500);
    }
    else
    {
        row.root.setActivated(false);
        row.details.setVisibility(View.GONE);
        row.details.setAlpha(0);
    }
    TransitionManager.beginDelayedTransition(recycler);

MISE À JOUR: Lorsque vous développez les derniers éléments de la liste, il se peut que la visibilité totale ne soit pas visible car la partie développée passe sous l'écran. Pour obtenir l'élément complet dans l'écran, utilisez le code suivant.

LinearLayoutManager manager = (LinearLayoutManager) recycler.getLayoutManager();
    int distance;
    View first = recycler.getChildAt(0);
    int height = first.getHeight();
    int current = recycler.getChildAdapterPosition(first);
    int p = Math.abs(position - current);
    if (p > 5) distance = (p - (p - 5)) * height;
    else       distance = p * height;
    manager.scrollToPositionWithOffset(position, distance);

IMPORTANT: pour que les démonstrations ci-dessus fonctionnent, il faut conserver dans leur code une instance de RecyclerView et de son LayoutManager (le plus récent pour plus de flexibilité)

Après avoir utilisé la méthode recommandée pour implémenter des éléments extensibles / réductibles résidant dans des éléments de développement / réductionRecyclerView sur RecyclerView auxquels HeisenBerg a répondu , j'ai vu des artefacts visibles chaque fois que le RecyclerViewest actualisé en appelant TransitionManager.beginDelayedTransition(ViewGroup)et par la suite notifyDatasetChanged().

Sa réponse originale:

final boolean isExpanded = position==mExpandedPosition;
holder.details.setVisibility(isExpanded?View.VISIBLE:View.GONE);
holder.itemView.setActivated(isExpanded);
holder.itemView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mExpandedPosition = isExpanded ? -1 : position;
        TransitionManager.beginDelayedTransition(recyclerView);
        notifyDataSetChanged();
    }
});

Modifié:

final boolean isExpanded = position == mExpandedPosition;
holder.details.setVisibility(isExpanded ? View.VISIBLE : View.GONE);
holder.view.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (mExpandedHolder != null) {
            mExpandedHolder.details.setVisibility(View.GONE);
            notifyItemChanged(mExpandedPosition);
        }
        mExpandedPosition = isExpanded ? -1 : holder.getAdapterPosition();
        mExpandedHolder = isExpanded ? null : holder;
        notifyItemChanged(holder.getAdapterPosition());
    }
}

• les détails sont la vue que vous souhaitez afficher / masquer pendant le développement / la réduction de l'élément
• mExpandedPosition est un intqui garde une trace de l'élément développé
• mExpandedHolder est ViewHolderutilisé lors de la réduction de l' élément

Notez que la méthode TransitionManager.beginDelayedTransition(ViewGroup)et notifyDataSetChanged()sont remplacés par notifyItemChanged(int)pour cibler un élément spécifique et quelques petites modifications.

Après la modification, les effets indésirables précédents devraient disparaître. Cependant, ce n'est peut-être pas la solution parfaite. Il n'a fait que ce que je voulais, éliminant les horreurs.

::ÉDITER::

Pour clarification, les deux mExpandedPositionet mExpandedHoldersont globaux.

Procédez comme suit après avoir défini l'écouteur onClick sur la classe ViewHolder:

@Override
    public void onClick(View v) {
        final int originalHeight = yourLinearLayout.getHeight();
        animationDown(YourLinearLayout, originalHeight);//here put the name of you layout that have the options to expand.
    }

    //Animation for devices with kitkat and below
    public void animationDown(LinearLayout billChoices, int originalHeight){

        // Declare a ValueAnimator object
        ValueAnimator valueAnimator;
        if (!billChoices.isShown()) {
            billChoices.setVisibility(View.VISIBLE);
            billChoices.setEnabled(true);
            valueAnimator = ValueAnimator.ofInt(0, originalHeight+originalHeight); // These values in this method can be changed to expand however much you like
        } else {
            valueAnimator = ValueAnimator.ofInt(originalHeight+originalHeight, 0);

            Animation a = new AlphaAnimation(1.00f, 0.00f); // Fade out

            a.setDuration(200);
            // Set a listener to the animation and configure onAnimationEnd
            a.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {

                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    billChoices.setVisibility(View.INVISIBLE);
                    billChoices.setEnabled(false);
                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });
            // Set the animation on the custom view
            billChoices.startAnimation(a);
        }
        valueAnimator.setDuration(200);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                billChoices.getLayoutParams().height = value.intValue();
                billChoices.requestLayout();
            }
        });


        valueAnimator.start();
    }
}

Je pense que cela devrait aider, c'est ainsi que j'ai mis en œuvre et fait la même chose que Google fait dans la vue des appels récents.

Je suis surpris qu'il n'y ait pas encore de réponse concise, bien qu'une telle animation d'expansion / réduction soit très facile à réaliser avec seulement 2 lignes de code:

(recycler.itemAnimator as SimpleItemAnimator).supportsChangeAnimations = false // called once

ensemble avec

notifyItemChanged(position) // in adapter, whenever a child view in item's recycler gets hidden/shown

Donc pour moi, les explications dans le lien ci-dessous étaient vraiment utiles: https://medium.com/@nikola.jakshic/how-to-expand-collapse-items-in-recyclerview-49a648a403a6

//Global Variable

private int selectedPosition = -1;

 @Override
    public void onBindViewHolder(final CustomViewHolder customViewHolder, final int i) {

        final int position = i;
        final GetProductCatalouge.details feedItem = this.postBeanses.get(i);
        customViewHolder.lly_main.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selectedPosition = i;
                notifyDataSetChanged();
            }
        });
        if (selectedPosition == i) {

          if (customViewHolder.lly_hsn_code.getVisibility() == View.VISIBLE) {

            customViewHolder.lly_hsn_code.setVisibility(View.GONE);
            customViewHolder.lly_sole.setVisibility(View.GONE);
            customViewHolder.lly_sole_material.setVisibility(View.GONE);

        } else {

            customViewHolder.lly_hsn_code.setVisibility(View.VISIBLE);
            customViewHolder.lly_sole.setVisibility(View.VISIBLE);
            customViewHolder.lly_sole_material.setVisibility(View.VISIBLE);
        }


        } else {
            customViewHolder.lly_hsn_code.setVisibility(View.GONE);
            customViewHolder.lly_sole.setVisibility(View.GONE);
            customViewHolder.lly_sole_material.setVisibility(View.GONE);
        }
}

Utilisez deux types de vue dans votre RVAdapter. Un pour la mise en page étendue et un autre pour la mise en page réduite. Et la magie opère avec le réglage android:animateLayoutChanges="true"de RecyclerView Checkout l'effet obtenu en utilisant ceci à 0:42 dans cette vidéo