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

Step 1: 首先上效果图

最终效果

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

Step 2: 功能实现

每个item的布局文件：

xmlns:fresco="http://schemas.android.com/apk/res-auto"

android:id="@+id/rl_item"

android:layout_width="match_parent"

android:layout_height="match_parent">

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" />

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" />

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

布局

从图中我们可以看出，它是一个有边框且右下角有一个Checkbox的布局。一般把android:clickable设置为false，然后通过响应item的点击事件设置holder.mCbItem.setChecked(boolean)来控制我们checkbox的选中与否。得益于Frasco的强大功能，可以在xml文件中轻松设置各个角的圆角。

fresco:roundBottomLeft="false"

fresco:roundBottomRight="true"

fresco:roundTopLeft="true"

fresco:roundTopRight="false"

fresco:roundedCornerRadius="50dp"

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

列表页的布局文件：

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">

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:layout_below="@id/title"

android:id="@+id/rcv"

android:layout_above="@id/btn"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

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" />

整个布局也是很简单，顶部是一个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要相同的哦。

下面是我们Recyclerview的适配器：

/**

* @author txs

* @date 2018/01/14

*/

public class RecAdapter extends RecyclerView.Adapter {

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 list, int screenWidth) {

this.context = context;

this.list = list;

this.screenWidth = screenWidth;

//frasco 使用

uri = Uri.parse("res:///" + R.mipmap.imgv_fitness_gril);

}

public boolean isShowCheckBox() {

return showCheckBox;

}

public void setShowCheckBox(boolean showCheckBox) {

this.showCheckBox = showCheckBox;

}

/**

* 这就是适配器要传过来的数据集合了

*/

private List 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);

}

}

});

//frasco 使用

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。增强布局的美观性。

随后，最应该解决的就是Recyclerviewl复用的问题。类似于ListView的satTag，防止Checkbox显示错乱。所以利用private SparseBooleanArray mCheckStates = new SparseBooleanArray();，通过mCheckStates中储存的boolean状态设置当前Checkbox的选中状态。

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

MainActivity

public class MainActivity extends AppCompatActivity {

/**

* 网格布局的　Recyclerview

*/

private RecyclerView mRcv;

/**

* 显示所保存数据的按钮

*/

private Button mBtn;

/**

* recyclerview 的适配器

*/

private RecAdapter adapter;

/**

* 实际开发中用来保存联网获取的图片数据

*/

private List list;

/**

* 是否显示ｃｈｅｃｋｂｏｘ

*/

private boolean isShowCheck;

/**

* 记录选中的ｃｈｅｃｋｂｏｘ

*/

private List 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。