RecyclerView 확장 / 축소 항목

더 많은 정보를 표시하기 위해 recyclerView의 항목을 확장 / 축소하고 싶습니다. SlideExpandableListView 와 동일한 효과를 얻고 싶습니다 .

기본적으로 내 viewHolder에는 보이지 않는 뷰가 있으며 가시성을 VISIBLE / GONE으로 설정하는 대신 부드러운 확장 / 축소 애니메이션을하고 싶습니다. 한 번에 항목을 확장해야하며 항목이 선택되었음을 보여주기 위해 고도를 높이는 것이 좋습니다.

새로운 Android 최근 통화 내역 목록과 동일한 효과입니다. "CALL BACK"및 "DETAILS"옵션은 항목을 선택한 경우에만 표시됩니다.

이 효과에 라이브러리를 사용하지 말고 Google I / O에 따라 권장되는 방법을 사용하십시오. recyclerView의 onBindViewHolder 메소드에서 다음을 수행하십시오.

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

• 어디 세부 사항은 터치에 표시됩니다 내도이다 (귀하의 경우 통화 세부 정보가. Visibility.GONE 기본).
• mExpandedPosition 은 -1로 초기화 된 int 변수입니다.

원하는 멋진 효과를 얻으려면 list_item 속성으로 사용하십시오.

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

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>

comment_selection은 다음과 같습니다.

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

이를 위해 복잡하지 않은 간단한 줄만 있으면됩니다.

onBindViewHolder 메소드에서 아래 코드를 추가하십시오.

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 은 -1로 초기화 된 int 전역 변수입니다.

하나의 항목 만 확장하고 다른 항목은 축소하려는 경우. 이것을 사용하십시오

먼저 previousExpandedPosition = -1로 전역 변수를 선언하십시오.

그때

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

끝난!!!. 간단하고 겸손한 .. :)

이것이 최선의 접근 방법이라고 말하지는 않지만 나에게 효과가있는 것 같습니다.

전체 코드는 다음에서 찾을 수 있습니다. 예제 코드 : https://github.com/dbleicher/recyclerview-grid-quickreturn

먼저 셀 / 항목 레이아웃에 확장 영역을 추가하고 둘러싸는 셀 레이아웃을 animateLayoutChanges = "true"로 만듭니다. 이렇게하면 확장 / 축소 애니메이션이 적용됩니다.

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

그런 다음 클릭하는 항목에 대해 조치를 취할 수 있도록 RV 어댑터 클래스가 View.OnClickListener를 구현하도록하십시오. 하나의 확장 된보기의 위치를 ​​유지하기 위해 int 필드를 추가하고 음수 값으로 초기화하십시오.

private int expandedPosition = -1;

마지막으로 ViewHolder, onBindViewHolder () 메소드를 구현하고 onClick () 메소드를 대체하십시오. 위치가 "expandedPosition"과 같으면 onBindViewHolder에서보기를 확장하고 그렇지 않으면 숨 깁니다. onClick 리스너에서 extendedPosition의 값을 설정합니다.

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

레이아웃 변경에 시스템 기본 애니메이션을 사용하여 한 번에 하나의 항목 만 확장해야합니다. 적어도 그것은 나를 위해 작동합니다. 도움이 되길 바랍니다.

https://github.com/cachapa/ExpandableLayout 과 같이 gradle을 지원하는 매우 사용하기 쉬운 라이브러리가 있습니다 .

도서관 문서에서 바로 :

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

당신이 당신의 표시 후 확장 전망을 단지 용기에 이러한 방법을 호출 expand(), collapse()또는toggle()

원래 질문이 게시 된 이후 오랜 시간이 걸렸다는 것을 알고 있습니다. 그러나 나는 나와 같은 느린 사람들에게는 @Heisenberg의 대답에 대한 약간의 설명이 도움이 될 것이라고 생각합니다.

어댑터 클래스에서 두 개의 변수를 다음과 같이 선언하십시오.

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

그런 다음 원래 답변에서 주어진대로 onBindViewHolder 에서.

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

마지막으로 어댑터 재정의에서 recyclerView 객체를 얻으려면

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

    this.recyclerView = recyclerView;
}

도움이 되었기를 바랍니다.

타사 라이브러리를 사용할 필요가 없습니다. 약간의 비틀기 에서 설명하는 방법에 구글 I / O 2016 이 주제에와 하이젠 베르크는 트릭을 수행합니다.

이후 notifyDataSetChanged() 전체 다시 그리기RecyclerView , notifyDataItemChanged()우리는 위치와 있기 때문에 더 나은 옵션 (안 최고)입니다 ViewHolder우리의 처분을하고, notifyDataItemChanged()단지 특정을 다시 그립니다 ViewHolder주어진 위치에서 .

그러나 문제는 ViewHolder클릭시 조기 소멸 과 출현 notifyDataItemChanged()이 사용 되어도 제거되지 않는다는 것 입니다.

다음 코드는 하지 않습니다 에 의존 notifyDataSetChanged()하거나 notifyDataItemChanged()각 ViewHolder이가있는 RecyclerView에 사용하는 경우 API (23)와 마법처럼 작품에서 테스트되고 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-1로 초기화 된 전역 정수입니다. details접었을 때 펼치고 닫힐 때 표시되는 전체보기입니다.

앞서 언급했듯이의 루트 요소 ViewHolder는 CardViewwith foreground와 stateListAnimator특성에 대해 Heisenberg가 말한대로 정확하게 정의됩니다.

업데이트 : 위의 데모는 확장 된 항목 중 하나가 확장 된 경우 이전에 확장 된 항목을 축소합니다. 이 동작을 수정하고 확장 된 항목을 다른 항목이 확장 된 경우에도 그대로 유지하려면 다음 코드가 필요합니다.

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

업데이트 : 목록의 마지막 항목을 펼칠 때 펼친 부분이 화면 아래로 이동하기 때문에 완전히 표시되지 않을 수 있습니다. 화면 내에서 전체 항목을 얻으려면 다음 코드를 사용하십시오.

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

중요 : 위의 데모가 작동하려면 코드에서 RecyclerView의 인스턴스를 유지해야하며 LayoutManager는 유연성이 있어야합니다.

A의 거주 확장 / 축소 항목을 구현하는 권장되는 방법 사용 후 RecyclerView에 RecyclerView이 / 축소 항목 확장 응답 하이젠 베르크를 , 나는이 때마다 몇 가지 눈에 띄는 유물 본 적이 RecyclerView호출하여 새로 고쳐 TransitionManager.beginDelayedTransition(ViewGroup)과 이후를 notifyDatasetChanged().

그의 원래 답변 :

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

수정 :

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

• 세부 사항 은 항목 확장 / 축소 중에 표시하거나 숨기려는보기입니다.
• mExpandedPosition 은 int확장 된 항목을 추적하는
• mExpandedHolder 는 ViewHolder항목 축소 중에 사용됩니다

특정 항목과 약간의 미세 조정을 대상 으로 하기 위해이 방법 TransitionManager.beginDelayedTransition(ViewGroup)과 방법 notifyDataSetChanged()이 대체되었습니다 notifyItemChanged(int).

수정 후에는 이전에 원하지 않는 효과가 사라져야합니다. 그러나 이것은 완벽한 솔루션이 아닐 수 있습니다. 그것은 내가 원하는 것을 했으므로 눈가리개를 제거했습니다.

::편집하다::

설명을 위해, 모두 mExpandedPosition와 mExpandedHolder전역이다.

onClick 리스너를 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();
    }
}

나는 그것이 도움이 될 것이라고 생각한다. 그것이 내가 최근 통화보기에서 구현 한 구글과 동일한 방식이다.

간결한 답변이 아직 없다는 사실에 놀랐습니다. 그러나 이러한 확장 / 축소 애니메이션은 단 두 줄의 코드로 달성하기가 매우 쉽습니다.

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

함께

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

그래서 저에게 아래 링크의 설명은 정말 유용했습니다 : 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);
        }
}

에 두 가지보기 유형을 사용하십시오 RVAdapter. 하나는 확장 된 레이아웃이고 다른 하나는 축소 된 것입니다. 이 비디오 에서 0:42에 이것을 사용하여 달성 한 효과 android:animateLayoutChanges="true"를 RecyclerViewCheckout 으로 설정하면 마술이 발생합니다.