[안드로이드] 리싸이클러뷰(RecyclerView), 카드뷰(CardView) 적용기

안녕하세요. 오늘은 저의 개인 앱에 적용한 안드로이드 리싸이클러뷰에서 카드뷰를 제작을 하려고 합니다. 

카드뷰 in 리싸이클러뷰

위 그림처럼 표현을 해주는 것이 리싸이클러 뷰입니다.

각각들은 카드 뷰 이지만 그 카드뷰는 뷰홀더로 감싸져 있으며 그 뷰홀더를 재사용하면서 사용하는 것이 리싸이클러 뷰 입니다. 

저렇게 정보를 나열하는 것만으로도 생각보다(?) 여러가지를 알아야 한다는게 신기하기도 했습니다. 저는 계속 리스트뷰를 사용하다가 리싸이클러뷰가 뭔가 있어보여서(?) ㅎㅎ 사용을 하게 되었습니다. 사실 여러 장점이 있는데 이 부분은 다음 포스팅에 다루도록 하겠습니다. 

우선 xml 하고 코드를 보겠습니다.

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".ui.main.search.SearchFragment">
 
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:name="com.keelim.nandadiagnosis.ui.main.searchtemp.SearchTempFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="3dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        tools:listitem="@layout/item_listview" />
 
</androidx.constraintlayout.widget.ConstraintLayout>
 

이 xml 은 액티비티에 들어가는 레이아웃으로 RecyclerView를 정해주는 곳이다. 전체적인 틀을 준다고 생각합니다.

또한 이 틀 안을 반복적으로 채우는 <item_layout>을 한번 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="20dp"
    app:cardElevation="5dp"
    app:cardUseCompatPadding="true"
    app:contentPadding="10dp">
 
    <androidx.constraintlayout.widget.ConstraintLayout
        android:background="@drawable/item_background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <TextView
            android:id="@+id/diagnosis_item"
            style="@style/tv_style"
            android:textSize="24sp"
 
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
 
        <TextView
            android:id="@+id/diagnosis_des"
            style="@style/tv_style"
            android:textSize="18sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/diagnosis_item" />
 
        <TextView
            android:id="@+id/class_name"
            style="@style/tv_style"
            android:textSize="12sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/diagnosis_des" />
 
        <TextView
            android:id="@+id/domain_name"
            style="@style/tv_style"
            android:textSize="12sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/class_name" />
 
        <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="2dp"
            android:background="#121212"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/domain_name"
            app:layout_constraintVertical_bias="0.0" />
    </androidx.constraintlayout.widget.ConstraintLayout>
 
</androidx.cardview.widget.CardView>
 

 

보통 튜토리얼 글을 보면 adapter 하고 layoutmanager 를 넣지만 저는 xml 에 layout manager 를 기입했기 때문에 adapter 설정만 해주시면 됩니다 

binding.recyclerView.adapter = SearchRecyclerViewAdapter(items)

사실 이글을 쓴 목적은 제가 카드뷰를 사용을 하면서 여러가지 렌더링 오류가 있어서 참고자료로 작성을 해보았습니다.

🧶질문과 비판은 언제나 환영합니다.