[Android] RecyclerView (2)

1. HomeFragment에 RecyclerView를 추가한다!

2. 리싸이클러뷰에 보일 아이템들의 뷰 레이아웃을 구성한다! -> item_album.xml

3. 아이템 뷰 객체들에 들어갈 데이터리스트 생성 -> Album 데이터 클래스 생성 후 List에 담기

4. 어댑터클래스 및 뷰홀더 생성

5. 리싸이클러뷰에 어댑터 연결 및 레이아웃매니저 추가

-실습

전 글의 마지막에 작성했던 실습예시를 차례대로 구현해보자!

1. 홈프래그먼트에 리싸이클러뷰를 추가하자.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/home_today_music_album_rv"
    android:layout_width="match_parent"
    android:layout_height="210dp"
    android:layout_marginTop="10dp"
    tools:listitem="@layout/item_album"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    android:orientation="horizontal"
    app:layout_constraintTop_toBottomOf="@id/home_today_music_total_tv"/>

여기서 tools부터 horizontal 까지는 실제로 구현된 것은 아니고, 어떻게 배치될 지 미리 볼 수 있게 확인만 가능하다!

만일 리싸이클러뷰를 구현하기 전, 어떻게 구현될 지 확인하고 싶으면 작성해주면 편리하게 확인 가능하다!

 

2. 리싸이클러뷰에 보일 아이템들의 뷰 레이아웃을 구성하자.

<androidx.cardview.widget.CardView
    android:id="@+id/item_album_cover_img_cardView"
    android:layout_width="150dp"
    android:layout_height="150dp"
    app:cardCornerRadius="7dp"
    app:cardElevation="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent">
    <ImageView
        android:id="@+id/item_album_cover_img_iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/img_album_exp2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.cardview.widget.CardView>

카드뷰를 이용한 이유는 사진의 끝 부분에 Radius를 적용해주기 위해서이다.

 

3. 아이템 뷰 객체들에 들어갈 데이터리스트를 생성하자.

data class Album(
        var title: String? = "",
        var singer: String? = "",
        var coverImg: Int? = null
)

이렇게 앨범에 관한 데이터클래스를 생성해주었으면 홈프래그먼트에서 더미데이터를 추가하자.

여러 종류를 추가해주기 위해 앨범 arraylist를 선언해준다.

private var albumDatas = ArrayList<Album>()

albumDatas.apply{
    add(Album("butter", "bts", R.drawable.img_album_exp))
}

선언해준뒤, 서버에서 받아오기 전 테스트를 할 더미데이터를 추가한다!!

 

4.  어댑터클래스 및 뷰홀더 생성하자.

class AlbumRVAdapter(private val albumList: ArrayList<Album>) : RecyclerView.Adapter<AlbumRVAdapter.ViewHolder>(){

앨범리싸이클러뷰 어댑터를 생성할 때 앨범데이터리스트를 인자로 받아와야 하기 때문이 위와 같이 적어준 뒤,

어댑터클래스를 상속받는다.

    // 뷰홀더를 생성해줘야 할 때 호출되는 함수 => 아이템 뷰 객체를 만들어서 뷰홀더에 던져줍니다.
    //만들어진 아이템뷰 객체를 뷰홀더에게 아이템뷰 객체를 던져줌
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): AlbumRVAdapter.ViewHolder {
        val binding: ItemAlbumBinding = ItemAlbumBinding.inflate(LayoutInflater.from(viewGroup.context), viewGroup, false)

        return ViewHolder(binding)
    }

    // 뷰홀더에 데이터를 바인딩해줘야 할 때마다 호출되는 함수 => 엄청나게 많이 호출
    // 포지션 인덱스아이디를 포지션이라고 함
    override fun onBindViewHolder(holder: AlbumRVAdapter.ViewHolder, position: Int) {
        holder.bind(albumList[position])
        holder.itemView.setOnClickListener { mItemClickListener.onItemClick(albumList[position]) }
//        holder.binding.itemAlbumTitleTv.setOnClickListener { mItemClickListener.onRemoveAlbum(position) } //삭제됐을 때
    }

    // 데이터 세트 크기를 알려주는 함수 => 리사이클러뷰가 마지막이 언제인지를 알게 된다.
    override fun getItemCount(): Int = albumList.size

    // 뷰홀더
    inner class ViewHolder(val binding: ItemAlbumBinding): RecyclerView.ViewHolder(binding.root){

        fun bind(album: Album){
            binding.itemAlbumTitleTv.text = album.title
            binding.itemAlbumSingerTv.text = album.singer
            binding.itemAlbumCoverImgIv.setImageResource(album.coverImg!!)
        }
    }

어댑터 클래스를 상속받으면 위와 같이 3개의 메소드를 오버라이드해야한다.

onCreateViewHolder는 뷰홀더를 생성해줘야 할 때 호출되는 함수고, 아이템 뷰 객체를 만들어 뷰홀더에게 던져준다.

onBindViewHolder는 뷰홀더에 데이터를 바인딩해줘야 할 때 호출되는 함수여서, 사용자가 스크롤을 올릴 때 마다 실행되는 함수이다.

 

5. 리싸이클러뷰에 어댑터 연결 및 레이아웃매니저 추가

// 더미데이터랑 Adapter 연결
// 데이터 리스트를 던져줌
val albumRVAdapter = AlbumRVAdapter(albumDatas)

// 리사이클러뷰에 어댑터를 연결
binding.homeTodayMusicAlbumRv.adapter = albumRVAdapter
// 레이아웃 매니저 설정
binding.homeTodayMusicAlbumRv.layoutManager = LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)

이렇게 하면 끝!!

더미데이터들이 담긴 객체들을 오른쪽에서 왼쪽으로 넘기면 잘 넘어가는 것을 확인할 수 있다!