[Android] RecyclerView 적용

1. 먼저 홈프래그먼트 xml파일에 리싸이클러뷰 코드를 추가한다.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/fragment_home_title_random_rv"
    android:layout_width="match_parent"
    android:layout_height="133dp"
    android:layout_marginStart="16dp"
    android:layout_marginLeft="16dp"
    android:orientation="horizontal"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintLeft_toLeftOf="@id/fragment_home_tlover_tv"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/fragment_home_title_random_nav"
    tools:listitem="@layout/item_home_random" />

 

2. 위의 코드처럼 추가를 했으면 리싸이클러뷰에 나타낼 아이템뷰 xml파일을 따로 생성해준다.

해당 코드는 이미지뷰와 텍스트뷰만 있으니 생략!!

 

3. 데이터클래스를 생성하고 해당 데이터를 추가한다.

data class HomeDataModel(
    var title: String? ="",
    var image: Int? = null,
    var date: String? ="",
    var nickname: String? ="",
    var location: String? =""
)

아이템에 해당하는 제목, 이미지, 데이터, 닉네임, 위치를 추가.

 

4. 어댑터 클래스와 뷰홀더를 생성한다.

class HomeRVAdapter(private val randomList: ArrayList<HomeDataModel>) :RecyclerView.Adapter<HomeRVAdapter.Holder>(){

    class Holder(val binding : ItemHomeRandomBinding) : RecyclerView.ViewHolder(binding.root){
        fun bind(random: HomeDataModel){
            binding.itemHomeRandomImgTitle.setText(random.title)
            binding.itemHomeRandomImg.setImageResource(random.image!!)
            binding.itemHomeRandomImgDate.setText(random.date)
            binding.itemHomeRandomImgNickname.setText(random.nickname)
            binding.itemHomeRandomImgLocation.setText(random.location)
        }
    }

 

5. 이제 홈프래그먼트에서 연결만 하면 끝 ~!!!

dataList.apply{
    add(HomeDataModel("title1", R.drawable.img1_item_home_random,"2022.04.28","Peter","Queens"))
    add(HomeDataModel("title2", R.drawable.img2_item_home_random,"2022.06.03","Tony","NewYork"))
    add(HomeDataModel("title1", R.drawable.img1_item_home_random,"2022.04.28","Peter","Queens"))
    add(HomeDataModel("title2", R.drawable.img2_item_home_random,"2022.06.03","Tony","NewYork"))
    add(HomeDataModel("title1", R.drawable.img1_item_home_random,"2022.04.28","Peter","Queens"))
    add(HomeDataModel("title2", R.drawable.img2_item_home_random,"2022.06.03","Tony","NewYork"))

}

val homeRVAdapter = HomeRVAdapter(dataList)
binding.fragmentHomeTitleRandomRv.adapter = homeRVAdapter
binding.fragmentHomeTitleRandomRv.layoutManager = LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)

더미데이터를 추가하고 어댑터와 연결해주면 다음과 같은 화면을 확인할 수 있다!!

처음 리싸이클러뷰를 접했을 때는 어려운 개념이였지만

앱 'FLO' 를 클론코딩해보고, 'TLOVER'프로젝트에 적용해보니 이젠 쉬운 개념이 되었다!!