RecyclerView展开/折叠项目

我想展开/折叠我的recyclerView的项目，以显示更多的信息。 我想实现SlideExpandableListView的相同效果。

基本上在我的viewHolder中，我有一个不可见的视图，我想做一个平滑的展开/折叠animation，而不是将可见性设置为仅可见/去。 我只需要一次扩展一个项目，并且有一些提升来显示该项目被选中将会很酷。

这是新的Android最近通话logging列表的效果。 只有当select一个项目时，才能看到选项“CALL BACK”和“DETAILS”。

Answer 1

请不要使用任何库的这种效果，而应根据Google I / O 2016使用推荐的方法。在您的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的intvariables

而对于你想要的酷效果，使用这些作为你的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" /> 

和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="@android:integer/config_shortAnimTime" android:interpolator="@android:interpolator/fast_out_slow_in" /> </item> <item> <objectAnimator android:propertyName="translationZ" android:valueTo="0dp" android:duration="@android:integer/config_shortAnimTime" android:interpolator="@android:interpolator/fast_out_slow_in" /> </item> 

Answer 2

不是说这是最好的方法，但它似乎为我工作。

完整的代码可以在以下urlfind：示例代码： https ： //github.com/dbleicher/recyclerview-grid-quickreturn

首先，将展开的区域添加到您的单元格/项目布局，并将封闭的单元布局animateLayoutChanges =“true”。 这将确保展开/折叠animation：

 <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 Adapter类实现View.OnClickListener，以便您可以对正在单击的项目执行操作。 添加一个int字段来保存一个展开视图的位置，并将其初始化为负值：

 private int expandedPosition = -1; 

最后，实现你的ViewHolder，onBindViewHolder（）方法并重写onClick（）方法。 如果位置等于“expandedPosition”，您将在onBindViewHolder中展开视图，如果不是，则将其隐藏。 您在onClick侦听器中设置expandedPosition的值：

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

这应该一次仅扩展一个项目，使用系统默认animation进行布局更改。 至less它适合我。 希望它有帮助。

Answer 3

有一个非常简单的使用库支持gradle： https ： //github.com/cachapa/ExpandableLayout 。

正确的图书馆文件：

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

Answer 4

你可以使用ExpandableLayout。 https://github.com/KyoSherlock/ExpandableLayout

这个ExpandableLayout就像一个平滑的展开/折叠animationCheckBox，所以它可以用在任何地方（ListView或RecyclerView）。

Answer 5

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

我认为这应该有所帮助，这就是我在最近的调用视图中实现的function和谷歌的function。

Answer 6

在你的RVAdapter使用两种视图types。 一个用于扩展布局，另一个用于折叠。 而且，对于RecyclerView Checkout设置android:animateLayoutChanges="true" ，魔术发生在这个video 0:42使用这个效果