[Android]그리드뷰

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/myGrid"

    android:padding="10dp"

    android:verticalSpacing="10dp"

    android:horizontalSpacing="10dp"

    android:numColumns="auto_fit"

    android:columnWidth="60dp"

    android:stretchMode="columnWidth"

    android:layout_gravity="center" />

GridView 요소의 속성은 셀 간 좌우 너비와 높이 그리고 칼럼 개수 등을 지정하게된다. 그리고 row, column 간의 간격을 조정하는 속성은 다음과 같다.

- numColumns : 그리드뷰의 행에 나열할 칼럼의 개수(1~n)를 지정한다. 'auto_fit' 으로 설정하면 사용 가능한 공간에 따라 자동으로 칼럼의 개수가 정해진다.

- verticalSpacing 과 horizontalSpacing : 그리드뷰의 셀 간의 간격을 이야기한다.

verticalSpacing 속성은 상하 간격을 지정하고 horizontalSpacing 속성은 좌우 간격을 지정한다.

- columnWidth : 칼럼의 너비를 지정한다.

- stretchMode : numColumns속성을 'auto_fit' 으로 설정 되었을 때만 적용된다. 

'auto_fit'으로 설정하였을 때 남은 좌우 공간을 어떻께 분해할지를 결정한다. 'columnWidth' 으로 설정하면 남은 공간이 칼럼들에게 골고루 할당되며, 'spacingWidth'으로 설정하면 칼럼들에게 여백으로 남은 공간을 골고루 나눠주게 된다.

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.Toast;

public class ExGridView extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.gridview_ex_01);

GridView g = (GridView) findViewById(R.id.myGrid);

g.setAdapter(new ImageAdapter(this));

g.setOnItemClickListener(mMessageClicked);

}

private final OnItemClickListener mMessageClicked = new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View v, int position,

long id) {

// TODO Auto-generated method stub

Toast.makeText(ExGridView.this, "선택한 그림은 " + Long.toString(id),

Toast.LENGTH_LONG).show();

}

};

public class ImageAdapter extends BaseAdapter {

public ImageAdapter(Context c) {

mContext = c;

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return mThumbIds.length;

}

@Override

public Object getItem(int position) {

// TODO Auto-generated method stub

return position;

}

@Override

public long getItemId(int position) {

// TODO Auto-generated method stub

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

// TODO Auto-generated method stub

ImageView imageView;

if (convertView == null) {

imageView = new ImageView(mContext);

imageView.setLayoutParams(new GridView.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.MATCH_PARENT));

imageView.setAdjustViewBounds(false);

imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

imageView.setPadding(8, 8, 8, 8);

} else {

imageView = (ImageView) convertView;

}

imageView.setImageResource(mThumbIds[position]);

return imageView;

}

private final Context mContext;

private final Integer[] mThumbIds = { R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, R.drawable.ic_launcher,

R.drawable.ic_launcher, };

}

}

베이스아댑터에서는 화면에 출력하기 위하여 ListActivity 클래스에서 제공하는 setListAdapter()라는 메서드를 사용했다. 위 예제에서는 GridView 클래스에서 제공하는 setAdapter() 메서드를 사용하여 화면에 출력하게 된다.

ImageView 클래스는 위젯에서 이미지의 출력을 담당하는 클래스이다.

setAdjustViewBounds()는 이미지를 경계선에 맞출 건인지 확인하는 메서드 이다. 그리고 setScaleType() 메서드를 사용하여 이미지의 크기를 결정 한다.

http://developer.android.com/reference/android/widget/ImageView.html

[결과]