[安卓开发Android][叠层 层叠 卡片效果]RecyclerView与CardView的混合使用

实现效果

• RecyclerView起到一个叠层效果
• CardView起到一个阴影效果
  

一、引入依赖

引入依赖到【bind.gradle】dependencies{}下

    implementation 'com.android.support:cardview-v7:27.1.1'
    implementation 'com.android.support:recyclerview-v7:27.1.1'

二、xml文件

	<android.support.v7.widget.RecyclerView
        android:id="@+id/rv_02_bankcard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

三、定义列表模板xml文件

• CardView 属性
  - app:cardCornerRadius 设置圆角的半径
  - app:cardElevation 设置阴影的半径
  - app:cardBackgroundColor="“设置背景色
  - app:cardMaxElevation=”" 设置Z轴最大高度值
  - app:cardUseCompatPadding="" 是否使用CompatPadding
  - app:cardPreventCornerOverlap="" 是否使用PreventCornerOverlap
  - app:contentPadding="" 内容的Padding
  - app:contentPaddingTop="" 内容的上Padding
  - app:contentPaddingLeft="" 内容的左Padding
  - app:contentPaddingRight="" 内容的右Padding
  - app:contentPaddingBottom="" 内容的下Padding
  如果需要改变阴影的颜色可以自定义颜色CardView
  [list_menber_bankcard.xml]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    >
    <android.support.v7.widget.CardView
        android:id="@+id/cv_bankcard"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        app:cardPreventCornerOverlap="true"
        app:cardCornerRadius="10dp"
        app:cardBackgroundColor="@color/bankColorGreen"
        app:cardUseCompatPadding="true"
        app:cardElevation="5dp"
        app:cardMaxElevation="3dp"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="10dp"
            android:padding="10dp"
            >
            <com.makeramen.roundedimageview.RoundedImageView
                android:id="@+id/iv_member_form"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@mipmap/bank_jianhang"
                app:riv_border_color="#00000000"
                app:riv_corner_radius="100dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:gravity="center">
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:layout_marginLeft="5dp">
                    <TextView
                        android:id="@+id/tv_member_bankname"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="中国建设银行"
                        style="@style/tv_text_white" />
                    <TextView
                        android:id="@+id/tv_member_bankfrom"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="储蓄卡"
                        android:textSize="15sp"
                        style="@style/tv_text_white"/>
                </LinearLayout>

                <TextView
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:gravity="right"
                    android:text="****"
                    style="@style/tv_text_white"
                    android:textSize="17sp"/>
                <TextView
                    android:id="@+id/tv_member_mantissa"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="9854"
                    android:textStyle="bold"
                    android:layout_marginLeft="4dp"
                    style="@style/tv_text_white"
                    />
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom|right"

            android:padding="10dp"
            >
            <TextView

                android:id="@+id/tv_member_quota"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="15sp"
                style="@style/tv_text_white"
                android:text="每日支付限额10000元"/>

        </LinearLayout>


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


</LinearLayout>

四、自定义RecyclerView列表适配器

[ListMenberBankcardAdapter.java]

1.继承 RecyclerView.Adapter，实现父类方法

• 再添加数据源，通过构造方法初始化它
  
• 在方法onCreateViewHolder中绑定视图
  
• 方法getItemCount中返回的是列表的长度
  
• 初始化视图里面的控件就ok了
  
• 在对控件进行赋值什么的
  
  完整的适配器代码

public class ListMenberBankcardAdapter extends RecyclerView.Adapter {
    private Context mContext;
    private List<HashMap<String,Object>> mEntityList;

    public ListMenberBankcardAdapter(Context mContext, List<HashMap<String,Object>> mEntityList) {
        this.mContext = mContext;
        this.mEntityList = mEntityList;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.list_menber_bankcard, parent, false);
        return new DemoViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        /*BaseEntity entity = mEntityList.get(position);*/
        ((DemoViewHolder) holder).ivMemberForm.setBackgroundResource(R.mipmap.bank_jianhang);
        ((DemoViewHolder) holder).tvMemberBankname.setText(mEntityList.get(position).get("bandname").toString());
        ((DemoViewHolder) holder).tvMemberBankfrom.setText(mEntityList.get(position).get("bankfrom").toString());
        ((DemoViewHolder) holder).tvMemberMantissa.setText(mEntityList.get(position).get("mantissa").toString());
        ((DemoViewHolder) holder).tvMemberQuota.setText(mEntityList.get(position).get("quota").toString());
        if (position%2==0){
            ((DemoViewHolder) holder).cvBankcard.setCardBackgroundColor(((DemoViewHolder) holder).color);
        }
    }

    @Override
    public int getItemCount() {
        return mEntityList.size();
    }
    private class DemoViewHolder extends RecyclerView.ViewHolder{

        private RoundedImageView ivMemberForm;
        private TextView tvMemberBankname;
        private TextView tvMemberBankfrom;
        private TextView tvMemberMantissa;
        private TextView tvMemberQuota;
        private CardView cvBankcard;
        private int color;
        public DemoViewHolder(View view) {
            super(view);
            ivMemberForm = (RoundedImageView) view.findViewById(R.id.iv_member_form);
            tvMemberBankname = (TextView) view.findViewById(R.id.tv_member_bankname);
            tvMemberBankfrom = (TextView) view.findViewById(R.id.tv_member_bankfrom);
            tvMemberMantissa = (TextView) view.findViewById(R.id.tv_member_mantissa);
            tvMemberQuota = (TextView) view.findViewById(R.id.tv_member_quota);
            cvBankcard=view.findViewById(R.id.cv_bankcard);
            color=view.getResources().getColor(R.color.bankColorBlue);
        }
    }
}

五、绑定适配器

rv02bankcard 就是RecyclerView初始化名

 final List<HashMap<String,Object>> listbank=new ArrayList<>();
        HashMap<String,Object> hashM=new HashMap<>();
        hashM.put("bandname","建设银行");
        hashM.put("bankfrom","储蓄卡");
        hashM.put("mantissa","1278");
        hashM.put("quota","每日支付限额10000元");
        listbank.add(hashM);
        HashMap<String,Object> hashM1=new HashMap<>();
        hashM1.put("bandname","邮政银行");
        hashM1.put("bankfrom","储蓄卡");
        hashM1.put("mantissa","7898");
        hashM1.put("quota","每日支付限额20000元");
        listbank.add(hashM1);
        HashMap<String,Object> hashM2=new HashMap<>();
        hashM2.put("bandname","建设银行");
        hashM2.put("bankfrom","储蓄卡");
        hashM2.put("mantissa","4758");
        hashM2.put("quota","每日支付限额10000元");
        listbank.add(hashM2);

        // 定义一个线性布局管理器
        LinearLayoutManager manager = new LinearLayoutManager(holder.context);
        // 设置布局管理器
        rv02bankcard.setLayoutManager(manager);
        //初始化适配器 传入参数，context，listbank→数据源
        ListMenberBankcardAdapter adapter1=new ListMenberBankcardAdapter(holder.context,listbank);
        rv02bankcard.setAdapter(adapter1);

线性布局管理器是要定义的不然没有效果

这一步成功后会实现一个银行卡列表功能

怎么实现折叠效果呢
方法addItemDecoration可以实现

		rv02bankcard.addItemDecoration(new RecyclerView.ItemDecoration() {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                super.getItemOffsets(outRect, view, parent, state);
                
                }
        });

在方法里添加个outRect.bottom = -100 ;就可以实现

		rv02bankcard.addItemDecoration(new RecyclerView.ItemDecoration() {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                super.getItemOffsets(outRect, view, parent, state);
                if (parent.getChildPosition(view) != (listbank.size() - 1)) {
                    outRect.bottom = -330;
                }

            }
        });

if是判断最后一个是否把底部上移

大功告成！