android多条目(多图)选择简单示例
1.需求介绍
一.*多条目点选
二.全选
三.取消全选
四.反选
2.实现思路
明确一点,我们拿到的一个数据集合是已知的,为了实现用户点选操作,需要对集合中的每个数据元素添加是否已选择的状态属性,用户操作后首先更改集合中的数据元素状态,然后更改对应的view状态,最后遍历这个集合,把其中状态为已选的元素添加到新集合返回即可得到用户已选的数据。
3.代码实现
一.主布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#63da85">
<TextView
android:id="@+id/tv_select_reverse"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:gravity="center"
android:text="反选"
android:textSize="16dp"/>
<TextView
android:text="选择条目"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:textColor="#ffffff"
android:textSize="20dp" />
<TextView
android:id="@+id/tv_select_all_or_no"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="全选"
android:textSize="16dp"/>
</RelativeLayout>
<GridView
android:id="@+id/gv_select"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="top"
android:layout_weight="1"
android:horizontalSpacing="5dp"
android:numColumns="4"
android:padding="1dp"
android:verticalSpacing="5dp"></GridView>
<Button
android:id="@+id/btn_ok"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="OK"
android:textColor="#000"
android:textSize="16dp" />
</LinearLayout>
二.条目布局
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/head"
android:scaleType="fitXY"
/>
<CheckBox
android:id="@+id/cb_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:focusable="false"
android:layout_gravity="right|top"
/>
</FrameLayout>
三.数据元素
package com.yuncai.menjin.multiselectiondemo;
import java.io.Serializable;
/**
* Function:代表数据元素
* Created by TianMing.Xiong on 18-9-28.
*/
public class ImgItem implements Serializable {
private String srcPath ;
private String thumbnailPath ;
private boolean isCheck ;
public ImgItem() {
}
public ImgItem(String srcPath, String thumbnailPath, boolean isCheck) {
this.srcPath = srcPath;
this.thumbnailPath = thumbnailPath;
this.isCheck = isCheck;
}
public String getSrcPath() {
return srcPath;
}
public void setSrcPath(String srcPath) {
this.srcPath = srcPath;
}
public String getThumbnailPath() {
return thumbnailPath;
}
public void setThumbnailPath(String thumbnailPath) {
this.thumbnailPath = thumbnailPath;
}
public boolean isCheck() {
return isCheck;
}
public void setCheck(boolean check) {
isCheck = check;
}
}
四.适配器
package com.yuncai.menjin.multiselectiondemo;
import android.app.Activity;
import android.content.Context;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.ImageView;
import java.util.ArrayList;
/**
* Function: 多图选择适配器
* Created by TianMing.Xiong on 18-9-28.
*/
public class MultiSelectAdapter extends BaseAdapter {
private Context context;
private ArrayList<ImgItem> imgItems;
public MultiSelectAdapter(Context context, ArrayList<ImgItem> imgItems) {
this.context = context;
this.imgItems = imgItems;
}
@Override
public int getCount() {
return imgItems.size();
}
@Override
public Object getItem(int position) {
return imgItems.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder ;
if(convertView==null){
convertView = View.inflate(context,R.layout.select_item,null);
viewHolder = new ViewHolder(convertView);
// 设置图片显示宽高
ViewGroup.LayoutParams params = viewHolder.ivItem.getLayoutParams();
DisplayMetrics dm = new DisplayMetrics();
((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(dm);
params.width = dm.widthPixels / 4;
params.height = dm.heightPixels / 4;
viewHolder.ivItem.setLayoutParams(params);
convertView.setTag(viewHolder);
}else {
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.ivItem.setImageResource(R.drawable.head);
viewHolder.cbItem.setChecked(imgItems.get(position).isCheck());
return convertView;
}
// 1.处理用户点击选择事件(拿到当前状态并取反)-->改变数据并改变view
public void onItemSelect(View view, int position) {
if(imgItems==null){
return;
}
ImgItem imgItem = imgItems.get(position);
boolean isCheck = !imgItem.isCheck();
imgItem.setCheck(isCheck);// change data
((ViewHolder)view.getTag()).cbItem.setChecked(isCheck);// change view
}
// 2.拿到所选条目
public ArrayList<ImgItem> getSelectItems() {
if(imgItems==null){
return null;
}
ArrayList<ImgItem> items = new ArrayList<>();
for (int i = 0; i < imgItems.size(); i++) {
if(imgItems.get(i).isCheck()){
items.add(imgItems.get(i));
}
}
return items;
}
// 全选
public void selectAll() {
if(imgItems==null){
return;
}
for (int i = 0; i < imgItems.size(); i++) {
imgItems.get(i).setCheck(true);
}
notifyDataSetChanged();
}
// 取消全选
public void cancelSelectAll() {
if(imgItems==null){
return;
}
for (int i = 0; i < imgItems.size(); i++) {
imgItems.get(i).setCheck(false);
}
notifyDataSetChanged();
}
// 反选
public void selectReverse() {
if(imgItems==null){
return;
}
for (int i = 0; i < imgItems.size(); i++) {
imgItems.get(i).setCheck(!imgItems.get(i).isCheck());
}
notifyDataSetChanged();
}
// holder
class ViewHolder{
ImageView ivItem;
CheckBox cbItem;
public ViewHolder(View convertView) {
this.ivItem = convertView.findViewById(R.id.iv_item);
this.cbItem = convertView.findViewById(R.id.cb_item);
}
}
}
五.主调类
package com.yuncai.menjin.multiselectiondemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private TextView tvSelectAllOrNo;
private GridView gvSelect;
private Button btnOk;
private TextView tvSelectReverse;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initView() {
tvSelectAllOrNo = (TextView) findViewById(R.id.tv_select_all_or_no);
gvSelect = (GridView) findViewById(R.id.gv_select);
btnOk = (Button) findViewById(R.id.btn_ok);
tvSelectReverse = (TextView) findViewById(R.id.tv_select_reverse);
}
private void initData() {
// get img data
ArrayList<ImgItem> imgItems = new ArrayList<>();
for (int i = 0; i < 50; i++) {
ImgItem imgItem = new ImgItem("", "", false);
imgItems.add(imgItem);
}
// grid view
final MultiSelectAdapter multiSelectAdapter = new MultiSelectAdapter(this, imgItems);
gvSelect.setAdapter(multiSelectAdapter);
gvSelect.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
multiSelectAdapter.onItemSelect(view, position);
}
});
// select reverse
tvSelectReverse.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
multiSelectAdapter.selectReverse();
}
});
// select all or no
final String all = "全选";
final String cancel_all = "取消全选";
tvSelectAllOrNo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (all.equals(tvSelectAllOrNo.getText())) {
multiSelectAdapter.selectAll();
tvSelectAllOrNo.setText(cancel_all);
} else {
multiSelectAdapter.cancelSelectAll();
tvSelectAllOrNo.setText(all);
}
}
});
// select result
btnOk.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ArrayList<ImgItem> items = multiSelectAdapter.getSelectItems();
Toast.makeText(MainActivity.this, "选择了" + items.size() + "条!", Toast.LENGTH_SHORT).show();
}
});
}
}
4.效果图