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的选中与否。得益于Frasco的强大功能,可以在xml文件中轻松设置各个角的圆角。
fresco:roundBottomLeft="false"
fresco:roundBottomRight="true"
fresco:roundTopLeft="true"
fresco:roundTopRight="false"
fresco:roundedCornerRadius="50dp"
这就是一个左上和右下是50dp圆角的形状,(在截图中没有体现出来,但是程序运行起来是可以看到圆角的)。当然你可以把Checkbox放在其它任何你想要的位置。
- 列表页的布局文件:
<?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
要相同的哦。
- 下面是我们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;
//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<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);
}
}
});
//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<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。