Android Kotlin RecyclerView Grid - 리사이클러뷰(격자형, 표 형식)

 

 

 

---

1. 결과

 

결 과

 

 

 

---

2. Layout

---

2-1. activity_main.xml (메인 레이아웃)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Grid Layout"
        android:textSize="22sp"
        android:textStyle="bold"
        android:gravity="center" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerGridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

 

2-2. list_grid_item.xml (리스트 아이템 레이아웃)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/layoutListItem"
    android:orientation="vertical"
    android:layout_marginHorizontal="20dp"
    android:layout_gravity="center">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_foreground"
        android:background="@drawable/ic_launcher_background"/>

    <TextView
        android:id="@+id/textListTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title 1"
        android:textStyle="bold"
        android:textSize="18sp"
        android:gravity="center"/>

</LinearLayout>

 

# 리스트의 보여줄 하나의 아이템(항목) 레이아웃을 정의한다.

 

 

 

---

3. ListAdapterGrid.kt (리스트 어댑터)

package com.example.recyclerview02

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.list_grid_item.view.*

class ListAdapterGrid(var list: ArrayList<String>): RecyclerView.Adapter<ListAdapterGrid.GridAdapter>() {

    class GridAdapter(val layout: View): RecyclerView.ViewHolder(layout)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): GridAdapter {
        var view = LayoutInflater.from(parent.context).inflate(R.layout.list_grid_item, parent, false)

        return GridAdapter(view)
    }

    override fun onBindViewHolder(holder: GridAdapter, position: Int) {
        holder.layout.textListTitle.text = list[position]
        
        holder.layout.layoutListItem.setOnClickListener {
            Toast.makeText(holder.layout.context, "${list[position]} Click!", Toast.LENGTH_SHORT).show()
        }
    }

    override fun getItemCount(): Int {
        return list.size
    }
}

 

# 어댑터 코드 구성은 일반 Vertical, Horizontal Recyclerview를 생성할 때와 동일하게 구성된다.

 

Android Kotlin RecyclerView - 리사이클러뷰(가로, 세로)

 

 

---

4. MainActivity.kt 

package com.example.recyclerview02

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.GridLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

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

        var list = arrayListOf("Title 1", "Title 2", "Title 3", "Title 4", "Title 5", "Title 6", "Title 7", "Title 8")
        var listManager = GridLayoutManager(this, 3)
        var listAdapter = ListAdapterGrid(list)

        var recyclerList = recyclerGridView.apply {
            setHasFixedSize(true)
            layoutManager = listManager
            adapter = listAdapter
        }
    }
}

 

# Manager를 GridLayoutManager를 사용하여 초기화 해준다. 여기서 2번 째 파라미터로 준 3은 열의 개수 이다. 

 

 

 

---

5. 전체 코드

GitHub - Notepad96/BlogExample