[안드로이드/Android] 안드로이드 그리드뷰

안드로이드 그리드뷰(GridView)

읽기 전에 손가락 한번 꾸~욱 _(__)_ ♥

감사합니다.^^ ☞ ☜

java.lang.Object

└ android.view.View

└ android.view.ViewGroup

└ android.widget.AdapterView<T extends android.widget.Adapter>

└ android.widget.AbsListView    

└ android.widget.GridView

그리드 뷰란?

그리드 뷰는 해당 아이템들을 2차원 형태의 격자 모양으로 보여주는 녀석 입니다. 

"격자" 라고 하시면 좀 애매하실텐데 실제로 grid의 뜻이기도 하지요. 저도 처음에 먼소린가 싶어서 찾아 보았답니다.

격자(grid)

(1) 서로 직교하는 망상(網狀)의 평행선을 말한다. 광학식 문자 인식(OCR ; optical character recognition)에서는 글자형의 지정이나 측정을 위해서 사용한다. 그래픽 에디터(graphic editor)에서는 그래픽을 작성할 때 그래픽의 크기와 상하 좌우의 방향을 인식하기 쉽게 하기 때문에 표시 장치(display unit) 상에 「격자」를 표시하는 기능이 첨부되어 있는 경우가 많다.
(2) 부품 배치와 구멍 뚫기 작업 등에 편리한 것처럼 프린트판과 섀시 위에 격자상으로 그려진 선을 가리킨다.
(3) 다극 진공관 내의 격자판에서 전자 또는 이온의 흐름을 제어하기 위하여 설계된 유공판(有孔板) 또는 망상 전극을 가리킨다.

출처 : 네이버백과사전  http://terms.naver.com/entry.nhn?docId=824507

다 읽으시면 더 어려우실수도 있네요. 그냥 단순하게 바둑판 모양의 표형태로 출력한다 라고 생각하시면 되겠습니다.

이 녀석은 표시되는 항목이 많아 한 화면을 넘어가게 되면 자동으로 스크롤이 생기게 됩니다.

그리드 뷰는 이미 앞에서 말씀드린 리스트뷰랑 구현되는 방법이 거의 동일합니다. 그러니 기본 적인 내용은 리스트뷰를 참고 하기시 바랍니다.

     리스트뷰 기초      ☞ http://jwandroid.tistory.com/230

그럼 먼저 GridView의 속성들을 먼저 살펴보도록 하겠습니다.

xml 속성 이름	자바 메소드 이름	설명
android:columnWidth	setColumnWidth(int)	Column의 너비를 pixel로 설정.
android:gravity	setGravity(int)	샐들의 정렬을 설정.
android:horizontalSpacing	setHorizontalSpacing(int)	Grid의 셀 간의 수평 간격 설정
android:numColumns	setNumColumns(int)	Grid 한 Row에 나열될 Column의 개수를 \솔정(1~n개). "auto_fit"으로 설정하면 사용 가능한 공간에 따라 자동으로 column의 개수 정해짐.
android:stretchMode	setStretchMode(int)	"auto_fit"으로 설정되었을때, auto_fit을 하고 남은 좌우 공간을 어떻게 분배할지를 결정함.
android:verticalSpacing	setVerticalSpacing(int)	Grid의 셀 간의 수직 간격 설정

그럼 간단한 예제를 통해서 알아 보도록 하겠습니다. 먼저 우리가 만들려고 하는 녀석의 실행 결과 입니다.

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

GridView를 화면에 가득 차도록 배치를 합니다.  안에 선언된 속성들에 대한것은 상단에 표를 참고하셔서 살펴보시면 충분 하리라 생각 됩니다.

JwandroidGridView.java 

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();
        }
    });
}

xml에서 선언된 그리드 뷰를 자바파일에서 사용하기 위해 findViewById를 통해서 가지고 옵니다.

㉠ 그리드뷰에다가 해당 어댑터를 연결 합니다.

리스트뷰에서 했던것처럼 GridView에다가 어댑터를 연결 합니다. ImageAdapter는 아래에 만들어 두었습니다.

㉡ 이벤트 설정

GridView의 항목을 선택했을때 이벤트를 설정한 녀석입니다.

간단하게 Toast가 살뱅하도록 해두었네요.

ImageAdapter.java

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
    };
}

위의 코드를 보시면 리스트뷰에서 했던것과 거의 유사하게 되어 있습니다.

어찌보면 완전히 똑같죠. 

위의 코드를 작성후 실행하시면 됩니다.

궁금하신 사항은 언제든지 댓글로 남겨주세요.