GridView 구현하기

[ 안드로이드 개발 2.0 ] GridView 구현하기


GridView는 아이템들을 2차원 격자 형태로 보여줍니다. 스크롤을 지원해서 스크롤하면서 볼 수 있습니다.

다음은 GridView를 이용해서 이미지를 출력한 모습입니다.

GridView에 관해서 안드로이드 개발자 사이트의 내용을 토대로 살펴봅니다.

1. 이클립스에서 다음과 같이 프로젝트를 생성합니다.

2. 다음 그림들을 바탕화면에 다운 받은 다음 왼쪽 프로젝트 탐색기의 res -> drawable-hdpi 폴더에 끌어다 놓습니다.

위의 그림들을 끌어다 놓으면 다음과 같이 됩니다.

3. 왼쪽 프로젝트 탐색기의 res -> layout -> 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="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:columnWidth="90dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>


4. 왼쪽 탐색기에서 src -> my.HelloGridView -> HelloGridView.java 를 열어서 다음 코드를 붙여넣기 합니다.

package my.HelloGridView;

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

public class HelloGridView extends Activity {
    /** Called when the activity is first created. */
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);

     GridView gridview = (GridView) findViewById(R.id.gridview);
     gridview.setAdapter(new ImageAdapter(this));
 }
 
 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 null;
     }

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

     // create a new ImageView for each item referenced by the Adapter
     public View getView(int position, View convertView, ViewGroup parent) {
         ImageView imageView;
         if (convertView == null) {  // if it's not recycled, initialize some attributes
             imageView = new ImageView(mContext);
             imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
             imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
             imageView.setPadding(8, 8, 8, 8);
         } else {
             imageView = (ImageView) convertView;
         }

         imageView.setImageResource(mThumbIds[position]);
         return imageView;
     }

     // references to our images
     private Integer[] mThumbIds = {
             R.drawable.f1, R.drawable.f2,
             R.drawable.f3, R.drawable.f4,
             R.drawable.f5, R.drawable.f6
     };
 }

}

코드를 살펴보면 ImageAdapter 클래스(굵은 글씨로 표현된 부분)가 HelloGridView 클래스 내부에 추가로 정의 되어 있습니다.

private Integer[] mThumbIds = {
             R.drawable.f1, R.drawable.f2,
             R.drawable.f3, R.drawable.f4,
             R.drawable.f5, R.drawable.f6
     };

위 코드를 보면 mThumbIds 배열에 출력할 이미지들을 정의하고 있습니다. 위에서 res -> drawable-hdpi 폴더에 넣어둔 이미지들의 파일명을 사용했습니다.


5. CTRL + F11 로 실행합니다.

[ 실행결과 ]