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

上一篇文章中主要讲了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;
 }
 } 

}

完整源码:多选效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Android利用GridView实现单选效果
  • Android利用GridView实现单选功能
  • Android实现取消GridView中Item选中时默认的背景色
  • android GridView多选效果的实例代码
(0)

相关推荐

  • android GridView多选效果的实例代码

    具体代码如下: main.xml 复制代码 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:background="#000000" android:layout_width="fill_parent"

  • Android实现取消GridView中Item选中时默认的背景色

    本文实例讲述了Android实现取消GridView中Item选中时默认的背景色.分享给大家供大家参考,具体如下: 1.  取消GridView中Item选中时默认的背景色,当使用GridView时候点击item项时候,会有一个android默认的背景色,取消它的方法是: game_gridview.setSelector(new ColorDrawable(Color.TRANSPARENT)); //取消GridView中Item选中时默认的背景色 2.  GridView第一个item不显

  • Android利用GridView实现单选功能

    先看看GridView实现单选效果 如果是你需要的,你可以继续往下看了 实现起来比较简单,直接上代码 主Activity的布局,一个Button用来跳转到筛选Activity一个TextView用来显示筛选后的到的结果 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi

  • Android利用GridView实现单选效果

    1.实现如图所示的单选效果 由于Android提供的单选按钮radiobutton只能单行或单列显示,且样式并不美观,故可用GridView进行改造,实现单选效果,而要实现这样的效果重点就在GridView的适配器这块了. 首先是GridView的item的XML: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&

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

    上一篇文章中主要讲了GridView的简单应用,以网格的形式展示了一些图片,对于图片也有点击监听操作.但是,如果我们在浏览图片的时候需要一些选中操作.甚至是多选操作的时候.这样的功能我们又该如何实现呢? 可以使用ActionBar +GridView的形式实现!在谈及具体实现之前,首先我们先了解一下什么是 ActionBar: Action Bar是活动中的一种控件,用以代替传统的品目顶端的标题栏,它提供了多便利性.有关其详细内容会在以后研究,现在主要考虑上述需求的实现. 先上效果图 首先是关于

  • Android网格布局GridView学习使用

    应用开发的时候,有时我们需要将一些图片进行预览,例如:相片管理的应用.这个时候用ListView的话就显得不是太合适了,因为ListView的展现形式毕竟不适合这种预览要求,那么通过什么视图组件可 以实现呢?这里就可以使用GridView,android中的网格布局来实现了. GridView控件用于把一系列的控件组织成二维网格的形式显示出来,应用较多的也就是图片的组合显示了.关于GridView的使用直接看例子程序. 先看效果图: 具体实现方式如下: 主布局文件main.xml <?xml v

  • Android中ListView + CheckBox实现单选、多选效果

    还是先来看看是不是你想要的效果: 不废话,直接上代码,很简单,代码里都有注释 1 单选 public class SingleActivity extends AppCompatActivity { private ListView listView; private ArrayList<String> groups; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInsta

  • Android网格视图GridView的使用

    GridView(网格视图)是按照行列的方式来显示内容的,一般用于显示图片,图片等内容,比如实现九宫格图,用GridView是首选,也是最简单的.主要用于设置Adapter. 网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. GridView常用的XML属性: 本文将以一个具体的实例来说明如何使用GridView控件实现手机屏幕上各个应用软件图标的摆放,以及应用软件名称的显示. 完成后的程序运

  • RecyclerView仿应用列表实现网格布局

    简介 使用RecyclerView实现网格布局,实现手机界面应用列表 效果 效果如下图: 详细代码 XML布局文件 在布局中使用RecyclerView控件 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:a

  • Android应用开发中使用GridView网格布局的代码示例

    基本布局演示 1. 定义包含GridView 的 main.xmk <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fi

  • Android App中的GridView网格布局使用指南

    零.常用属性 首先我们来看看GridView的一些常用的属性吧 1.android:numColumns="auto_fit" //GridView的列数设置为自动 2.android:columnWidth="90dp " //每列的宽度,也就是Item的宽度 3.android:stretchMode="columnWidth"//缩放与列宽大小同步 4.android:verticalSpacing="10dp" //两

  • Android中在GridView网格视图上实现item拖拽交换的方法

    GridView基础 新建一个HelloGridView的工程 修改main.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width=&q

  • Android布局之GridLayout网格布局

    网格布局标签是GridLayout.这个布局是android4.0新增的布局.这个布局只有4.0之后的版本才能使用. 不过新增了一些东东 ①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式 ②容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较) 因为是android 4.0新增的,API Level 14,在这个版本以前的sdk 都需要导入项目,等下会详细介绍 常用属性: 排列对齐: ①设置组件的排列方式:   android:ori

  • Android RecyclerView网格布局(支持多种分割线)详解(2)

    上篇Android RecyclerView 详解(1)-线性布局 记录了下RecyclerView的使用方法,并且讲述了线性布局列表的使用方法,在此基础上加上了万能分割线,支持颜色分割线和图片分割线,同时支持对分割线设置线宽. 这篇是总结一下网格布局的使用,同样也支持两种分割线和线宽的设置. 主要的相关类: 1. RecyclerView.Adapter 2. GridLayoutManager 网格布局管理器 3. RecycleView.ItemDecoration 分割线 下面就直接通过

随机推荐