RecyclerView Elemente erweitern / reduzieren

Ich möchte die Elemente meiner recyclerView erweitern / reduzieren, um weitere Informationen anzuzeigen. Ich möchte den gleichen Effekt wie SlideExpandableListView erzielen .

Grundsätzlich habe ich in meinem viewHolder eine Ansicht, die nicht sichtbar ist, und ich möchte eine reibungslose Animation zum Erweitern / Reduzieren erstellen, anstatt die Sichtbarkeit nur auf SICHTBAR / GEGANGEN zu setzen. Ich brauche immer nur ein Element, das gleichzeitig erweitert werden soll, und es wäre cool, eine gewisse Höhe zu haben, um zu zeigen, dass das Element ausgewählt ist.

Dies ist der gleiche Effekt wie in der neuen Liste der letzten Anrufe in Android. Die Optionen "CALL BACK" und "DETAILS" sind nur sichtbar, wenn ein Element ausgewählt ist.

Verwenden Sie für diesen Effekt keine Bibliothek, sondern verwenden Sie die empfohlene Methode gemäß Google I / O. Gehen Sie in der onBindViewHolder- Methode Ihres recyclerView folgendermaßen vor :

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

• Wo Details meine Ansicht ist, die bei Berührung angezeigt wird (Anrufdetails in Ihrem Fall. Standard-Sichtbarkeit. GEGANGEN).
• mExpandedPosition ist eine mit -1 initialisierte int-Variable

Und für die coolen Effekte, die Sie wollten, verwenden Sie diese als Ihre list_item-Attribute:

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

Dabei ist comment_background:

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

und comment_selection ist:

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

Dafür brauchte man nur einfache Zeilen, die nicht kompliziert waren

Fügen Sie in Ihrer onBindViewHolder-Methode den folgenden Code hinzu

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 ist eine globale Variable int, die mit -1 initialisiert ist

Für diejenigen, die nur ein Element erweitern und andere reduzieren möchten. Benutze das

Deklarieren Sie zuerst eine globale Variable mit previousExpandedPosition = -1

dann

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

Getan!!!. Einfach und bescheiden .. :)

Nicht zu sagen, dass dies der beste Ansatz ist, aber es scheint für mich zu funktionieren.

Den vollständigen Code finden Sie unter: Beispielcode unter: https://github.com/dbleicher/recyclerview-grid-quickreturn

Fügen Sie zunächst den erweiterten Bereich zu Ihrem Zellen- / Elementlayout hinzu und machen Sie das umschließende Zellenlayout animateLayoutChanges = "true". Dadurch wird sichergestellt, dass das Erweitern / Reduzieren animiert wird:

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

Lassen Sie dann Ihre RV-Adapterklasse View.OnClickListener implementieren, damit Sie auf das angeklickte Element reagieren können. Fügen Sie ein int-Feld hinzu, um die Position der einen erweiterten Ansicht zu halten, und initialisieren Sie sie auf einen negativen Wert:

private int expandedPosition = -1;

Implementieren Sie abschließend Ihre ViewHolder-, onBindViewHolder () -Methoden und überschreiben Sie die onClick () -Methode. Sie erweitern die Ansicht in onBindViewHolder, wenn ihre Position gleich "expandedPosition" ist, und blenden sie aus, wenn nicht. Sie legen den Wert von expandPosition im onClick-Listener fest:

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

Dies sollte jeweils nur ein Element erweitern und die Systemstandardanimation für die Layoutänderung verwenden. Zumindest funktioniert es bei mir. Ich hoffe es hilft.

Es gibt eine sehr einfach zu verwendende Bibliothek mit Gradle-Unterstützung: https://github.com/cachapa/ExpandableLayout .

Direkt aus den Bibliotheksdokumenten:

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

Nachdem Sie Ihre erweiterbaren Ansichten markiert haben , rufen Sie einfach eine dieser Methoden für den Container auf : expand(), collapse()odertoggle()

Ich weiß, es ist lange her, dass die ursprüngliche Frage veröffentlicht wurde. Aber ich denke für langsame wie mich würde eine Erklärung der Antwort von @ Heisenberg helfen.

Deklarieren Sie zwei Variablen in der Adapterklasse als

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

Dann in onBindViewHolder wie in der ursprünglichen Antwort angegeben.

      // 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();
            }
        });

Und schließlich, um das recyclerView-Objekt in der Adapterüberschreibung zu erhalten

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

    this.recyclerView = recyclerView;
}

Hoffe das hilft.

Es ist einfach nicht erforderlich, Bibliotheken von Drittanbietern zu verwenden. Eine kleine Änderung an der in Google I / O 2016 demonstrierten Methode und Heisenberg zu diesem Thema vorgestellten reicht aus.

Da das notifyDataSetChanged() Ganze neu gezeichnet wirdRecyclerView , notifyDataItemChanged()ist dies eine bessere Option (nicht die beste), da wir die Position und das ViewHolderzur Verfügung haben und notifyDataItemChanged()nur das Besondere ViewHolderan einer bestimmten Position neu zeichnen .

Das Problem ist jedoch, dass das vorzeitige Verschwinden des ViewHolderbeim Klicken und dessen Auftreten nicht beseitigt wird, selbst wennnotifyDataItemChanged() es verwendet wird.

Der folgende Code greift nicht auf notifyDataSetChanged()oder zurück notifyDataItemChanged()und wird auf API 23 getestet und funktioniert wie ein Zauber, wenn er in einer RecyclerView verwendet wird, in der jeder ViewHolder ein Stammelement hat CardView:

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 ist eine globale Ganzzahl, die mit -1 initialisiert ist. detailsist die vollständige Ansicht, die beim Erweitern angezeigt und beim Reduzieren getarnt wird.

Wie gesagt, das Wurzelelement von ViewHolderist ein CardViewmit foregroundundstateListAnimator Attribute, die genau so definiert sind, wie es Heisenberg zu diesem Thema gesagt hat.

UPDATE: Die obige Demonstration wird das zuvor erweiterte Element reduzieren, wenn eines davon erweitert wird. Um dieses Verhalten zu ändern und das erweiterte Element so zu belassen, wie es ist, auch wenn ein anderes Element erweitert wird, benötigen Sie den folgenden Code.

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

UPDATE: Wenn Sie die letzten Elemente in der Liste erweitern, wird sie möglicherweise nicht vollständig sichtbar, da der erweiterte Bereich unter dem Bildschirm angezeigt wird. Verwenden Sie den folgenden Code, um das vollständige Element auf dem Bildschirm anzuzeigen.

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

WICHTIG: Damit die oben genannten Demonstrationen funktionieren, muss eine Instanz von RecyclerView und dessen LayoutManager (der spätere aus Gründen der Flexibilität) in ihrem Code gespeichert werden.

Nach der Verwendung mit Wohnsitz der empfohlene Weg erweiterbare / reduzierbare Elemente der Umsetzung in ein RecyclerViewauf RecyclerView Aufklappen / Zuklappen Artikel beantwortet von Heisen , habe ich einige deutliche Artefakte zu sehen , wenn der RecyclerViewdurch den Aufruf aktualisiert wird TransitionManager.beginDelayedTransition(ViewGroup)und anschließend notifyDatasetChanged().

Seine ursprüngliche Antwort:

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

Geändert:

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

• Details ist eine Ansicht, die Sie beim Erweitern / Reduzieren von Elementen ein- / ausblenden möchten
• mExpandedPosition ist eine int, die das erweiterte Element verfolgt
• mExpandedHolder wird ViewHolderbeim Reduzieren von Elementen verwendet

Beachten Sie, dass die Methode TransitionManager.beginDelayedTransition(ViewGroup)und notifyDataSetChanged()ersetzt werden, um notifyItemChanged(int)auf ein bestimmtes Element und einige kleine Verbesserungen abzuzielen.

Nach der Änderung sollten die vorherigen unerwünschten Effekte verschwunden sein. Dies ist jedoch möglicherweise nicht die perfekte Lösung. Es hat nur getan, was ich wollte, und die Schandflecken beseitigt.

::BEARBEITEN::

Zur Verdeutlichung sind beide mExpandedPositionund mExpandedHolderglobal.

Gehen Sie wie folgt vor, nachdem Sie den onClick-Listener auf die ViewHolder-Klasse festgelegt haben:

@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();
    }
}

Ich denke, das sollte helfen, so habe ich es implementiert und mache das gleiche, was Google in der letzten Anrufansicht macht.

Ich bin überrascht, dass es noch keine präzise Antwort gibt, obwohl eine solche Animation zum Erweitern / Reduzieren mit nur 2 Codezeilen sehr einfach zu erreichen ist:

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

zusammen mit

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

Für mich waren die Erklärungen im folgenden Link wirklich nützlich: 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);
        }
}

Verwenden Sie zwei Ansichtstypen in Ihrem RVAdapter. Eine für erweitertes Layout und eine für reduziert. Und die Magie entsteht, wenn Sie android:animateLayoutChanges="true"für RecyclerView Checkout den Effekt festlegen, der in diesem Video um 0:42 Uhr erzielt wird