2012年11月8日木曜日

Android GridView CheckBox付きの画像を表示

前回「Android GridViewにSDカードの画像を表示する 」の応用です。

今回はCheckBox付きの画像を表示したいと思います。
「SELECT」ボタンでチェックONの画像数を表示します。


Android 4.0 / API 14

MainActivityのLayoutです。
LinearLayoutにButtonとGridViewを配置します。
res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/ButtonSelect"
        android:width="120dip" />

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:columnWidth="70dp"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth" >
    </GridView>

</LinearLayout>

GridViewn内の個々のアイテムのレイアウトです。
RelativeLayoutにImageViewとCheckBoxを配置します。
res/layout/grid_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:paddingBottom="10dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="10dp" />

    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" />

</RelativeLayout>

次はチェック状態と画像を管理するクラスです。
画像IDをインスタンス変数で保持しておき、サムネイル画像は必要になった時に取得するようにしています。
CheckedImage.java
import android.content.Context;
import android.graphics.Bitmap;
import android.provider.MediaStore;

public class CheckedImage {
    private boolean mChecked = false;
    private long mBitmapId;
    private Bitmap mBitmap = null;
    
    public boolean getChecked() {
        return mChecked;
    }
    public void setChecked(boolean checked) {
        this.mChecked = checked;
    }
    public long getBitmapId() {
        return mBitmapId;
    }
    public void setBitmapId(long bitmapId) {
        this.mBitmapId = bitmapId;
    }
    public Bitmap getBitmap(Context context) {
        if (mBitmap == null){
            mBitmap = MediaStore.Images.Thumbnails.getThumbnail(
                context.getContentResolver(), mBitmapId, MediaStore.Images.Thumbnails.MICRO_KIND, null);
        }
        return mBitmap;
    }
    
    public CheckedImage(boolean checked, long bitmapId){
        mChecked = checked;
        mBitmapId = bitmapId;
    }
    
}

チェックと画像を表示するためのAdapterクラスです。
ArrayAdapterを継承して作成しています。
getView()メソッドでは一度作成したViewは使い回すようにします。
getCheckedItem()メソッドではチェックされているアイテムを取得します。
CheckBoxのOnCheckedChangeListenerでは、CheckedImageオブジェクトのチェック状態を変更します。
CheckedImageArrayAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.CompoundButton.OnCheckedChangeListener;


public class CheckedImageArrayAdapter extends ArrayAdapter<CheckedImage> {
    private static class ViewHolder {
        int position;
        ImageView imageview = null;
        CheckBox checkbox = null;
    }

    private final static int LAYOUT_ID = R.layout.grid_item;


    private Context mContext;
    private LayoutInflater mInflater;   


    public CheckedImageArrayAdapter(Context context, List<CheckedImage> objects) {
        super(context, LAYOUT_ID, objects);
        mContext = context;
        mInflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = mInflater.inflate(LAYOUT_ID, null);
            holder = new ViewHolder();
            holder.imageview = (ImageView) convertView.findViewById(R.id.imageView1);
            holder.checkbox = (CheckBox) convertView.findViewById(R.id.checkBox1);
            holder.checkbox.setOnCheckedChangeListener(CheckBox1_OnCheckedChangeListener);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder)convertView.getTag();
        }

        CheckedImage item = getItem(position);
        holder.position = position;
        holder.imageview.setImageBitmap(item.getBitmap(mContext));
        holder.checkbox.setChecked(item.getChecked());

        return convertView;
    }

    public List<CheckedImage> getCheckedItem(){
        List<CheckedImage> lstItem = new ArrayList<CheckedImage>();
        for ( int i = 0; i < getCount(); i++) {
            if (getItem(i).getChecked()){
                lstItem.add(getItem(i));
            }
        }
        return lstItem;
    }

    private OnCheckedChangeListener CheckBox1_OnCheckedChangeListener = new OnCheckedChangeListener(){
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            View view = (View)buttonView.getParent();
            ViewHolder holder = (ViewHolder)view.getTag();
            CheckedImage item = CheckedImageArrayAdapter.this.getItem(holder.position);
            item.setChecked(isChecked);        
        }};
}

MainActivityのコードです。
SDカード内の画像IDを取得し、CheckedImageオブジェクトを作成します。
「Select」ボタンのクリックで、チェックONのアイテム数を表示します。
MainActivity.java
import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends Activity {

    private GridView mGridView = null;
    private Button mButton = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mGridView = (GridView)findViewById(R.id.gridView1);
        mButton = (Button)findViewById(R.id.button1);
        mButton.setOnClickListener(ButtonSelect_OnClickListener);

        //SDカードより画像データのIDを取得
        Uri uri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI; //SDカード       
        Cursor cursor = getContentResolver().query(uri, null, null, null, null);        
        ArrayList<CheckedImage> lstItem = new ArrayList<CheckedImage>();
        cursor.moveToFirst();   
        for (int i = 0; i < cursor.getCount(); i++){
            long id = cursor.getLong(cursor.getColumnIndexOrThrow("_id"));
            lstItem.add(new CheckedImage(false,id));
            cursor.moveToNext();
        }

        //グリッド用のアダプターを作成
        CheckedImageArrayAdapter adapter = new CheckedImageArrayAdapter(getApplicationContext(),lstItem);
        //グリッドにアダプターをセット
        mGridView.setAdapter(adapter);

    }


    private OnClickListener ButtonSelect_OnClickListener = new OnClickListener(){
        public void onClick(View view) {
            CheckedImageArrayAdapter adapter = (CheckedImageArrayAdapter)mGridView.getAdapter();
            List<CheckedImage> lstCheckedItem = adapter.getCheckedItem();
            Toast.makeText(MainActivity.this, String.valueOf(lstCheckedItem.size()), Toast.LENGTH_LONG).show();
        }
    };

}

2 件のコメント:

Geovanny Marquina さんのコメント...

hola

Geovanny Marquina さんのコメント...

54545