안드로이드(Android) GridView 를 이용해 이미지 리스트 만들기

안드로이드(Android) GridView 를 이용해 이미지 리스트 만들기

 

개발환경 : window 7 64bit, Eclipse Mars, Android 4.2.2

 

이번 예제는 GridView 를 이용해서 이미지들을 리스트 형태로 배치하는 것입니다. 배치한 이미지를 클릭하게 되면 리소스 ID 의 10진수 값을 보여줍니다.

 

리스트를  만들기 위해 res/drawable 폴더에 이미지를

넣습니다. 그리고 Integer 배열을 만듭니다.

 

// references to our images
private Integer[] mThumbIds = { R.drawable.view01,
		R.drawable.view02, R.drawable.view03,
		R.drawable.view04, R.drawable.view05,
		R.drawable.view06, R.drawable.view07
};

 

다음은 GridView 객체를 생성합니다. 그리고  BaseAdapter 를

상속해서 만든 객체를 셋팅하고 이벤트 객체도 셋팅합니다.

 

GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
gridview.setOnItemClickListener(gridviewOnItemClickListener);

 

등록한 이벤트 객체는 이미지 클릭시 이미지의 resource id 를

Toast 로 알려줍니다. 값은 아래 그림과 같이 그림에

해당하는 10진수 아이디입니다.

 

private GridView.OnItemClickListener gridviewOnItemClickListener 
	= new GridView.OnItemClickListener() {
	
	public void onItemClick(AdapterView<?> arg0, 
View arg1, int arg2,
			long arg3) {

		Toast.makeText(SampleActivity19.this,
				arg0.getAdapter().getItem(arg2).toString(),
				Toast.LENGTH_LONG).show();
	}
};

 

 

 

GridView 에 Adapter 클래스를 셋팅하는데 getView 함수만

주의 깊게 보시면 됩니다. 첫번째 인수로 넘어온 position 은

이미지배열에서 위치 값입니다.

이미지를 꺼내서 setImageResource() 함수에 셋팅하고

ImageView 객체에 셋팅한후 리턴합니다.

 

public View getView(int position, View convertView, ViewGroup parent) {
	
	int rowWidth = (mMetrics.widthPixels) / 3;

	ImageView imageView;
	if (convertView == null) {
		imageView = new ImageView(mContext);
		imageView.setLayoutParams(new GridView.LayoutParams(rowWidth, rowWidth));
		imageView.setScaleType(ImageView.ScaleType.FIT_XY);
		imageView.setPadding(1, 1, 1, 1);
	} else {
		imageView = (ImageView) convertView;
	}
	imageView.setImageResource(mThumbIds[position]);
	return imageView;
}

 

메인 레이아웃 xml 입니다.

GridView  하나밖에 없습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="90dp"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:stretchMode="spacingWidth"
    android:verticalSpacing="10dp" />

 

메인 activity 소스 입니다.

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;

public class SampleActivity19 extends Activity {
	
	// references to our images
	private Integer[] mThumbIds = { R.drawable.view01,
			R.drawable.view02, R.drawable.view03,
			R.drawable.view04, R.drawable.view05,
			R.drawable.view06, R.drawable.view07
	};
	
	DisplayMetrics mMetrics;
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_sample_activity19);

		GridView gridview = (GridView) findViewById(R.id.gridview);
		gridview.setAdapter(new ImageAdapter(this));
		gridview.setOnItemClickListener(gridviewOnItemClickListener);
		
		mMetrics = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(mMetrics);
	}

	private GridView.OnItemClickListener gridviewOnItemClickListener 
		= new GridView.OnItemClickListener() {
		
		public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
				long arg3) {

			Toast.makeText(SampleActivity19.this,
					arg0.getAdapter().getItem(arg2).toString(),
					Toast.LENGTH_LONG).show();
		}
	};

	public class ImageAdapter extends BaseAdapter {
		private Context mContext;

		public ImageAdapter(Context c) {
			mContext = c;
		}

		public int getCount() {
			return mThumbIds.length;
		}

		public Object getItem(int position) {
			return mThumbIds[position];
		}

		public long getItemId(int position) {
			return position;
		}

		// create a new ImageView for each item referenced by the Adapter
		public View getView(int position, View convertView, ViewGroup parent) {
			
			int rowWidth = (mMetrics.widthPixels) / 3;

			ImageView imageView;
			if (convertView == null) {
				imageView = new ImageView(mContext);
				imageView.setLayoutParams(new GridView.LayoutParams(rowWidth,rowWidth));
				imageView.setScaleType(ImageView.ScaleType.FIT_XY);
				imageView.setPadding(1, 1, 1, 1);
			} else {
				imageView = (ImageView) convertView;
			}
			imageView.setImageResource(mThumbIds[position]);
			return imageView;
		}
	}
}