# PRJ_3. 커뮤니티 게시판 앱_(4) 게시판 항목 RecyclerView

🟦 37강. RecyclerViw : 목록 화면 구성

▶️ RecyclerView 구성

• 현재 게시판 글 목록을 RecyclerView를 이용하여 구성.

🟧 RecyclerView 리사이클러 뷰 - 목록 화면

• 리사이클러 뷰 : 여러 항목 나열한 목록 화면
• 내부 구성요소 (4가지)

1) ViewHolder(필수) : 항목 뷰 객체 가짐

2) Adapter(필수) : 각 항목을 구성

3) LayoutManager(필수) : 항목 배치

4) ItemDecoration(선택) : 항목 꾸미기

• 리사이클러 뷰 사용법

(1) build.gradle 파일 dependencies 항목에 다음 의존 추가

implementation ‘androidx.recyclerview:recyclerview:1.2.1’

(2) 리사이클러 뷰를 레이아웃 XML 파일에 등록

(3) 각 항목 레이아웃 XML 파일도 필요

• 목록화면 전체 구성 순서

(1) 뷰 홀더 준비

(2) 어댑터로 뷰 홀더 속 각 항목 뷰 객체에 데이터 대입하여 각 항목 구성

(3) 레이아웃 매니저는 어댑터가 만든 항목들의 배치 결정

(4) 리사이클러 뷰에 위의 내용을 최종 출력

◾ 1) 각 항목의 규격을 갖는 xml 파일 생성

board_main_recycler_item.xml

◾ 2) 각 항목들을 띄울 ‘BoardMainFragment.kt’ 에서 리사이클러 뷰 설정해준 뒤 바인딩 처리

BoardMainFragment.kt

package com.example.app3_communityapp

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.DividerItemDecoration
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.example.app3_communityapp.databinding.BoardMainRecyclerItemBinding
import com.example.app3_communityapp.databinding.FragmentBoardMainBinding

class BoardMainFragment : Fragment() { //'게시판 메인' 프래그먼트
    //바인딩 세팅
    lateinit var boardMainFragmentBinding : FragmentBoardMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        boardMainFragmentBinding = FragmentBoardMainBinding.inflate(inflater)
        boardMainFragmentBinding.boardMainToolbar.title= "게시판이름"

        //리사이클러뷰 관련 설정
        // 1) 어댑터 객체 생성
        val boardMainRecyclerAdapter = BoardMainRecyclerAdapter()
        boardMainFragmentBinding.boardMainRecycler.adapter= boardMainRecyclerAdapter
        // 2) 레이아웃 매니저로 어댑터로 만든 항목의 레이아웃 배치 설정
        boardMainFragmentBinding.boardMainRecycler.layoutManager= LinearLayoutManager(requireContext())
        // 3) 아이템 데코레이션 - 구분선 생성
        boardMainFragmentBinding.boardMainRecycler.addItemDecoration(DividerItemDecoration(requireContext(), 1))

        return boardMainFragmentBinding.root
}

    //리사이클러뷰 사용을 위한 클래스  - 내부에서 재정의 필요한 함수 getItemCount()/onCreateViewHolder()/onBindViewHolder()
    inner class BoardMainRecyclerAdapter : RecyclerView.Adapter<BoardMainRecyclerAdapter.ViewHolderClass>(){

        //1) 재정의 : onCreateViewHolder() : 뷰 홀더준비 위해 자동 호출되는 함수
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolderClass {

            //바인딩
            val boardMainRecyclerItemBinding = BoardMainRecyclerItemBinding.inflate(layoutInflater)
            val holder = ViewHolderClass(boardMainRecyclerItemBinding) //각 개별 항목 xml 파일을 바인딩

            //각 항목 하나당 레이아웃 크기 설정
            val layoutParams = RecyclerView.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, //가로 길이
                ViewGroup.LayoutParams.WRAP_CONTENT//세로 길이
            )
            //위의 설정을 레이아웃에 세팅 해준다.
            boardMainRecyclerItemBinding.root.layoutParams= layoutParams
            //각 항목 터치했을 때 호출될 리스터 설정
            boardMainRecyclerItemBinding.root.setOnClickListener(holder)

            return holder
        }

        //2) 재정의 : onBindViewHolder() 뷰 홀더 각 항목 뷰에 데이터 출력 위해서 자동 호출
        override fun onBindViewHolder(holder: ViewHolderClass, position: Int) {

        }
        //3) 재정의 : getItemCount() 항목 개수 판단을 위해 자동 호출됨
        override fun getItemCount(): Int {
            return 10
        }

        //뷰 홀더 클래스 생성
        inner class ViewHolderClass(boardMainRecyclerItemBinding:BoardMainRecyclerItemBinding)
            : RecyclerView.ViewHolder(boardMainRecyclerItemBinding.root), View.OnClickListener{

            //각 항목 터치됐을 때 자동 호출 메소드 ()
            override fun onClick(v: View?) {

            }
        }
    }

}

최종 모습