天天看點

RecycleView的通用擴充卡BaseQuickAdapter處理item中子控件的點選事件以及cardview卡片陰影

之前的清單更多的是用Listview和GridView,很少使用RecycleView,導緻使用擴充卡謝了很多代碼,并且在處理item的子控件的點選事件的時候顯得捉襟見肘,總是會有各種問題,但是RecycleView卻又不像LIstview和GridView那樣可以很友善的這是item的間距,關于這個問題下邊也給出了很簡單的方案,親測完全實作,這樣RecycleView就完勝了ListView和GridView,現在主要解決item中子控件的點選事件,如下圖所示:
RecycleView的通用擴充卡BaseQuickAdapter處理item中子控件的點選事件以及cardview卡片陰影

需求就是點選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, );
        recycleview.setLayoutManager(manager);
        rvAdapter = new RvAdapter(R.layout.hot_recommend_item, list_hot,this);
        recycleview.setAdapter(rvAdapter);
           
至此完全搞定