Android长按图片多选效果（Recyclerview+Checkbox）的实现

Android长按图片多选效果（Recyclerview+Checkbox）的实现

Step 1: 首先上效果图

我们要实现的效果是在一个Recyclerview的网格布局中，长按出现checkbox以及底部按钮。可以记录下我们选中的条目并显示它的位置。你可以在这里进行你想要的操作。

Step 2: 功能实现

每个item的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:id="@+id/rl_item"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/imgv_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
fresco:backgroundImage="@mipmap/imgv_fitness_gril"
fresco:placeholderImage="@mipmap/imgv_fitness_gril"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="true"
fresco:roundTopLeft="true"
fresco:roundTopRight="false"
fresco:roundedCornerRadius="50dp" />
<CheckBox
android:id="@+id/cb_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/imgv_item"
android:layout_alignRight="@id/imgv_item"
android:clickable="false" />
</RelativeLayout>

每个item大概就是这个样子：



从图中我们可以看出，它是一个有边框且右下角有一个Checkbox的布局。一般把

android:clickable

设置为

false

，然后通过响应item的点击事件设置

holder.mCbItem.setChecked(boolean)

来控制我们checkbox的选中与否。得益于Fresco的强大功能，可以在xml文件中轻松设置各个角的圆角。

fresco:roundBottomLeft="false"
fresco:roundBottomRight="true"
fresco:roundTopLeft="true"
fresco:roundTopRight="false"
fresco:roundedCornerRadius="50dp"

这就是一个左上和右下是50dp圆角的形状，（在截图中没有体现出来，但是程序运行起来是可以看到圆角的）。当然你可以把Checkbox放在其它任何你想要的位置。

2. 列表页的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.txs.multiplepicselect.MainActivity">
<TextView
android:background="#6CC4B8"
android:textColor="#fff"
android:gravity="center"
android:id="@+id/title"
android:text="图片长按多选"
android:layout_width="match_parent"
android:layout_height="40dp" />
<android.support.v7.widget.RecyclerView
android:layout_below="@id/title"
android:id="@+id/rcv"
android:layout_above="@id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<Button
android:layout_margin="5dp"
android:background="@drawable/selector_activity_login"
android:visibility="gone"
android:textColor="#fff"
android:text="选中的数据"
android:id="@+id/btn"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="40dp" />
</RelativeLayout>

整个布局也是很简单，顶部是一个title（仅仅是为了好看而已），上部是一个Recyclerview实现网格布局，下方是一个模仿发送功能的按钮，长按出现，再次长按则隐藏掉。顺便提一下，如果你是在项目中初次使用Recyclerview的话，在引入Recyclerview的时候，千万注意Recyclerview的版本要和你的

support:appcompat-v7

版本相同，即像这样：

implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support:recyclerview-v7:26.1.0'

里面的

26.1.0

要相同的哦。

3. 下面是我们Recyclerview的适配器：

/**
* @author txs
* @date 2018/01/14
*/

public class RecAdapter extends RecyclerView.Adapter<RecAdapter.MyViewHolder> {
private Context context;
/**
* 控制是否显示Checkbox
*/
private boolean showCheckBox;
/**
* 屏幕宽度 我们要动态设置每个item大小为屏幕宽度的1/3
*/
private int screenWidth;
/**
* 设置每个item 的params(大小)
*/
private GridLayoutManager.LayoutParams params;
/**
* frasco 使用
*/
private Uri uri;
public RecAdapter(Context context, List<String> list, int screenWidth) {
this.context = context;
this.list = list;
this.screenWidth = screenWidth;
//fresco 使用
uri = Uri.parse("res:///" + R.mipmap.imgv_fitness_gril);
}
public boolean isShowCheckBox() {
return showCheckBox;
}
public void setShowCheckBox(boolean showCheckBox) {
this.showCheckBox = showCheckBox;
}

/**
* 这就是适配器要传过来的数据集合了
*/
private List<String> list = new ArrayList<>();
/**
* 防止Checkbox错乱 做setTag  getTag操作
*/
private SparseBooleanArray mCheckStates = new SparseBooleanArray();

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
MyViewHolder holder = new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.item_pic, parent, false));
return holder;
}
@Override
public void onBindViewHolder(final MyViewHolder holder, final int position) {
//防止复用导致的checkbox显示错乱
holder.mCbItem.setTag(position);
//设置item宽高为屏幕宽度的1/3
params = (GridLayoutManager.LayoutParams) holder.mRlItem.getLayoutParams();
params.width = screenWidth / 3;
params.height = screenWidth / 3;
//判断当前checkbox的状态
if (showCheckBox) {
holder.mCbItem.setVisibility(View.VISIBLE);
//防止显示错乱
holder.mCbItem.setChecked(mCheckStates.get(position, false));
} else {
holder.mCbItem.setVisibility(View.GONE);
//取消掉Checkbox后不再保存当前选择的状态
holder.mCbItem.setChecked(false);
mCheckStates.clear();
}
//点击监听
holder.mRlItem.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (showCheckBox) {
holder.mCbItem.setChecked(!holder.mCbItem.isChecked());
}
onItemClickListener.onClick(view, position);
}
});
//长按监听
holder.mRlItem.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View view) {
return onItemClickListener.onLongClick(view, position);
}
});
//对checkbox的监听 保存选择状态 防止checkbox显示错乱
holder.mCbItem.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
int pos = (int) compoundButton.getTag();
if (b) {
mCheckStates.put(pos, true);
} else {
mCheckStates.delete(pos);
}

}
});
//fresco 使用
holder.mImgvItem.setImageURI(uri);
//        Glide.with(context).load(R.mipmap.imgv_fitness_gril).into(holder.mImgvItem);
}

@Override
public int getItemCount() {
//暂时做60个模拟数据
return 60;
}
/**
* 自己写接口，实现点击和长按监听
*/
public interface onItemClickListener {
void onClick(View view, int pos);

boolean onLongClick(View view, int pos);
}

private onItemClickListener onItemClickListener;

public void setOnItemClickListener(RecAdapter.onItemClickListener onItemClickListener) {
this.onItemClickListener = onItemClickListener;
}
class MyViewHolder extends RecyclerView.ViewHolder {
private RelativeLayout mRlItem;
private SimpleDraweeView mImgvItem;
private CheckBox mCbItem;
public MyViewHolder(View itemView) {
super(itemView);
mRlItem = (RelativeLayout) itemView.findViewById(R.id.rl_item);
mImgvItem = (SimpleDraweeView) itemView.findViewById(R.id.imgv_item);
mCbItem = (CheckBox) itemView.findViewById(R.id.cb_item);
}
}
}

整个适配器的大致流程如下：

首先，在创建适配器时传进来

screenWidth

，即屏幕宽度。随后我们可以在

onBindViewHolder

方法中设置Item宽高都为屏幕的1/3。增强布局的美观性。

随后，最应该解决的就是Recyclerview复用的问题。类似于ListView的satTag，防止Checkbox显示错乱。所以利用

private SparseBooleanArray mCheckStates = new SparseBooleanArray();

，通过

mCheckStates

中储存的

boolean

状态设置当前Checkbox的选中状态。

最后，Recyclerview没有点击监听对我们平时开发来说确实有些坑，但是也给了我们高度的自由去自行定制点击监听。我们可以自己写个接口实现我们的点击和长按效果（注意长按监听

onLongClick

返回值是

boolean

）。

4. MainActivity

public class MainActivity extends AppCompatActivity {
/**
* 网格布局的　Recyclerview
*/
private RecyclerView mRcv;
/**
* 显示所保存数据的按钮
*/
private Button mBtn;
/**
* recyclerview 的适配器
*/
private RecAdapter adapter;
/**
* 实际开发中用来保存联网获取的图片数据
*/
private List<String> list;
/**
* 是否显示ｃｈｅｃｋｂｏｘ
*/
private boolean isShowCheck;
/**
* 记录选中的ｃｈｅｃｋｂｏｘ
*/
private List<String> checkList;
/**
* 屏幕宽度
*/
private int screenWidth;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
//每行3个的Recyclerview网格布局
mRcv.setLayoutManager(new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false));
refreshUI();
initListener();
}

/**
* 适配器
*/
private void refreshUI() {
if (adapter == null) {
adapter = new RecAdapter(this, list, screenWidth);
mRcv.setAdapter(adapter);
} else {
adapter.notifyDataSetChanged();
}
}
/**
* 点击监听
*/
private void initListener() {
//button的点击
mBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, checkList.toString(), Toast.LENGTH_SHORT).show();
}
});
//ａｄａｐｔｅｒ中定义的监听事件　可以根据isShowCheck判断当前状态，设置点击Ｉｔｅｍ之后是查看大图（未实现　跳到下一个Ａｃｔｉｖｉｔｙ即可）还是选中ｃｈｅｃｋｂｏｘ*/
adapter.setOnItemClickListener(new RecAdapter.onItemClickListener() {
@Override
public void onClick(View view, int pos) {
if (checkList.contains(String.valueOf(pos))) {
checkList.remove(String.valueOf(pos));
} else {
checkList.add(String.valueOf(pos));
}
}
@Override
public boolean onLongClick(View view, int pos) {
if (isShowCheck) {
mBtn.setVisibility(View.GONE);
adapter.setShowCheckBox(false);
refreshUI();
checkList.clear();
} else {
adapter.setShowCheckBox(true);
refreshUI();
mBtn.setVisibility(View.VISIBLE);
}
isShowCheck = !isShowCheck;
return false;
}

});

}
private void initData() {
list = new ArrayList<>();
checkList = new ArrayList<>();
list.add("1");
//屏幕宽度
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels;
}
private void initView() {
mRcv = (RecyclerView) findViewById(R.id.rcv);
mBtn = (Button) findViewById(R.id.btn);
}
}

这里最应该讲的是这个checkList,通过它来保存我们点击过的Item信息，如果点击过则再次点击时

remove

掉此信息，否则

add

进来。

写的不好，还请多多指教。

github项目地址：https://github.com/tangxuesong6/multiplepicselect/tree/master。