Android網(wǎng)格布局GridView實(shí)現(xiàn)漂亮的多選效果

更新時(shí)間：2017年12月19日 11:23:46 作者：LCore

這篇文章主要為大家詳細(xì)介紹了Android網(wǎng)格布局GridView實(shí)現(xiàn)漂亮的多選效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

上一篇文章中主要講了GridView的簡單應(yīng)用，以網(wǎng)格的形式展示了一些圖片，對(duì)于圖片也有點(diǎn)擊監(jiān)聽操作。但是，如果我們?cè)跒g覽圖片的時(shí)候需要一些選中操作、甚至是多選操作的時(shí)候。這樣的功能我們又該如何實(shí)現(xiàn)呢？

可以使用ActionBar +GridView的形式實(shí)現(xiàn)！在談及具體實(shí)現(xiàn)之前，首先我們先了解一下什么是

ActionBar：

Action Bar是活動(dòng)中的一種控件，用以代替?zhèn)鹘y(tǒng)的品目頂端的標(biāo)題欄，它提供了多便利性。有關(guān)其詳細(xì)內(nèi)容會(huì)在以后研究，現(xiàn)在主要考慮上述需求的實(shí)現(xiàn)。

先上效果圖

首先是關(guān)于ActionBar的布局文件：主要是用于實(shí)現(xiàn)全選與全不選的功能的。

<?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> 
 
 <!-- 設(shè)置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個(gè)</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" /> 
 <!-- 這里是當(dāng)該圖片被選上的時(shí)候打上小勾的,因此起初是隱藏不顯示的 --> 
</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 
 * 實(shí)現(xiàn)自己的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;//判斷該選項(xiàng)是否被選上的標(biāo)志量 
 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);//設(shè)置背景 
 } 
 } 
 
}

主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);// 設(shè)置為多選模式 
 mGridAdapter = new GridAdapter(this); 
 mGridView.setAdapter(mGridAdapter);// 數(shù)據(jù)適配 
 mGridView.setMultiChoiceModeListener(this);// 設(shè)置多選模式監(jiān)聽器 
 } 
 
 /** 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); 
 // 設(shè)置顯示內(nèi)容為GridView選中的項(xiàng)目個(gè)數(shù) 
 mActionText.setText(formatString(mGridView.getCheckedItemCount())); 
 // 設(shè)置動(dòng)作條的視圖 
 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 
 /* 初始狀態(tài)下,如果選中的項(xiàng)數(shù)不等于總共的項(xiàng)數(shù),設(shè)置"全選"的狀態(tài)為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 
 /* 
  * 當(dāng)點(diǎn)擊全選的時(shí)候,全選 點(diǎn)擊全不選的時(shí)候全不選 
  */ 
 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 
 // 當(dāng)每個(gè)項(xiàng)狀態(tài)改變的時(shí)候的操作 
 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; 
 } 
 } 
 
}

完整源碼：多選效果

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: