ตัวอย่าง RecyclerView กับ GridLayoutManager แบบง่ายใน Android

ภาพรวม

GridLayoutManager เป็น LayoutManager สำหรับ RecyclerView ที่จัดเรียง Item เป็น **กริด (Grid)** แถวและคอลัมน์ ใช้สำหรับ Gallery, Product Grid, Dashboard Menu, Photo Picker ฯลฯ

ขั้นตอนการสร้าง

1. Dependency (build.gradle)

dependencies {
    implementation 'androidx.recyclerview:recyclerview:1.3.2'
    // CardView Optional (สำหรับ Card Item)
    implementation 'androidx.cardview:cardview:1.0.0'
}

2. Item Layout (res/layout/item_grid.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:card_view="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="2dp">

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

        <ImageView
            android:id="@+id/ivIcon"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:scaleType="centerInside"
            android:src="@drawable/ic_launcher"
            android:contentDescription="@string/item_icon" />

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="Item Name"
            android:textSize="14sp"
            android:textStyle="bold"
            android:maxLines="1"
            android:ellipsize="end"
            android:gravity="center" />

        <TextView
            android:id="@+id/tvSubtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:text="Subtitle"
            android:textSize="12sp"
            android:textColor="#757575"
            android:gravity="center" />

    </LinearLayout>
</androidx.cardview.widget.CardView>

3. Adapter (GridAdapter.java)

package com.example.myapplication;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
import java.util.Random;

public class GridAdapter extends RecyclerView.Adapter {

    private final List items;
    private final OnItemClickListener listener;
    private final Random random = new Random();

    public interface OnItemClickListener {
        void onItemClick(GridItem item, int position);
    }

    public GridAdapter(List items, OnItemClickListener listener) {
        this.items = items;
        this.listener = listener;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.item_grid, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.bind(items.get(position));
    }

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

    static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView ivIcon;
        TextView tvName, tvSubtitle;
        View cardView;

        ViewHolder(View view) {
            super(view);
            cardView = view;
            ivIcon = view.findViewById(R.id.ivIcon);
            tvName = view.findViewById(R.id.tvName);
            tvSubtitle = view.findViewById(R.id.tvSubtitle);
        }

        void bind(GridItem item) {
            tvName.setText(item.name);
            tvSubtitle.setText(item.subtitle);
            ivIcon.setImageResource(item.iconRes);
            
            // Random Background Color สำหรับ Demo
            int color = Color.argb(255, 
                150 + random.nextInt(100), 
                150 + random.nextInt(100), 
                150 + random.nextInt(100));
            cardView.setBackgroundColor(color);
            
            cardView.setOnClickListener(v -> {
                if (listener != null) listener.onItemClick(item, getAdapterPosition());
            });
        }
    }

    public static class GridItem {
        public final int iconRes;
        public final String name;
        public final String subtitle;
        public GridItem(int iconRes, String name, String subtitle) {
            this.iconRes = iconRes;
            this.name = name;
            this.subtitle = subtitle;
        }
    }
}

4. Activity Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:clipToPadding="false"
        android:padding="8dp"
        android:scrollbars="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

5. MainActivity.java

package com.example.myapplication;

import android.os.Bundle;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {

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

        RecyclerView recyclerView = findViewById(R.id.recyclerView);

        // GridLayoutManager: SpanCount = จำนวน Column
        GridLayoutManager layoutManager = new GridLayoutManager(this, 2); // 2 Columns
        recyclerView.setLayoutManager(layoutManager);

        // Optional: Span Size Lookup (Item บางตัวกว้างเต็ม Row)
        // layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        //     @Override public int getSpanSize(int position) {
        //         return (position % 5 == 0) ? 2 : 1; // ทุก 5 Item กว้าง 2 Span
        //     }
        // });

        // Data
        List items = Arrays.asList(
            new GridAdapter.GridItem(R.drawable.ic_android, "Android", "Mobile OS"),
            new GridAdapter.GridItem(R.drawable.ic_kotlin, "Kotlin", "Language"),
            new GridAdapter.GridItem(R.drawable.ic_jetpack, "Jetpack", "Libraries"),
            new GridAdapter.GridItem(R.drawable.ic_compose, "Compose", "UI Toolkit"),
            new GridAdapter.GridItem(R.drawable.ic_firebase, "Firebase", "Backend"),
            new GridAdapter.GridItem(R.drawable.ic_material, "Material", "Design"),
            new GridAdapter.GridItem(R.drawable.ic_coroutines, "Coroutines", "Async"),
            new GridAdapter.GridItem(R.drawable.ic_flow, "Flow", "Streams"),
            new GridAdapter.GridItem(R.drawable.ic_room, "Room", "Database"),
            new GridAdapter.GridItem(R.drawable.ic_workmanager, "WorkManager", "Background"),
            new GridAdapter.GridItem(R.drawable.ic_navigation, "Navigation", "Routing"),
            new GridAdapter.GridItem(R.drawable.ic_paging, "Paging", "Data Loading")
        );

        GridAdapter adapter = new GridAdapter(items, (item, pos) -> 
            Toast.makeText(this, item.name, Toast.LENGTH_SHORT).show()
        );
        recyclerView.setAdapter(adapter);

        // Optional: Item Decoration สำหรับ Spacing
        // recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, dpToPx(8), true));
    }

    // Helper สำหรับ ItemDecoration
    private int dpToPx(int dp) {
        return (int) (dp * getResources().getDisplayMetrics().density);
    }
}

GridLayoutManager Features ขั้นสูง

1. Span Size Lookup (Variable Span)

ทำให้ Item บางตัวกว้างกว่า (Span หลาย Column):

layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        // Header/Footer กว้างเต็ม
        if (position == 0 || position == adapter.getItemCount() - 1) {
            return spanCount; // spanCount = จำนวน Column ทั้งหมด
        }
        // Item ปกติ
        return 1;
    }
});

2. Dynamic Span Count (ตาม Orientation/Width)

// คำนวณ Column จาก Screen Width
int spanCount = calculateSpanCount(recyclerView.getWidth(), itemWidthDp);
GridLayoutManager layoutManager = new GridLayoutManager(this, spanCount);

private int calculateSpanCount(int recyclerViewWidth, int itemWidthDp) {
    float itemWidthPx = itemWidthDp * getResources().getDisplayMetrics().density;
    int spanCount = Math.max(1, (int) (recyclerViewWidth / itemWidthPx));
    return spanCount;
}

// เรียกใหม่เมื่อ Rotate/Resize (ใช้ OnGlobalLayoutListener หรือ WindowInsets)

3. ItemDecoration สำหรับ Grid Spacing

public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {
    private final int spanCount;
    private final int spacing;
    private final boolean includeEdge;

    public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {
        this.spanCount = spanCount;
        this.spacing = spacing;
        this.includeEdge = includeEdge;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
        int position = parent.getChildAdapterPosition(view);
        int column = position % spanCount;

        if (includeEdge) {
            outRect.left = spacing - column * spacing / spanCount;
            outRect.right = (column + 1) * spacing / spanCount;
            if (position < spanCount) outRect.top = spacing;
            outRect.bottom = spacing;
        } else {
            outRect.left = column * spacing / spanCount;
            outRect.right = spacing - (column + 1) * spacing / spanCount;
            if (position >= spanCount) outRect.top = spacing;
        }
    }
}

// ใช้งาน
recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, dpToPx(8), true));

เปรียบเทียบ: GridLayoutManager vs StaggeredGridLayoutManager

สรุป

• GridLayoutManager(context, spanCount) - SpanCount = จำนวน Column
• Item Layout ใช้ Fixed Width (match_parent ใน Grid Cell) + CardView สวยงาม
• SpanSizeLookup สำหรับ Header/Footer/Full-width Item
• ItemDecoration สำหรับ Spacing ที่สม่ำเสมอ
• Dynamic Span Count: คำนวณจาก Screen Width ให้ Responsive
• Item Height ไม่เท่ากัน → ใช้ StaggeredGridLayoutManager