如何在RecyclerView中展开和折叠卡片？

时间：2017-11-21 07:20:07

标签： java android android-recyclerview android-cardview

我在互联网上经历了20-30个链接，但没有一个是有用的，因为每个代码都有一定的局限性。 我在RecyclerView的RelativeLayout中有卡片，我希望在单击详细信息按钮时展开。 CardViews里面只有textViews和Buttons，而不是列表。请查看我的代码并帮助我如何实现这一目标。

activity_phrase_search.xml： 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_phrase_search"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="in.hkcl.pdfsearcher.PhraseSearchActivity"
    android:background="#EEEEEE">

    <include android:id="@+id/toolbar"
        layout="@layout/toolbar_layout"></include>

    <EditText
        android:id="@+id/inputSearchPhrase"
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:padding="5dp"
        android:textColor="#004D40"
        android:inputType="text"
        android:ellipsize="end"
        android:scrollHorizontally="true"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/search_edittext"
        android:ems="10"
        android:hint="Search your phrase here ..."
        android:drawableLeft="@drawable/search"
        android:drawableRight="@drawable/deletetext"
        android:drawablePadding="12dp"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclrviewPhrase"
        android:layout_marginTop="8dp"
        android:layout_below="@id/inputSearchPhrase"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:behavior_overlapTop="14dp" />

component_phrase_list.xml： 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#9E9E9E"
    android:clickable="true"
    android:focusable="true"
    android:paddingBottom="4dp"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:paddingTop="8dp"
    >
    <android.support.v7.widget.CardView
        android:id="@+id/outerBoundaryCard"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="4dp"
        android:background="?android:attr/selectableItemBackground">
        <RelativeLayout
            android:id="@+id/visible_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="10dp">
    <TextView
        android:id="@+id/documentName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:gravity="center_vertical"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/details_btn"
        android:layout_below="@id/documentName"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_marginTop="5dp"
        android:text="Details"
        android:textColor="#FFFFFF"
        android:background="#FBCC38"
        android:textStyle="bold"/>

    <ImageButton
        android:id="@+id/link_btn"
        android:layout_below="@id/documentName"
        android:src="@drawable/link"
        android:layout_toLeftOf="@id/details_btn"
        android:layout_marginTop="5dp"
        android:layout_marginRight="10dp"
        android:layout_width="50dp"
        android:layout_height="40dp"
        android:background="#FFFFFF"/>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

    <LinearLayout
        android:id="@+id/hidden_layout"
        android:layout_below="@id/outerBoundaryCard"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <TextView
        android:id="@+id/expanded_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"/>
    </LinearLayout>

    <View
        android:id="@+id/hr"
        android:layout_below="@id/hidden_layout"
        android:layout_marginTop="5dp"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#FFFFFF"></View>

</RelativeLayout>

RecyclerViewAdapterPhraseList.java： 

package in.hkcl.pdfsearcher;

import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.support.transition.TransitionManager;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

/**
 * Created by Android on 11/17/2017.
 */

public class RecyclerViewAdapterPhraseList extends RecyclerView.Adapter<RecyclerViewAdapterPhraseList.PhraseListHolder> {

    private ArrayList<PhraseModel.PhraseList> mPhraseList;
    public  boolean isExpanded=false;


    public class PhraseListHolder extends RecyclerView.ViewHolder {
        TextView documentName,expanded_text;
        Button detailsBtn;
        ImageButton linkBtn;
        LinearLayout hidden_layout;

        /*RelativeLayout expandable_view;*/

        public PhraseListHolder(View itemView) {
            super(itemView);
            documentName=(TextView)itemView.findViewById(R.id.documentName);
            detailsBtn=(Button)itemView.findViewById(R.id.details_btn);
            linkBtn=(ImageButton)itemView.findViewById(R.id.link_btn);
            expanded_text=(TextView)itemView.findViewById(R.id.expanded_text);
            hidden_layout=(LinearLayout)itemView.findViewById(R.id.hidden_layout);
            /*expandable_view=(RelativeLayout)itemView.findViewById(R.id.expandable_view);*/
        }
    }

    public RecyclerViewAdapterPhraseList(ArrayList<PhraseModel.PhraseList> mPhraseList) {
        this.mPhraseList = mPhraseList;
    }

    @Override
    public RecyclerViewAdapterPhraseList.PhraseListHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.component_phrase_list,parent,false);
        PhraseListHolder phraseListHolder=new PhraseListHolder(view);
        return phraseListHolder;
    }

    @Override
    public void onBindViewHolder(final RecyclerViewAdapterPhraseList.PhraseListHolder holder, final int position) {
        String documentNameWithoutUrl=mPhraseList.get(position).documentName;

        holder.documentName.setText(documentNameWithoutUrl.substring(documentNameWithoutUrl.lastIndexOf('/')+1, documentNameWithoutUrl.length()));
        holder.linkBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(Intent.ACTION_VIEW);
                i.setData(Uri.parse(mPhraseList.get(position).getDocumentName()));
                v.getContext().startActivity(i);

            }
        });

        holder.detailsBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /*Intent j = new Intent (v.getContext(), OccurenceDetailsActivity.class);
                j.putParcelableArrayListExtra("occurences",mPhraseList.get(position).getOccurenceDetails());
                v.getContext().startActivity(j);*/
                holder.expanded_text.setVisibility(View.VISIBLE);
                holder.expanded_text.setEnabled(true);
                holder.expanded_text.setText(mPhraseList.get(position).getNoOfOccurences());

            }
        });
    }

    @Override
    public int getItemCount() {
        return mPhraseList.size();
    }
}

stackoverflow上的早期链接不是根据我的代码，所以我在实现它们时面临很多问题。 Plz帮我怎么做？

3 个答案:

答案 0 :(得分：1)

在我看来，可以通过使用id expanded_text 设置TextView的高度来设置卡的扩展和折叠，而不是仅仅切换可见性。

扩展/折叠动画的实现可以通过以下方式完成：

holder.detailsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            /*Intent j = new Intent (v.getContext(), OccurenceDetailsActivity.class);
            j.putParcelableArrayListExtra("occurences",mPhraseList.get(position).getOccurenceDetails());
            v.getContext().startActivity(j);*/


            holder.expanded_text.setText(mPhraseList.get(position).getNoOfOccurences());

            // Object Animator to animate the expanded_text TextView 
            ObjectAnimator scaleHeightAnim;

            // Checking if the TextView is already visible, if "yes", 
            //animating and collapsing the TextView, else expanding the TextView. 
            if (expanded_text.getVisibility() == View.VISIBLE) {

                AnimatorSet animatorSet = new AnimatorSet();

                scaleHeightAnim = ObjectAnimator.ofFloat(expanded_text, "height", expanded_text.getHeight(), 0);

                animatorSet.play(scaleHeightAnim);
                animatorSet.setDuration(1000);
                animatorSet.start();

                animatorSet.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        expanded_text.setVisibility(View.GONE);
                    }
                });

            } else {

                AnimatorSet animatorSet = new AnimatorSet();

                expanded_text.setVisibility(View.VISIBLE);
                scaleHeightAnim = ObjectAnimator.ofFloat(expanded_text, "height", 0, expanded_text.getHeight());

                animatorSet.play(scaleHeightAnim);
                animatorSet.setDuration(1000);
                animatorSet.start();
            }

        }
    });

我希望此技巧可以帮助您为CardView中细节文本的扩展/折叠添加柔和动画效果。如果有任何疑虑，请告诉我。

谢谢。 ：）

答案 1 :(得分：0)

我在布局和适配器上做了一些更改

//这是您隐藏的布局

<LinearLayout
        android:id="@+id/hidden_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/outerBoundaryCard"
        android:background="@color/colorPrimaryDark"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/expanded_text"
            />
    </LinearLayout>

//这是您的观看者

public class PhraseListHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    TextView documentName, expanded_text;
    Button detailsBtn;
    ImageButton linkBtn;
    LinearLayout hidden_layout;

    /*RelativeLayout expandable_view;*/

    public PhraseListHolder(View itemView) {
        super(itemView);
        documentName = itemView.findViewById(R.id.documentName);
        detailsBtn = itemView.findViewById(R.id.details_btn);
        linkBtn =  itemView.findViewById(R.id.link_btn);
        expanded_text = itemView.findViewById(R.id.expanded_text);
        hidden_layout = itemView.findViewById(R.id.hidden_layout);

        detailsBtn.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        hidden_layout.setVisibility(View.VISIBLE);
        hidden_layout.setEnabled(true);
     expanded_text.setText(mPhraseList.get(getAdapterPosition()).getNoOfOccurences());
    }
}

告诉我它是否解决了你的问题

答案 2 :(得分：0)

您的代码工作正常，您已经在您的detailsBtn点击上有扩展代码。只需检查“mPhraseList.get（position）.getNoOfOccurences（）”的值是否为空，我认为它会为您提供空字符串。

相关问题
最新问题