RecycleView的通用适配器BaseQuickAdapter处理item中子控件的点击事件以及cardview卡片阴影

之前的列表更多的是用Listview和GridView,很少使用RecycleView,导致使用适配器谢了很多代码,并且在处理item的子控件的点击事件的时候显得捉襟见肘,总是会有各种问题,但是RecycleView却又不像LIstview和GridView那样可以很方便的这是item的间距,关于这个问题下边也给出了很简单的方案,亲测完全实现,这样RecycleView就完胜了ListView和GridView,现在主要解决item中子控件的点击事件,如下图所示:
这里写图片描述
需求就是点击item中的图片进入详情页,点击右下角图片更换一张图片
这里要实现卡片效果就可以给item的根部局使用cardview,通过设置z轴方向的阴影实现卡片效果
先说不带阴影效果的item布局

<?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="250dp"
    android:background="@color/white"
    android:descendantFocusability="afterDescendants"
    android:layout_marginBottom="@dimen/ali_auth_space_10"
    android:layout_marginLeft="@dimen/ali_auth_space_10"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="6"
        android:background="@color/white"
        android:gravity="center">

        <ImageView
            android:id="@+id/iv_shopImgitem"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="@color/line_bg_color"
            android:scaleType="centerCrop"
            android:src="@drawable/default_img" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="@color/white">

        <ImageView
            android:id="@+id/iv_zuo"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/shopdivide" />

        <ImageView
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="@color/shopdivide" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignParentBottom="true"
            android:background="@color/shopdivide" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="@dimen/margin_5dp"
            android:layout_marginRight="1dp"
            android:layout_toRightOf="@id/iv_zuo"
            android:background="@color/white"
            android:layout_marginBottom="1dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_shopName"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:singleLine="true"
                android:text="商品名称"
                android:textColor="@color/tab_text_color"
                android:textSize="@dimen/text_size_hint" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="15dp"
                    android:layout_height="match_parent"
                    android:scaleType="centerInside"
                    android:src="@drawable/jifenbi" />

                <TextView
                    android:id="@+id/tv_needJifen"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="@dimen/margin_5dp"
                    android:gravity="center_vertical"
                    android:text="200"
                    android:textColor="@color/shoptextcolor"
                    android:textSize="@dimen/text_size_middle" />

                <TextView
                    android:id="@+id/tv_price_yuan"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="8dp"
                    android:gravity="center_vertical"
                    android:text="¥218"
                    android:textColor="@color/text_color_summery"
                    android:textSize="@dimen/text_size_hint" />



                <RelativeLayout
                    android:id="@+id/ll_love"
                    android:layout_width="match_parent"
                    android:gravity="center_vertical"
                    android:layout_height="match_parent">
                    <ImageView
                        android:layout_width="1dp"
                        android:layout_height="18dp"
                       android:layout_centerInParent="true"
                        android:background="@color/div_color" />

                    <ImageView
                        android:id="@+id/iv_love"
                        android:layout_width="23dp"
                        android:layout_height="match_parent"
                        android:layout_alignParentRight="true"
                        android:layout_marginRight="@dimen/margin_5dp"
                        android:scaleType="centerInside"
                        android:src="@drawable/like" />
                </RelativeLayout>

            </LinearLayout>

        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

如果需要卡片阴影效果,就把上述根部局LinerLayout改成CardView
但使用之前在build。gridle中需要添加依赖
compile ‘com.android.support:cardview-v7:25.0.0’
方法如下:

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="160dp"
    android:layout_height="200dp"
    android:layout_margin="1dp"
    android:padding="4dp"
    app:cardCornerRadius="2dp"
    app:cardElevation="4dp"
    app:cardPreventCornerOverlap="false"
    app:cardUseCompatPadding="true">
    、、、

至此item布局就完成了,这里补充一下Cardview中的其他参数

app:cardBackgroundColor这是设置背景颜色
app:cardCornerRadius这是设置圆角大小
app:cardElevation这是设置z轴的阴影
app:cardMaxElevation这是设置z轴的最大高度值
app:cardUseCompatPadding是否使用CompatPadding
app:cardPreventCornerOverlap是否使用PreventCornerOverlap
app:contentPadding 设置内容的padding
app:contentPaddingLeft 设置内容的左padding
app:contentPaddingTop 设置内容的上padding
app:contentPaddingRight 设置内容的右padding
app:contentPaddingBottom 设置内容的底padding

然后就是写适配器,填充item中的数据
添加Recycle和BaseQuickAdapter依赖:

   compile 'com.android.support:recyclerview-v7:25.0.0-alpha1'
    compile 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.0'
repositories {
    、、、
    maven { url "https://jitpack.io" }这个也要添加
}

自定义BaseQuickAdapter的类,这里就不像之前写的那么复杂还要复用,直接暴力加载item赋值,注意不要导错包,

package com.lab.web.adapter;

import android.content.Context;
import android.graphics.Paint;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.squareup.picasso.Picasso;

import java.util.List;
import java.util.Map;

import lab.tonglu.com.hybriddemo.R;

/**
 * Created by YTF on 2017/9/11.
 */

public class RvAdapter extends BaseQuickAdapter<Map<String, Object>, BaseViewHolder> {
    private Context context;
    private ImageView view;

    public RvAdapter(int layoutResId, List<Map<String, Object>> data, Context context) {
        super(layoutResId, data);
        this.context = context;
    }

    @Override
    protected void convert(BaseViewHolder helper, Map<String, Object> item) {
        view = helper.getView(R.id.iv_shopImgitem);
//        helper.setImageUrl();
        Picasso.with(context)
                .load((String) item.get("shopImg"))
                .fit()
                .placeholder(R.drawable.default_img)
                .into(view);
        helper.setText(R.id.tv_shopName, (CharSequence) item.get("shopName"))
                .setText(R.id.tv_needJifen,String.valueOf(item.get("jifen")) )
                .setText(R.id.tv_newPrice, String.valueOf(item.get("buprice")) )
                .setText(R.id.tv_price_yuan, "¥" + String.valueOf(item.get("price")))
        .setImageResource(R.id.iv_love,R.drawable.like);
        TextView textView = helper.getView(R.id.tv_price_yuan);
        textView.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);//添加删除线
        helper.addOnClickListener(R.id.ll_love);
        helper.addOnClickListener(R.id.iv_love);
        helper.addOnClickListener(R.id.iv_shopImgitem);
        //上述操作就是直接给item子控件添加点击事件,至于处理,在acvitity中执行,向下看

    }
}

接下来就是使用RecycleView展示数据了,依赖上边已经加过了,acvitity布局文件在需要位置添加RecycleView控件,加上id即可:

    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="@dimen/marginjianju_10dp"
                        android:layout_marginTop="@dimen/marginjianju_10dp"
                        android:background="@color/shopbg">

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

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

至于上边为何RecycleView要用一个相对布局包括给大家解释一下,虽然看着没有必要,但其实这样做是为了给RecycleView添加横向和纵向间距用的,上边item的根布局你也会看到添加了左边距和下边距,因为网上有很多用代码单独给RecycleView添加分割线或者间距很是麻烦,并且不一定有效果,这样利用item和根部局的色差就可以简单完整的实现,如果没有色差,有了间距后再用ImageView填充也是一样效果
最后一步:展示图片,添加item子控件点击事件

  recycleview= (RecyclerView) findViewById(R.id.recycleview);
        recycleview.addOnItemTouchListener(new OnItemChildClickListener() {
            @Override
            public void onSimpleItemChildClick(BaseQuickAdapter adapter, View view, int position) {

            }

            @Override
            public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
                super.onItemChildClick(adapter, view, position);
                int itemViewId = view.getId();
                mapItem=list_hot.get(position);
                imageViewLove= (ImageView) view.findViewById(R.id.iv_love);
                switch (itemViewId) {
                    case R.id.iv_shopImgitem:
                        String imgURL= (String) mapItem.get("shopImg");
                        Intent intentShop=new Intent(context,DaiFuKuanActivity.class);
                        intentShop.putExtra("url_huo",imgURL);
                        startActivity(intentShop);
                        break;
                    case R.id.ll_love:
                        if (ifLike){
                            imageViewLove.setImageResource(R.drawable.like);
                            ifLike=false;
                        }else {
                            imageViewLove.setImageResource(R.drawable.star);
                            ifLike=true;
                        }
                        break;
                    case R.id.iv_love:
                        if (ifLike){
                            imageViewLove.setImageResource(R.drawable.like);
                            ifLike=false;
                        }else {
                            imageViewLove.setImageResource(R.drawable.star);
                            ifLike=true;
                        }
                        break;
                }
            }
        });
        GridLayoutManager manager = new GridLayoutManager(this, 2);
        recycleview.setLayoutManager(manager);
        rvAdapter = new RvAdapter(R.layout.hot_recommend_item, list_hot,this);
        recycleview.setAdapter(rvAdapter);

至此完全搞定

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值