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

 

 

 

---

1. 결과

 

 

 

---

2. 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">

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerHorizon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

</LinearLayout>

 

# 1번 째 리사이클러 뷰는 Vertical(세로) 방향의 리사이클러 뷰

 

# 2번 째 리사이클러 뷰는 Horizontal(가로) 방향의 리사이클러 뷰

 

 

 

---

3. Vertical RecyclerView (세로 리사이클러뷰)

---

3-1. list_item_vert.xml (세로 아이템 레이아웃)

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

    <View
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:background="@color/cardview_dark_background"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingHorizontal="10dp"
        android:paddingVertical="5dp"
        android:orientation="vertical">

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

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/cardview_dark_background"/>

        <TextView
            android:id="@+id/textContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Content 1"
            android:textSize="16sp" />

    </LinearLayout>

</LinearLayout>

 

3-2. ListAdapterVertical.kt (세로 리사이클러뷰 어댑터)

package com.example.recyclerview01

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

class ListAdapterVertical:  RecyclerView.Adapter<ListAdapterVertical.ListAdapter>(){
    var titles = arrayListOf("Title 1", "Title 2", "Title 3", "Title 4", "Title 5", "Title 6", "Title 7", "Title 8")
    var contents = arrayListOf("Content 1", "Content 2", "Content 3", "Content 4", "Content 5", "Content 6", "Content 7", "Content 8")

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

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListAdapter {
        return ListAdapter(LayoutInflater.from(parent.context).inflate(R.layout.list_item_vert, parent, false))
    }

    override fun onBindViewHolder(holder: ListAdapter, position: Int) {
        holder.layout.textTitle.text = titles[position]

        holder.layout.textContent.text = contents[position]
    }

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

 

# Test 용으로 사용할 titles, contents를 선언하여서 사용한다. 이러한 리스트 값들은 어댑터를 선언할 때 파라미터로 받을 수도 있다.

 

# RecyclerView.ViewHolder를 상속 받는 ListAdapter를 내부의 선언하여 사용한다.

 

 

 

---

4. Horizontal RecyclerView (가로 리사이클러뷰)

---

4-1. list_item_hori.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:layout_marginHorizontal="2dp"
    android:orientation="vertical">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/cardview_dark_background"
        android:src="@drawable/ic_launcher_foreground"/>

    <TextView
        android:id="@+id/textImg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test 1"
        android:textSize="18sp"
        android:background="@color/cardview_dark_background"
        android:textColor="@color/white"
        android:gravity="center"/>

</LinearLayout>

 

4-2. ListAdapterHorizontal.kt (가로 리사이클러뷰 어댑터)

package com.example.recyclerview01

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

class ListAdapterHorizontal(var list: ArrayList<String>):  RecyclerView.Adapter<ListAdapterHorizontal.ListAdapter>(){

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

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListAdapter {
        return ListAdapter(LayoutInflater.from(parent.context).inflate(R.layout.list_item_hori, parent, false))
    }

    override fun onBindViewHolder(holder: ListAdapter, position: Int) {
        holder.layout.textImg.text = list[position]

    }

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

 

# 세로 리사이클러뷰와 다르게 ArrayList<String> 타입의 list를 파라미터로 받아서 사용한다.

 

 

 

---

5. MainActivity.kt

package com.example.recyclerview01

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

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

        var manager01 = LinearLayoutManager(this)
        var adapter01 = ListAdapterVertical()

        var RecyclerView01 = recyclerVertical.apply {
            adapter = adapter01
            layoutManager = manager01
        }

        var list = arrayListOf("Test 1", "Test 2", "Test 3", "Test 4")
        var manager02 = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)
        var adapter02 = ListAdapterHorizontal(list)

        var RecyclerView02 = recyclerHorizon.apply {
            adapter = adapter02
            layoutManager = manager02
        }
    }
}

 

# Manager와 새로 선언한 Adapter를 recyclerview의 적용시켜 준다.

 

# Manager를 선언할 때 LinearLayoutManager()를 사용하며, 가로형 리사이클러뷰를 만들고자 하면

 

LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)

 

처럼 2, 3번 째의 파라미터를 주면 된다.

 

 

 

---

6. 전체 코드

GitHub - Notepad96/BlogExample