Android长按图片多选效果(Recyclerview+Checkbox)的实现

xiaoxiao2021-02-28  21

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; /** * 是否显示checkbox */ private boolean isShowCheck; /** * 记录选中的checkbox */ 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(); } }); //adapter中定义的监听事件 可以根据isShowCheck判断当前状态,设置点击Item之后是查看大图(未实现 跳到下一个Activity即可)还是选中checkbox*/ 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。

转载请注明原文地址: https://www.6miu.com/read-1750371.html

最新回复(0)