Hello GridView 살펴보기

오늘은 저번에 살펴본 GridView 에 대해서 살펴볼까 합니다.

이걸로 당분간은 View 에 대한 글은 미루고 다른것들을 포스팅 할까 생각중입니다. ㅎㅎ

먼저 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:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

머 기본적인 코드들은 어느정도 익히셨다고 생각되고 중요한 부분만 짚고 넘어가겠습니다.

바로 view 에 ID를 부여하는 부분입니다. 바로 이 부분 android:id="@+id/gridview" 여기서 직접 View 에 ID를 부여하여 Java 코드에서 해당 Id를 가져와 컨트롤을 할 수 있습니다. id는 아무거나 하셔도 됩니다. ex) android:id="@+id/아이디"

다음은 onCreate 메소드에 들어간 코드를 살펴보죠

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

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

    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
        }
    });
}

GridView 객체를 생성해 findViewById 메서드를 통해서 해당View를 직접적으로 콘트롤 하게 됩니다.

다음으로 setAdapter를 통해서 모든 이미지를 GridView 에 표현하기 위해 ImageAdapter와 연결을 합니다.

ImageAdapter는 잠시 뒤로 미뤄두도록 하죠

Grid에 올려져 있는 아이템을 우리가 클릭을 했을때 어떤일을 하기 위해서 setOnItemClickListner()는 AdapterView.OnItemClickListener로 전달이 됩니다. 콜백함수인 onItemClick()은 해당아이템이 위치한 포지션을 토스트 해줍니다. 토스트는 직접 실행해보셨으면 알겠지만 갑자기 토스트기계에서 나오는 빵처럼 뿅~ 하고 나왔다가 사라지는 일종의 알림말 같은 것이라고 보시면 될 것 같네요. 주로 우리가 만드는 프로그램은 저렇게 토스트가 나오는게 아니라 이미지가 확대되어 나오는 코드를 짜면 될 것 같습니다. ㅎㅎ

자 이제 마지막으로 미뤄두었던 ImageAdapter를 보면 될 것 같네요.

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.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7
    };
}

위의 ImageAdapter 는 BaseAdapter를 상속하고 있다는걸 아실 수 있습니다.
BaseAdapter에서 상속받은 몇 몇 Implement 가 요구됩니다. 위의 코드를 보시면 아시겠지만 생성자 함수와 getCount(), getItem(int), getItemId(int) 가 그것입니다. getItem 함수는 실질적인 객체를 return 해주는게 좋고 getItemId 함수는 해당 아이템의 row Id를 return 해주는게 좋다고 나와있습니다.
하지만 이 예제 코드에서는 필요하지 않으니 그냥 null과 0으로 처리를 했군요.

자 다음은 getView 함수입니다. 이 함수는 ImageAdapter에 이미지를 추가하기 위해 새로운 ImageView를 생성하는 일을 합니다. 생성된 ImageView에 배열안에 넣어진 이미지들을 넣어주도록 설계되었습니다.

보기에는 좀 까다로워 보이는 예제코드이지만 막상 분석을 해보면 그렇게 어렵지 않은 코드란걸 아실 수 있을 듯 하네요.

조금더 나은 공부를 위해서 정보 공유는 필수!!! 질책 마다하지 않습니다. 댓글 남겨주시면 감사요 ㅋㅋ