[안드로이드 기본] 그리드뷰 사용방법

그리드뷰는 격자모양으로 아이템을 배치할 수 있는 컨테이너이다.

일반적으로, 이미지를 격자모양으로 배치할 때 사용을 주로 하지만,

텍스트와 더불어 버튼까지도 배치하는 것이 가능하다.

 

그리드뷰는 뷰 그룹이기때문에 최상단에 올 수가 있다.

 

[activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/gridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:numColumns="5"
    tools:context=".MainActivity">
</GridView>

그리드뷰는 위의 코드와 같이 선언한다.

여기서 제일 중요한 부분은 numColumns 속성인데,

한줄에 5개의 아이템이 들어가는 속성이다.

 

그리드뷰는 각각의 아이템을 그려주기 위해서

어댑터 클래스를 사용해야한다.

어댑터는 데이터를 매칭시켜주는 역할을 한다.

 

나는 ImageAdapter를 만들어서 그리드뷰에 설정해주었다.

 

[ImageAdapter.kt]

package com.practice.demogridview

import android.content.Context
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.GridView
import android.widget.ImageView

class ImageAdapter(private val context: Context) : BaseAdapter() {

    //이미지 배열
    private val images = arrayOf(
        R.drawable.android,
        R.drawable.ic_launcher_foreground,
        R.drawable.ic_launcher_background,
        R.drawable.ic_launcher_foreground,
        R.drawable.ic_launcher_background,
        R.drawable.ic_launcher_foreground,
        R.drawable.ic_launcher_background,
        R.drawable.ic_launcher_foreground,
        R.drawable.ic_launcher_background,
        R.drawable.ic_launcher_foreground,
        R.drawable.ic_launcher_background,
        R.drawable.ic_launcher_foreground,
        R.drawable.ic_launcher_background,
        R.drawable.ic_launcher_foreground)

    //뷰들을 어떻게 보여줄지?, 레이아웃은 어떻게 나타낼지 설정하는 코드
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val imageView:ImageView

        //재사용할 수 있는 ImageView가 없다면 새로 생성
        if(convertView == null){
            imageView = ImageView(context)
            imageView.run{
                layoutParams = ViewGroup.LayoutParams(200,200)
                scaleType = ImageView.ScaleType.FIT_CENTER
                setPadding(10,10,10,10)
            }
        }else{
            //재사용할 수 있는 ImageView가 있다면 재사용한다.
            imageView = convertView as ImageView
        }

        //이미지 인자로 넘어온 position에 맞게 이미지를 설정한다.
        imageView.setImageResource(images[position])
        return imageView
    }

    override fun getItem(position: Int): Any = images[position]

    override fun getItemId(position: Int): Long = 0

    override fun getCount(): Int = images.size
}

제일 먼저 BaseAdapter라는 클래스를 상속시켜준다.

그리고, 이미지 배열을 선언한다.

 

이미지 배열을 Int로 받는 이유는 무엇일까?

안드로이드에서 R.java라는 파일이 있다.

R.java는 리소스를 관리하기 위해서 안드로이드에서 자체적으로 만들어주는 파일이다.

리소스를 관리하기 위해서는 경로를 모두 파악해야하는데

그러면 너무 복잡하기 때문에 리소스의 경로를 Int 값으로 만들어서 관리하게 된다.

 

getCount() 메소드는 이미지 배열의 사이즈를 리턴하게 된다.

getView()는 첫번째 아이템부터 마지막 아이템까지 호출이되며

아이템이 보여지기 전에 호출이되는 메소드이다.

 

즉, 이미지 갯수만큼 호출이 된다는 것인데..

이미지뷰를 계속해서 생성해 내는 것은 부담이 될 수도 있다.

그래서 좀 더 효율적으로 관리하기 위해

convertView를 사용한다. 

convertView는 기존에 사용했던 뷰를 반환해주는 역할을 한다. (재사용이 가능하다는 것이다)

반환된 convertView에 position에 따라서 이미지를 설정해주게 된다.

 

이렇게 만들어진 어댑터를 그리드뷰에 설정해주면 끝이난다.

 

[MainActivity.kt]

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        gridView.adapter = ImageAdapter(this)
    }
}

그리드뷰 완성본

 

그리드뷰 전체코드 보러가기