Android网格布局GridView实现漂亮的多选效果

砸漏

发布于 2020-10-28 19:20:53

1.2K0

发布于 2020-10-28 19:20:53

文章被收录于专栏：恩蓝脚本

上一篇文章中主要讲了GridView的简单应用，以网格的形式展示了一些图片，对于图片也有点击监听操作。但是，如果我们在浏览图片的时候需要一些选中操作、甚至是多选操作的时候。这样的功能我们又该如何实现呢？

可以使用ActionBar +GridView的形式实现！在谈及具体实现之前，首先我们先了解一下什么是

ActionBar：

Action Bar是活动中的一种控件，用以代替传统的品目顶端的标题栏，它提供了多便利性。有关其详细内容会在以后研究，现在主要考虑上述需求的实现。

先上效果图

首先是关于ActionBar的布局文件：主要是用于实现全选与全不选的功能的。

<?xml version="1.0" encoding="utf-8"?  
<menu xmlns:android="http://schemas.android.com/apk/res/android"   
 
 <item 
 android:id="@+id/menu_select" 
 android:title="@string/select_all"/  
 <item 
 android:id="@+id/menu_unselect" 
 android:title="@string/unselect_all"/  
 
</menu

其次是其样式文件：

<?xml version="1.0" encoding="utf-8"?  
<resources  
 
 <!-- 设置ActionBar的样式 --  
 <style name="DiyTheme" parent="@android:style/Theme.Holo"  
 <item name="android:actionModeBackground" @drawable/tab_bg</item  
 <item name="android:actionModeCloseDrawable" @drawable/back</item  
 <item name="android:actionBarStyle" @style/DiyActionBarStyle</item  
 </style  
 
 <style name="DiyActionBarStyle" parent="@android:style/Widget.Holo.ActionBar"  
 <item name="android:background" @drawable/tab_bg</item  
 </style  
 
</resources

字符资源文件：

<?xml version="1.0" encoding="utf-8"?  
<resources  
 
 <string name="app_name" GridView</string  
 <string name="selection" 选中%s个</string  
 <string name="select_all" 全选</string  
 <string name="unselect_all" 全不选</string  
 
</resources

grid_item.xml文件

<?xml version="1.0" encoding="utf-8"?  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent"   
 
 <ImageView 
 android:id="@+id/img_view" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:scaleType="fitXY" /  
 
 <ImageView 
 android:id="@+id/select" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_alignParentRight="true" 
 android:layout_alignParentTop="true" 
 android:background="@drawable/icon_choice" 
 android:visibility="gone" /  
 <!-- 这里是当该图片被选上的时候打上小勾的,因此起初是隐藏不显示的 --  
</RelativeLayout

main.xml

<?xml version="1.0" encoding="utf-8"?  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent"   
 
 <GridView 
 android:id="@+id/gridview" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:columnWidth="75dip" 
 android:gravity="center" 
 android:horizontalSpacing="2dip" 
 android:numColumns="4" 
 android:verticalSpacing="2dip" 
 android:layout_marginTop="20dip" /  
 
</LinearLayout

actionBar_layout.xml文件：

<?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"   
 
 <TextView 
 android:id="@+id/action_text" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:textSize="18sp" 
 android:textColor="@android:color/white" 
 android:layout_gravity="center_vertical" /  
 
</LinearLayout

GridItem.java文件：

package com.kiritor; 
/** 
 * @author Kiritor 
 * 实现自己的View继承Checable接口*/ 
import android.content.Context; 
import android.util.AttributeSet; 
import android.util.Log; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.widget.Checkable; 
import android.widget.ImageView; 
import android.widget.RelativeLayout; 
 
public class GridItem extends RelativeLayout implements Checkable { 
 
 private Context mContext; 
 private boolean mChecked;//判断该选项是否被选上的标志量 
 private ImageView mImgView = null; 
 private ImageView mSecletView = null; 
 
 public GridItem(Context context) { 
 this(context, null, 0); 
 } 
 
 public GridItem(Context context, AttributeSet attrs) { 
 this(context, attrs, 0); 
 } 
 
 public GridItem(Context context, AttributeSet attrs, int defStyle) { 
 super(context, attrs, defStyle); 
 // TODO Auto-generated constructor stub 
 mContext = context; 
 LayoutInflater.from(mContext).inflate(R.layout.grid_item, this); 
 mImgView = (ImageView) findViewById(R.id.img_view); 
 mSecletView = (ImageView) findViewById(R.id.select); 
 } 
 
 @Override 
 public void setChecked(boolean checked) { 
 // TODO Auto-generated method stub 
 mChecked = checked; 
 setBackgroundDrawable(checked ? getResources().getDrawable( 
  R.drawable.background) : null); 
 mSecletView.setVisibility(checked ? View.VISIBLE : View.GONE);//选上了则显示小勾图片 
 } 
 
 @Override 
 public boolean isChecked() { 
 // TODO Auto-generated method stub 
 return mChecked; 
 } 
 
 @Override 
 public void toggle() { 
 setChecked(!mChecked); 
 } 
 
 public void setImgResId(int resId) { 
 if (mImgView != null) { 
  mImgView.setBackgroundResource(resId);//设置背景 
 } 
 } 
 
}

主activity文件：

package com.kiritor; 
import java.util.HashMap; 
import java.util.Map; 
import java.util.Set; 
import android.app.Activity; 
import android.content.Context; 
import android.os.Bundle; 
import android.view.ActionMode; 
import android.view.LayoutInflater; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.AbsListView.LayoutParams; 
import android.widget.AbsListView.MultiChoiceModeListener; 
import android.widget.BaseAdapter; 
import android.widget.Checkable; 
import android.widget.FrameLayout; 
import android.widget.GridView; 
import android.widget.ImageView; 
import android.widget.ListAdapter; 
import android.widget.TextView; 
public class HomeActivity extends Activity implements MultiChoiceModeListener { 
private GridView mGridView; 
private GridAdapter mGridAdapter; 
private TextView mActionText; 
private static final int MENU_SELECT_ALL = 0; 
private static final int MENU_UNSELECT_ALL = MENU_SELECT_ALL + 1; 
private Map<Integer, Boolean  mSelectMap = new HashMap<Integer, Boolean (); 
private int[] mImgIds = new int[] { R.drawable.img_1, R.drawable.img_2, 
R.drawable.img_3, R.drawable.img_4, R.drawable.img_5, 
R.drawable.img_6, R.drawable.img_7, R.drawable.img_8, 
R.drawable.img_9, R.drawable.img_1, R.drawable.img_2, 
R.drawable.img_3, R.drawable.img_4, R.drawable.img_5, 
R.drawable.img_6, R.drawable.img_7, R.drawable.img_3, 
R.drawable.img_4, R.drawable.img_5, R.drawable.img_5 }; 
/** Called when the activity is first created. */ 
@Override 
public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.main); 
mGridView = (GridView) findViewById(R.id.gridview); 
mGridView.setChoiceMode(GridView.CHOICE_MODE_MULTIPLE_MODAL);// 设置为多选模式 
mGridAdapter = new GridAdapter(this); 
mGridView.setAdapter(mGridAdapter);// 数据适配 
mGridView.setMultiChoiceModeListener(this);// 设置多选模式监听器 
} 
/** Override MultiChoiceModeListener start **/ 
@Override 
public boolean onCreateActionMode(ActionMode mode, Menu menu) { 
// TODO Auto-generated method stub 
// 得到布局文件的View 
View v = LayoutInflater.from(this).inflate(R.layout.actionbar_layout, 
null); 
mActionText = (TextView) v.findViewById(R.id.action_text); 
// 设置显示内容为GridView选中的项目个数 
mActionText.setText(formatString(mGridView.getCheckedItemCount())); 
// 设置动作条的视图 
mode.setCustomView(v); 
// 得到菜单 
getMenuInflater().inflate(R.menu.action_menu, menu); 
return true; 
} 
@Override 
public boolean onPrepareActionMode(ActionMode mode, Menu menu) { 
// TODO Auto-generated method stub 
/* 初始状态下,如果选中的项数不等于总共的项数,设置"全选"的状态为True */ 
menu.getItem(MENU_SELECT_ALL).setEnabled( 
mGridView.getCheckedItemCount() != mGridView.getCount()); 
return true; 
} 
@Override 
public boolean onActionItemClicked(ActionMode mode, MenuItem item) { 
// TODO Auto-generated method stub 
/* 
* 当点击全选的时候,全选 点击全不选的时候全不选 
*/ 
switch (item.getItemId()) { 
case R.id.menu_select: 
for (int i = 0; i < mGridView.getCount(); i++) { 
mGridView.setItemChecked(i, true); 
mSelectMap.put(i, true); 
} 
break; 
case R.id.menu_unselect: 
for (int i = 0; i < mGridView.getCount(); i++) { 
mGridView.setItemChecked(i, false); 
mSelectMap.clear(); 
} 
break; 
} 
return true; 
} 
@Override 
public void onDestroyActionMode(ActionMode mode) { 
// TODO Auto-generated method stub 
mGridAdapter.notifyDataSetChanged(); 
} 
@Override 
public void onItemCheckedStateChanged(ActionMode mode, int position, 
long id, boolean checked) { 
// TODO Auto-generated method stub 
// 当每个项状态改变的时候的操作 
mActionText.setText(formatString(mGridView.getCheckedItemCount())); 
mSelectMap.put(position, checked);/* 放入选中的集合中 */ 
mode.invalidate(); 
} 
/** Override MultiChoiceModeListener end **/ 
private String formatString(int count) { 
return String.format(getString(R.string.selection), count); 
} 
private class GridAdapter extends BaseAdapter { 
private Context mContext; 
public GridAdapter(Context ctx) { 
mContext = ctx; 
} 
@Override 
public int getCount() { 
// TODO Auto-generated method stub 
return mImgIds.length; 
} 
@Override 
public Integer getItem(int position) { 
// TODO Auto-generated method stub 
return Integer.valueOf(mImgIds[position]); 
} 
@Override 
public long getItemId(int position) { 
// TODO Auto-generated method stub 
return position; 
} 
@SuppressWarnings("deprecation") 
@Override 
/* 得到View */ 
public View getView(int position, View convertView, ViewGroup parent) { 
GridItem item; 
if (convertView == null) { 
item = new GridItem(mContext); 
item.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 
LayoutParams.FILL_PARENT)); 
} else { 
item = (GridItem) convertView; 
} 
item.setImgResId(getItem(position)); 
item.setChecked(mSelectMap.get(position) == null ? false 
: mSelectMap.get(position)); 
return item; 
} 
} 
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-09-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

xml