RecyclerView에서 GridLayoutManager 사용하는 방법 – 단계별 완벽 가이드

RecyclerView에서 GridLayoutManager 사용하는 방법

GridLayoutManager는 RecyclerView의 항목을 격자(그리드) 형태로 배치해 주는 레이아웃 매니저입니다. LinearLayoutManager가 항목을 한 줄로 나열하는 것과 달리, GridLayoutManager는 지정한 열(또는 행) 수만큼 화면을 나누어 표시하기 때문에 갤러리, 상품 목록, 카테고리 화면처럼 여러 칸으로 나뉜 UI를 만들 때 특히 유용합니다.

이 글에서는 실제 예제를 통해 RecyclerView에 GridLayoutManager를 적용하고, 카드 형태의 아이템을 2열 그리드로 출력하며, 아이템을 탭하면 해당 위치의 데이터가 삭제되는 기능까지 단계별로 구현해 보겠습니다.

1단계: 새 프로젝트 만들기

Android Studio에서 File → New Project를 선택하고, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다.

2단계: 메인 레이아웃 작성 (activity_main.xml)

res/layout/activity_main.xml 파일에 다음 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">

        <android.support.v7.widget.Toolbar
            android:id = "@+id/appbarlayout_tool_bar"
            android:background = "@color/colorPrimary"
            android:layout_width = "match_parent"
            android:layout_height = "?attr/actionBarSize"
            app:layout_scrollFlags = "scroll|snap|enterAlways"
            app:theme = "@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme = "@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id = "@+id/recycler_view"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        app:layout_behavior = "@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

위 레이아웃은 AppBarLayout과 Toolbar, 그리고 화면 전체를 채우는 RecyclerView 하나로 구성되어 있습니다.

3단계: MainActivity.java 작성

src/MainActivity.java에 다음 코드를 추가합니다.

import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.widget.Toast;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ArrayList<String> list = new ArrayList<>();
    private RecyclerView recyclerView;
    private customAdapter mAdapter;
    private onClickInterface onclickInterface;

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.appbarlayout_tool_bar);
        toolbar.setTitle("This is toolbar.");
        setSupportActionBar(toolbar);

        // 아이템 클릭 시 해당 위치의 데이터를 삭제
        onclickInterface = new onClickInterface() {
            @Override
            public void setClick(int position) {
                list.remove(position);
                Toast.makeText(MainActivity.this,
                        "Position is " + position, Toast.LENGTH_LONG).show();
                mAdapter.notifyDataSetChanged();
            }
        };

        recyclerView = findViewById(R.id.recycler_view);

        // 핵심: 2열 그리드 레이아웃 설정
        GridLayoutManager mLayoutManager =
                new GridLayoutManager(getApplicationContext(), 2);
        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setItemAnimator(new DefaultItemAnimator());

        mAdapter = new customAdapter(this, list, onclickInterface);
        recyclerView.setAdapter(mAdapter);

        DividerItemDecoration dividerItemDecoration =
                new DividerItemDecoration(recyclerView.getContext(),
                        DividerItemDecoration.HORIZONTAL);
        recyclerView.addItemDecoration(dividerItemDecoration);

        // 샘플 데이터 20개 추가
        String[] names = {"sairamm", "Krishna", "prasad"};
        for (int i = 0; i < 20; i++) {
            list.add(names[i % names.length]);
        }
    }
}

여기서 가장 중요한 부분은 다음 두 줄입니다.

GridLayoutManager mLayoutManager = new GridLayoutManager(getApplicationContext(), 2);
recyclerView.setLayoutManager(mLayoutManager);

생성자의 두 번째 인자인 2가 한 줄에 표시될 열(column)의 개수를 의미합니다. 이 값을 3으로 바꾸면 3열 그리드가 되는 식으로 손쉽게 조절할 수 있습니다. 또한 DividerItemDecoration으로 아이템 사이에 구분선을 넣고, onClickInterface를 통해 클릭된 아이템을 삭제하도록 처리했습니다.

4단계: 어댑터 작성 (customAdapter.java)

src/customAdapter.java에 다음 코드를 추가합니다.

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.ArrayList;

public class customAdapter extends RecyclerView.Adapter<customAdapter.MyViewHolder> {

    Context context;
    ArrayList<String> list;
    onClickInterface onClickInterface;

    public class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView title;
        public MyViewHolder(View view) {
            super(view);
            title = view.findViewById(R.id.title);
        }
    }

    public customAdapter(Context context, ArrayList<String> list,
                         onClickInterface onClickInterface) {
        this.context = context;
        this.list = list;
        this.onClickInterface = onClickInterface;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.list_row, viewGroup, false);
        return new MyViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {
        holder.title.setText(list.get(position));
        holder.title.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onClickInterface.setClick(position);
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }
}

5단계: 아이템 레이아웃 작성 (list_row.xml)

res/layout/list_row.xml에 다음 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content"
    app:cardElevation = "10dp"
    app:cardCornerRadius = "20dp"
    tools:context = ".MainActivity">

    <LinearLayout
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:gravity = "center"
        android:orientation = "vertical">

        <ImageView
            android:id = "@+id/imageView2"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:src = "@drawable/logo" />

        <TextView
            android:id = "@+id/title"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:gravity = "center"
            android:textSize = "30sp" />

        <TextView
            android:id = "@+id/textview2"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:gravity = "center"
            android:text = "Sairamkrishan"
            android:textSize = "30sp" />
    </LinearLayout>
</android.support.v7.widget.CardView>

각 아이템은 CardView 안에 이미지와 두 개의 TextView를 세로로 배치한 구조이며, 둥근 모서리(cardCornerRadius)와 그림자 효과(cardElevation)가 적용되어 있습니다.

6단계: 클릭 인터페이스 정의 (onClickInterface.java)

src/onClickInterface.java 파일을 새로 만들고 다음 코드를 추가합니다.

public interface onClickInterface {
    void setClick(int position);
}

앱 실행 및 결과 확인

실제 안드로이드 기기를 컴퓨터에 연결한 상태에서, Android Studio 툴바의 Run 버튼을 클릭하세요. 실행 기기 목록에서 연결된 모바일을 선택하면 앱이 설치되고 실행됩니다.

정상적으로 동작하면 아래 화면과 같이 2열 그리드 형태의 카드 목록이 표시되고, 카드를 탭하면 해당 항목이 삭제되면서 클릭된 위치를 알려주는 Toast 메시지가 나타납니다.

참고: 이 예제는 구버전 support library(android.support.*) 기준으로 작성되었습니다. 최신 Android Studio 프로젝트라면 AndroidX 패키지(androidx.recyclerview.widget.RecyclerView, androidx.appcompat.widget.Toolbar 등)를 사용하면 되며, build.gradle에 implementation 'androidx.recyclerview:recyclerview:1.3.2'를 추가하면 됩니다.