RecyclerViewSelectableAdapterDemo【封裝BaseSelectableAdapter用於多選、單選,以及切換選中狀態等功能】

版權聲明:本文爲HaiyuKing原創文章,轉載請註明出處!html

前言

記錄封裝單選、多選、切換選中狀態的BaseSelectableAdapter基類,配合Recyclerview使用。java

注意:此Demo只是一個簡單的使用,那麼實際項目中須要靈活處理!android

效果圖

     

代碼分析

BaseSelectableAdapter:基類;git

BaseSelectable:接口;github

OnItemCheckListener:單選圖片的監聽事件app

使用步驟

1、項目組織結構圖

注意事項:dom

一、  導入類文件後須要change包名以及從新import R文件路徑ide

二、  Values目錄下的文件(strings.xml、dimens.xml、colors.xml等),若是項目中存在,則複製裏面的內容,不要整個覆蓋函數

2、導入步驟

(1)在build.gradle中引用recyclerview【版本號和appcompat保持一致】

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.recyclerviewselectableadapterdemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //RecyclerView compile "com.android.support:recyclerview-v7:27.1.1"
}

(2)在項目中實現Recyclerview基本數據展示

一、建立Bean類佈局

package com.why.project.recyclerviewselectableadapterdemo.bean;

/**
 * Created by HaiyuKing
 * Used 列表項的bean類
 */

public class Photo {
    private String id;
    private String path;

    public Photo(String id, String path) {
        this.id = id;
        this.path = path;
    }

    public Photo() {
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }
}
Photo.java

二、建立Adapter以及item的佈局文件【此時的Adapter只是最開始的基本寫法,後續繼承BaseSelectableAdapter後還須要修改

package com.why.project.recyclerviewselectableadapterdemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.why.project.recyclerviewselectableadapterdemo.R;
import com.why.project.recyclerviewselectableadapterdemo.bean.Photo;
import com.why.project.recyclerviewselectableadapterdemo.util.ResDrawableImgUtil;

import java.util.ArrayList;

/**
 * Created by HaiyuKing
 * Used 列表適配器
 */

public class ChannelAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
    /**上下文*/
    private Context myContext;
    /**頻道集合*/
    private ArrayList<Photo> listitemList;

    /**
     * 構造函數
     */
    public ChannelAdapter(Context context, ArrayList<Photo> itemlist) {
        myContext = context;
        listitemList = itemlist;
    }

    /**
     * 獲取總的條目數
     */
    @Override
    public int getItemCount() {
        return listitemList.size();
    }

    /**
     * 建立ViewHolder
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(myContext).inflate(R.layout.channel_list_item, parent, false);
        ItemViewHolder itemViewHolder = new ItemViewHolder(view);
        return itemViewHolder;
    }

    /**
     * 聲明grid列表項ViewHolder*/
    static class ItemViewHolder extends RecyclerView.ViewHolder
    {
        public ItemViewHolder(View view)
        {
            super(view);

            listItemLayout = view.findViewById(R.id.griditemLayout);
            gridImg =  view.findViewById(R.id.pic_gridimage);
            choseImg = view.findViewById(R.id.pic_chose);
        }

        RelativeLayout listItemLayout;
        ImageView gridImg;
        ImageView choseImg;
    }

    /**
     * 將數據綁定至ViewHolder
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int index) {

        //判斷屬於列表項仍是上拉加載區域
        if(viewHolder instanceof ItemViewHolder){
            Photo photo = listitemList.get(index);
            final ItemViewHolder itemViewHold = ((ItemViewHolder)viewHolder);

            String imgPath = photo.getPath();
            Log.e("ChannelAdapter","imgPath="+imgPath);
            itemViewHold.gridImg.setImageResource(ResDrawableImgUtil.getResourceIdByIdentifier(myContext,imgPath));

            //若是設置了回調,則設置點擊事件
            if (mOnItemClickLitener != null)
            {
                itemViewHold.listItemLayout.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了
                        mOnItemClickLitener.onItemClick(itemViewHold.listItemLayout, position);
                    }
                });
                //長按事件
                itemViewHold.listItemLayout.setOnLongClickListener(new View.OnLongClickListener() {
                    @Override
                    public boolean onLongClick(View view) {
                        int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了
                        mOnItemClickLitener.onItemLongClick(itemViewHold.listItemLayout, position);
                        return false;
                    }
                });
            }

        }
    }

    /**
     * 添加Item--用於動畫的展示*/
    public void addItem(int position,Photo listitemBean) {
        listitemList.add(position,listitemBean);
        notifyItemInserted(position);
    }
    /**
     * 刪除Item--用於動畫的展示*/
    public void removeItem(int position) {
        listitemList.remove(position);
        notifyItemRemoved(position);
    }

    /*=====================添加OnItemClickListener回調================================*/
    public interface OnItemClickLitener
    {
        void onItemClick(View view, int position);
        void onItemLongClick(View view, int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
    {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }
}
ChannelAdapter.java
<?xml version="1.0" encoding="utf-8"?>
<!-- 選擇圖片界面的九宮格item佈局 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/griditemLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#00C9C9C9"
    android:layout_margin="5dp">

    <!-- 圖片使用src和android:scaleType="centerCrop"、android:adjustViewBounds="true",能夠實現寬高等邊 -->
    <ImageView
        android:id="@+id/pic_gridimage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/item_img2"
        android:adjustViewBounds="true"
        android:layout_centerInParent="true"
        android:contentDescription="顯示圖片"
        android:layout_margin="2dp"
        />

    <!-- 選中圖標區域 -->
    <ImageView
        android:id="@+id/pic_chose"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:padding="10dp"
        android:adjustViewBounds="true"
        android:contentDescription="顯示單選框圖標"
        android:scaleType="centerCrop"
        android:src="@drawable/radio_img_noselect"
        />

</RelativeLayout>
channel_list_item.xml

三、將單選框圖標複製到項目中

 

四、在Activity佈局文件中引用Recyclerview控件

<?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="match_parent"
    android:background="#F4F4F4">

    <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:cacheColorHint="#00000000" android:divider="@null" android:listSelector="#00000000" android:scrollbars="none"
        />

</RelativeLayout>

五、在Activity類中初始化recyclerview數據【此時只是最基本的寫法,後續還須要修改

package com.why.project.recyclerviewselectableadapterdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;

import com.why.project.recyclerviewselectableadapterdemo.adapter.ChannelAdapter;
import com.why.project.recyclerviewselectableadapterdemo.bean.Photo;

import java.util.ArrayList;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private ArrayList<Photo> mPhotoArrayList;
    private ChannelAdapter mChannelAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();
        initEvents();

    }

    private void initViews() {
        mRecyclerView = findViewById(R.id.recycler_view);
    }

    private void initDatas() {
        //初始化集合
        mPhotoArrayList = new ArrayList<Photo>();
        for(int i=0; i<10;i++){
            Photo photo = new Photo();
            photo.setId("img"+i);
            int imgIndex = 1 + new Random().nextInt(3) % (1 + (3 - 1));
            photo.setPath("item_img" + imgIndex + ".jpg");

            mPhotoArrayList.add(photo);
        }

        //設置佈局管理器
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this,3);
        mRecyclerView.setLayoutManager(gridLayoutManager);

        //設置適配器
        if(mChannelAdapter == null){
            //設置適配器
            mChannelAdapter = new ChannelAdapter(this, mPhotoArrayList);
            mRecyclerView.setAdapter(mChannelAdapter);
            //添加分割線
            //設置添加刪除動畫
            //調用ListView的setSelected(!ListView.isSelected())方法,這樣就能及時刷新佈局
            mRecyclerView.setSelected(true);
        }else{
            mChannelAdapter.notifyDataSetChanged();
        }
    }

    private void initEvents() {
        //列表適配器的點擊監聽事件
        mChannelAdapter.setOnItemClickLitener(new ChannelAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {

            }

            @Override
            public void onItemLongClick(View view, int position) {

            }
        });
    }
}
MainActivity.java

六、Demo中使用到的圖片資源放在res/drawable中,因此demo中使用到了《ResDrawableImgUtil【根據圖片名稱獲取resID值或者Bitmap對象】

 

(3)將adapter/base包複製到項目中【根據實際狀況更換Bean類

(4)將ChannelAdapter繼承BaseSelectableAdapter<RecyclerView.ViewHolder>並修改

一、繼承BaseSelectableAdapter<RecyclerView.ViewHolder>

二、註釋或者去掉context、ArrayList<Photo>變量的聲明,由於BaseSelectableAdapter中已經聲明瞭;若是ArrayList<Photo>變量的名稱不相同的話,須要修改一處(ChannelAdapter或者BaseSelectableAdapter)

三、添加OnItemCheckListener回調,並添加到單選框圖標的點擊事件監聽中

四、初始化單選框圖標的選中/未選中狀態

package com.why.project.recyclerviewselectableadapterdemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.why.project.recyclerviewselectableadapterdemo.R;
import com.why.project.recyclerviewselectableadapterdemo.adapter.base.BaseSelectableAdapter;
import com.why.project.recyclerviewselectableadapterdemo.adapter.base.OnItemCheckListener;
import com.why.project.recyclerviewselectableadapterdemo.bean.Photo;
import com.why.project.recyclerviewselectableadapterdemo.util.ResDrawableImgUtil;

import java.util.ArrayList;

/**
 * Created by HaiyuKing
 * Used 列表適配器
 */

public class ChannelAdapter extends BaseSelectableAdapter<RecyclerView.ViewHolder> {

    /**上下文*/
    //private Context myContext;//由於BaseSelectableAdapter中定義了,因此此處須要註釋掉
    /**頻道集合*/
    //private ArrayList<Photo> listitemList;//由於BaseSelectableAdapter中定義了,因此此處須要註釋掉

    /**
     * 構造函數
     */
    public ChannelAdapter(Context context, ArrayList<Photo> itemlist) {
        myContext = context;
        listitemList = itemlist;
    }

    /**
     * 獲取總的條目數
     */
    @Override
    public int getItemCount() {
        return listitemList.size();
    }

    /**
     * 建立ViewHolder
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(myContext).inflate(R.layout.channel_list_item, parent, false);
        ItemViewHolder itemViewHolder = new ItemViewHolder(view);
        return itemViewHolder;
    }

    /**
     * 聲明grid列表項ViewHolder*/
    static class ItemViewHolder extends RecyclerView.ViewHolder
    {
        public ItemViewHolder(View view)
        {
            super(view);

            listItemLayout = view.findViewById(R.id.griditemLayout);
            gridImg =  view.findViewById(R.id.pic_gridimage);
            choseImg = view.findViewById(R.id.pic_chose);
        }

        RelativeLayout listItemLayout;
        ImageView gridImg;
        ImageView choseImg;
    }

    /**
     * 將數據綁定至ViewHolder
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int index) {

        //判斷屬於列表項仍是上拉加載區域
        if(viewHolder instanceof ItemViewHolder){
            final Photo photo = listitemList.get(index);
            final ItemViewHolder itemViewHold = ((ItemViewHolder)viewHolder);

            String imgPath = photo.getPath();
            Log.e("ChannelAdapter","imgPath="+imgPath);
            itemViewHold.gridImg.setImageResource(ResDrawableImgUtil.getResourceIdByIdentifier(myContext,imgPath));

            //若是設置了回調,則設置點擊事件
            if (mOnItemClickLitener != null)
            {
                itemViewHold.listItemLayout.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了
                        mOnItemClickLitener.onItemClick(itemViewHold.listItemLayout, position);
                    }
                });
                //長按事件
                itemViewHold.listItemLayout.setOnLongClickListener(new View.OnLongClickListener() {
                    @Override
                    public boolean onLongClick(View view) {
                        int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了
                        mOnItemClickLitener.onItemLongClick(itemViewHold.listItemLayout, position);
                        return false;
                    }
                });
            }

            //初始化列表項的是否選中狀態
            boolean isChecked = isSelected(photo); if(isChecked) {//選中狀態
 itemViewHold.choseImg.setImageResource(R.drawable.radio_img_selected); }else{//未選中狀態
 itemViewHold.choseImg.setImageResource(R.drawable.radio_img_noselect); } //單選框圖標的點擊事件
            itemViewHold.choseImg.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了 //注意,這裏是根據isEnable判斷是否可切換選擇狀態, 若是能夠的話,就進行切換(經過toggleSelection方法添加/移除photo實體類),而後展示出來
                    boolean isEnable = true;//默承認選擇,並且是可選擇任意數目
                    if (mOnItemCheckListener != null) {//對於單選、多選(設置最大個數)的狀況,是在onItemCheck中特殊處理的,並返回Boolean結果(超過多選的最大數目,就不能選擇了,因此須要返回false)
                        isEnable = mOnItemCheckListener.onItemCheck(position, photo,getSelectedPhotos().size() + (isSelected(photo) ? -1: 1)); } if(isEnable){//若是可選擇,則可切換選中狀態
                        toggleSelection(photo);//添加/移除到選擇的集合中
 notifyItemChanged(position); } } });

        }
    }

    /**
     * 添加Item--用於動畫的展示*/
    public void addItem(int position,Photo listitemBean) {
        listitemList.add(position,listitemBean);
        notifyItemInserted(position);
    }
    /**
     * 刪除Item--用於動畫的展示*/
    public void removeItem(int position) {
        listitemList.remove(position);
        notifyItemRemoved(position);
    }

    /*=====================添加OnItemClickListener回調================================*/
    public interface OnItemClickLitener
    {
        void onItemClick(View view, int position);
        void onItemLongClick(View view, int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
    {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }

    /*=====================添加OnItemCheckListener回調================================*/
    private OnItemCheckListener mOnItemCheckListener; public void setOnItemCheckListener(OnItemCheckListener mOnItemCheckListener) { this.mOnItemCheckListener = mOnItemCheckListener; }
}

3、使用方法

在MainActivity中添加OnItemCheckListener監聽事件

package com.why.project.recyclerviewselectableadapterdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;

import com.why.project.recyclerviewselectableadapterdemo.adapter.ChannelAdapter;
import com.why.project.recyclerviewselectableadapterdemo.adapter.base.OnItemCheckListener;
import com.why.project.recyclerviewselectableadapterdemo.bean.Photo;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private ArrayList<Photo> mPhotoArrayList;
    private ChannelAdapter mChannelAdapter;

    private int maxCount = 1;//若是值爲1,表明單選;若是值>1,表明多選且設置了最大數目


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();
        initEvents();

    }

    private void initViews() {
        mRecyclerView = findViewById(R.id.recycler_view);
    }

    private void initDatas() {
        //初始化集合
        mPhotoArrayList = new ArrayList<Photo>();
        for(int i=0; i<10;i++){
            Photo photo = new Photo();
            photo.setId("img"+i);
            int imgIndex = 1 + new Random().nextInt(3) % (1 + (3 - 1));
            photo.setPath("item_img" + imgIndex + ".jpg");

            mPhotoArrayList.add(photo);
        }

        //設置佈局管理器
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this,3);
        mRecyclerView.setLayoutManager(gridLayoutManager);

        //設置適配器
        if(mChannelAdapter == null){
            //設置適配器
            mChannelAdapter = new ChannelAdapter(this, mPhotoArrayList);
            mRecyclerView.setAdapter(mChannelAdapter);
            //添加分割線
            //設置添加刪除動畫
            //調用ListView的setSelected(!ListView.isSelected())方法,這樣就能及時刷新佈局
            mRecyclerView.setSelected(true);
        }else{
            mChannelAdapter.notifyDataSetChanged();
        }
    }

    private void initEvents() {
        //列表適配器的點擊監聽事件
        mChannelAdapter.setOnItemClickLitener(new ChannelAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {

            }

            @Override
            public void onItemLongClick(View view, int position) {

            }
        });

        //列表適配器的選擇監聽事件
        mChannelAdapter.setOnItemCheckListener(new OnItemCheckListener() { @Override public boolean onItemCheck(int position, Photo photo, int selectedItemCount) { //若是單選,那麼選中的圖片路徑集合確定只有一個
                if (maxCount <= 1) { List<Photo> selectedPhotos = mChannelAdapter.getSelectedPhotos(); if (!mChannelAdapter.containsThisImg(photo,selectedPhotos)) {//若是點擊的不是當前選中的圖片,則取消選中狀態,從新設置選中狀態
                        selectedPhotos.clear();//清空選中的圖片集合
 mChannelAdapter.notifyDataSetChanged(); } return true; } //若是多選,則特殊處理超過最大數目的狀況
                if (selectedItemCount > maxCount) { Toast.makeText(MainActivity.this,String.format("最多可選擇%1$d張圖片",maxCount),Toast.LENGTH_SHORT).show(); return false;//超過多選的最大數目,就不能選擇了,因此須要返回false
 } return true; } });
    }
}

若是想要獲取選中的圖片的集合,則使用List<Photo> selectedPhotos = mChannelAdapter.getSelectedPhotos();

混淆配置

參考資料

PhotoPicker

項目demo下載地址

https://github.com/haiyuKing/RecyclerViewSelectableAdapterDemo

相關文章
相關標籤/搜索