android GridView實現相簿預覽圖,多選模式下右上角打勾
阿新 • • 發佈:2019-02-15
看到有初學者有這樣的需求: GridView實現相簿預覽圖,多選模式下右上角打勾。(4.0相簿的預覽圖多選時,多了個藍色邊框,其實是藍色背景)
GridView在自己實際開發中也沒用到過,就想試著實現下,寫個demo供初學者參考,高手略過。
先來個效果圖吧:
實現起來不復雜,就2個檔案。 首先看看GridView繼承關係:
我們知道ListView有單選模式和多選模式[AbsListView.setChoiceMode(AbsListView.CHOICE_MODE_SINGLE/AbsListView.CHOICE_MODE_MULTIPLE_MODAL)]
那麼GridView也支援多選模式。
廢話不多說,相信你也知道!貼程式碼吧
主佈局檔案: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" /> </LinearLayout>
主Activity:HomeActivity
上面用到 GridItem是自己封裝的一個類:GridItem.javapackage com.xyz.gridview; 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 }; /** 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 v = LayoutInflater.from(this).inflate(R.layout.actionbar_layout, null); mActionText = (TextView) v.findViewById(R.id.action_text); 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 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; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub 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; } } }
package com.xyz.gridview;
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 mSelcetView = 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);
mSelcetView = (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);
mSelcetView.setVisibility(checked ? View.VISIBLE : View.GONE);
}
@Override
public boolean isChecked() {
// TODO Auto-generated method stub
return mChecked;
}
@Override
public void toggle() {
// TODO Auto-generated method stub
setChecked(!mChecked);
}
public void setImgResId(int resId) {
if (mImgView != null) {
mImgView.setBackgroundResource(resId);
}
}
}
這個類引用的一個佈局: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>
就這麼多啦。左上角的勾,就是控制 ImageView 顯示與不顯示的問題。~~完~~