GridView 사용법

GridView란?

GridView는 ListView와 비슷하지만 이름에서 알 수 있듯 List 형태가 아닌 Grid 형태로 아이템을 배치할 수 있다.

단순한 한 줄로 아이템을 나열하는 것이 아니라 여러 개의 행과 열로 아이템을 배치할 수 있다.

 

사용법

기본적으로 사용법은 리스트뷰와 거의 똑같으므로 설명이 부족할 경우 리스트뷰 포스트를 참고하면 된다.

https://ju-hy.tistory.com/35

안드로이드 ListView 사용법

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:numColumns="2" />

</androidx.constraintlayout.widget.ConstraintLayout>

먼저 layout 파일에 GridView를 추가해주자.

이 때 numColumns 옵션을 통해 몇개의 열로 배치할 지 정할 수 있다.

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <TextView
        android:id="@+id/textView_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="이름" />

    <TextView
        android:id="@+id/textView_age"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="나이" />

</LinearLayout>

그 다음 GridView에 배치될 아이템의 레이아웃을 만들어주자.

GridView는 하나의 아이템이 표현될 공간이 크지 않기 때문에 이름과 나이 정도만 만들어 주었다.

 

 

package com.juhy.myapplication;

public class Customer {

    String name;
    String age;

    Customer(String name, String age){
        this.name = name;
        this.age = age;
    }

}

그리고 데이터 목록을 구성할 아이템 클래스(고객)를 만들어주었다.

앞서 아이템의 레이아웃에 만들어주었던 이름과 나이를 멤버변수로 갖는다.

 

 

package com.juhy.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.ArrayList;

public class MyGridViewAdapter extends BaseAdapter {

    ArrayList<Customer> items;
    Context context;

    public MyGridViewAdapter(ArrayList<Customer> items, Context context){
        this.items = items;
        this.context = context;
    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public Object getItem(int i) {
        return items.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {

        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = inflater.inflate(R.layout.item_customer, viewGroup, false);

        TextView tv_name = view.findViewById(R.id.textView_name);
        tv_name.setText(items.get(i).name);

        TextView tv_gender = view.findViewById(R.id.textView_age);
        tv_gender.setText(items.get(i).age);

        return view;
    }

}

그리고 GridView에 데이터를 연결해 줄 어댑터를 만든다. 코드 구성은 리스트뷰와 똑같다.

레이아웃을 불러오고 아이템의 위치에 맞는 정보를 데이터에서 불러와 지정해준다.

 

 

package com.juhy.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    GridView gridView;
    MyGridViewAdapter adapter;

    ArrayList<Customer> items;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView = findViewById(R.id.gridview);

        items = new ArrayList<>();
        items.add(new Customer("고객 1", "20"));
        items.add(new Customer("고객 2", "21"));
        items.add(new Customer("고객 3", "22"));

        adapter = new MyGridViewAdapter(items, getApplicationContext());

        gridView.setAdapter(adapter);

        gridView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
                items.remove(position);
                adapter.notifyDataSetChanged();

                Toast.makeText(getApplicationContext(), position+"번째 아이템이 삭제되었습니다", Toast.LENGTH_SHORT).show();
                return false;
            }
        });
    }

}

마지막으로 액티비티에서 GridView 객체를 생성하고, 데이터를 adapter의 생성자를 통해 넘겨주었다.

그 다음 adapter를 GridView에 지정해주면 된다.

 

그리고 추가적인 연습을 위해 리스트뷰와 마찬가지로 아이템을 길게 누르면 삭제되도록 구현해보았다.

 

 

실행해보면 정상적으로 2열로 아이템들이 배치되는 것을 볼 수 있다.

그리고 고객1을 길게 클릭하자 정상적으로 아이템이 삭제되는 것을 볼 수 있다.

 

 

Reference

[부스트코스]안드로이드 프로그래밍

https://www.edwith.org/boostcourse-android