관리 메뉴

moozi

GridView 구현하기 본문

안드로이드개발강좌

GridView 구현하기

moozi 2010. 1. 13. 17:50

[ 안드로이드 개발 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 로 실행합니다.

[ 실행결과 ]

8 Comments
  • 프로필사진 barragan 2010.01.18 13:35 잘봤습니다. 감사합니다..^^

    앞으로도 업데이트 부탁드려요...^^;;
  • 프로필사진 moozi 2010.01.18 16:31 신고 안녕하세요? 또 다른 강의 업데이트 하도록 노력하겠습니다. ^^
  • 프로필사진 인철 2010.03.23 10:45 안드로이드 책만 보고 공부하다가 오히려 흥미가 떨어졌는데 여기와서 다시 흥미를 되찾고 있습니다. ^^
  • 프로필사진 moozi 2010.03.23 11:06 신고 인철님 반갑습니다. 제 글을 좋아해주셔서 감사합니다.

    재미있는 안드로이드 공부가 되시길 바라겠습니다.

    ^^
  • 프로필사진 tjsanf 2010.04.02 04:04 안녕하세요! 잘보고 있습니다 항상!
    또 궁금한 점이 있는데요
    grid로 뿌려준 이미지를 한개 클릭시 마다 액티비티로 넘어가게 하고 싶은데
    선택된 이미지를 어떻게 받아야 하는지..

    저번 강좌때 리스트같은 경우에는
    selection.setText(items[position]);
    String test = items[position];
    if(test.equals("검색"))
    {
    Intent intent = new Intent(this, browser.class);
    startActivity(intent);
    }

    이런식으로 했는데

    여기선 어떻게 해야할까요?ㅠ 책을 뒤져봐두 잘 모르겠네요
  • 프로필사진 tjsanf 2010.04.05 00:56 gridview.setAdapter(new ImageAdapter(this, android.R.layout.main, mThumbIds));
    gridview.OnItemSelectedListener(this);

    이렇게하고...

    public void onItemSelected(AdapterView<?> parent, View v, int position, long id) {

    Toast.makeText(this,"메시지", Toast.LENGTH_SHORT).show();
    }

    이렇게 쓰면 될꺼같았는데...ㅠ 예기치못한 에러가 발생했다구 안뜨네요..ㅠ.ㅠ
  • 프로필사진 moozi 2010.04.05 01:44 신고 tjsanf님 다음 코드를 onCreate 메서드 안에 추가해보세요

    gridview.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
    Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
    }
    });
  • 프로필사진 tjsanf 2010.04.06 13:24 아 정말 감사합니다!!
    거기에 각 이미지별로 다른 메시지를 표현하고 싶으면

    Integer test = mThumbIds[position];
    switch(test)
    {
    case R.drawable.f1:
    Toast.makeText .....;
    break;
    }
    이렇게 하면 되더군요! 감사합니다!!
댓글쓰기 폼