RecyclerView展开/折叠项目 [英] RecyclerView expand/collapse items

问题描述

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

I want to expand/collapse the items of my recyclerView in order to show more info. I want to achieve the same effect of the SlideExpandableListView.

基本上在我的viewHolder我有一个观点，即是不可见的，我希望做一个平滑的展开/折叠动画，而不是设置能见度可见/ GONE只。我只需要一个项目在一个时间来进行扩展，这将是很酷有一些提升，显示该项目被选中。

Basically in my viewHolder I have a view that is not visible and I want to do a smooth expand/collapse animation rather than set the visibility to VISIBLE/GONE only. I only need an item to be expanded at a time and it would be cool to have some elevation to show that the item is selected.

这是新的Andr​​oid最近通话记录列表相同的效果。 回拨和详细信息的选项，只有当一个项目被选中可见。

It is the same effect of the new Android recent calls history list. The options "CALL BACK" and "DETAILS" are visible only when an item is selected.

推荐答案

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

Not saying this is the best approach, but it seems to work for me.

满code可以在这里找到： 例如code处：<一href="https://github.com/dbleicher/recyclerview-grid-quickreturn">https://github.com/dbleicher/recyclerview-grid-quickreturn

The full code may be found at: Example code at: https://github.com/dbleicher/recyclerview-grid-quickreturn

首先，扩展区域添加到细胞/项目的布局，并进行封闭小区布局animateLayoutChanges =真。这将确保展开/折叠动态显示：

First off, add the expanded area to your cell/item layout, and make the enclosing cell layout animateLayoutChanges="true". This will ensure that the expand/collapse is animated:

<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字段来保存一个扩展视图的位置，并将其初始化为负值：

Then, make your RV Adapter class implement View.OnClickListener so that you can act on the item being clicked. Add an int field to hold the position of the one expanded view, and initialize it to a negative value:

private int expandedPosition = -1;

最后，实现您的ViewHolder，onBindViewHolder（）方法和重写的onClick（）方法。您将扩大onBindViewHolder认为，如果它的位置等于expandedPosition，如果不是隐藏它。您可以设置expandedPosition的价值在onclick监听器：

Finally, implement your ViewHolder, onBindViewHolder() methods and override the onClick() method. You will expand the view in onBindViewHolder if it's position is equal to "expandedPosition", and hide it if not. You set the value of expandedPosition in the onClick listener:

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

这应该在一个时间扩展只有一个项目，使用系统默认的动画的布局变化。至少它为我工作。希望它能帮助。

This should expand only one item at a time, using the system-default animation for the layout change. At least it works for me. Hope it helps.

这篇关于RecyclerView展开/折叠项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！