[安卓开发Android][叠层 层叠 卡片效果]RecyclerView与CardView的混合使用
16lz
2021-01-25
实现效果
- 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是判断最后一个是否把底部上移
大功告成！
更多相关文章
- tab使用 TabActivity TabHost Tabspec常用方法
- Android下VideoView的研究
- Android--H5交互简介
- Android(安卓)Dialog 生命周期
- Android框架保证View更新必须在主线程的解读
- Android(安卓)读取扫码枪的内容，可以读取条形码 ，二维码
- android中view事件传递
- android HorizontalScrollView实现滚动状态监听
- android 开发 View _1_ View的子类们 和 视图坐标系图