[안드로이드/kotlin] RecyclerView 적용하기

RecyclerView는 한정적인 사이즈의 화면안에 많은 데이터를 넣을 수 있는 뷰이다.

상하로 또는 좌우로 스와이프하면서 많은 데이터를 화면에서 볼 수 있다.

우리가 사용하는 대부분의 앱에 적용되어 있지 않나 싶다. 쇼핑몰에서 다양한 상품을 보기위해 상하로 올리듯이..

 

RecyclerView는 ListView의 단점인 아이템 생성과 삭제를 반복하는 작업을 개선하여 뷰를 재활용하기 때문에

훨씬 성능이 좋다고 말할 수 있다.

 

RecycleView를 보여줄 xml에 추가하기

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/menu_recycler"
    android:layout_width="1810px"
    android:layout_height="650px"
    android:layout_marginTop="440px"
    android:layout_marginStart="110px"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

item_menu.xml

재활용할 화면에 나올 레이아웃을 생성해줍니다.

 

저는 textview 2개에 imageView 1개를 추가하였습니다.

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="450px"
        android:layout_height="650px">

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="330px"
            android:layout_height="58px"
            android:text="@string/title_location"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <TextView
            android:id="@+id/txt_subtitle"
            android:layout_width="330px"
            android:layout_height="36px"
            android:layout_marginTop="8px"
            android:text="@string/subtitle_location"
            android:textColor="@color/sub_card_title"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txt_title" />

        <ImageView
            android:id="@+id/icon"
            android:layout_width="180px"
            android:layout_height="180px"
            android:layout_marginStart="150px"
            android:layout_marginTop="268px"
            app:srcCompat="@drawable/ic_message"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txt_subtitle"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Menu dataclass 정의

 

data class 는 주로 models 디렉토리 밑에 추가한다고 한다. /models/Menu

data class Menu(val title: Int, val subtitle:Int, val imgIcon : Int)

MenuAdapter 정의

 

리사이클러뷰에 표시되는 아이템 뷰를 어댑터에서 생성한다. 리사이클러뷰는 다양한 형태로 아이템을 배치할 수 있는데

LayoutManager가 그 역할을 한다.

- LinearLayoutManager : 수평 또는 수직 방향, 일렬로 아이템을 배치한다.

- GridLayoutManager :  바둑판 모양의 격자형태로 아이템을 배치한다.

- StaggeredGridLayoutManager : 엇갈림 격자 형태로 아이템을 배치한다.

 

- Method

   > onCreateViewHolder : viewType 형태의 아이템 뷰를 위한 뷰홀더 객체 생성

   > onBindViewHolder : position에 해당하는 데이터를 뷰홀더의 아이템뷰에 표시

   > getItemCount : 전체 아이템 갯수 리턴

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MenuAdapter.ViewHolder {
    val inflater = LayoutInflater.from(parent.context)
    val binding = ItemMenuBinding.inflate(inflater, parent, false)
    return ViewHolder(binding)
}

override fun onBindViewHolder(holder: MenuAdapter.ViewHolder, position: Int) {
    val menu = menus[position]
    holder.binding.txtTitle.text = holder.itemView.context.getString(menu.title)
    holder.binding.txtSubtitle.text = holder.itemView.context.getString(menu.subtitle)
    holder.binding.icon.setImageResource(menu.imgIcon)
}

override fun getItemCount(): Int = menus.size

 MenuFragment.kt 에서 item 추가

val menus = listOf(
    Menu(R.string.title_location, R.string.subtitle_location, R.drawable.ic_message),
    Menu(R.string.title_message, R.string.subtitle_message, R.drawable.ic_message),
    Menu(R.string.title_message, R.string.subtitle_message, R.drawable.ic_message),
    Menu(R.string.title_change_journey, R.string.subtitle_change_journey, R.drawable.ic_message),
    Menu(R.string.title_change_journey, R.string.subtitle_change_journey, R.drawable.ic_message)
)

val adapter = MenuAdapter(menus)
binding.menuRecycler.layoutManager = LinearLayoutManager(requireContext(), LinearLayoutManager.HORIZONTAL, false)
binding.menuRecycler.adapter = adapter