230831 리사이클러뷰

: view를 재활용해서 사용한다.

 

▼ 메인 엑티비티에서 바인딩할 xml파일(activity_recycler_view)▼

<LinearLayout 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"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

 

▼ 메인 액티비티(RecyclerView)▼

class RecyclerView : AppCompatActivity() {
    private val binding by lazy{ActivityRecyclerViewBinding.inflate(layoutInflater)}
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)
    }

 

1.  xml파일에 recyclerview를 하나 만들어주고 식별할 수 있는 id를 할당한다.

2. 그리고 메인엑티비티에서 해당 xml파일을 바인딩한다.

3. 이렇게 되면 현재  메인 액티비티(RecyclerView)에서 xml파일(activity_recycler_view) 하고 연동 된다.

 

▼ 메인 액티비티(RecyclerView)▼

binding.recyclerView.apply {
    adapter = RecyclerViewAdapter(dataList)
    layoutManager = LinearLayoutManager(this@RecyclerView)
}

4. 이제 recyclerView를 불러와서 adapter와 연결시키고 dataList를 넘겨준다. (어댑터를 초기화)

5. LinearLayoutManager(수평,수직으로 배치시켜주는 레이아웃메니저)를 이용해서 리사이클러뷰를 표시해준다.

6. 정리하잠녀 리사이클러뷰를 쓰기 위해서 리사이클러뷰를 바인딩해주고 해당 어댑터에 데이터를 넘겨주고, 레이아웃을 배치시켜주면 끝이다. 나머지는 어댑터에서 알아서한다.

 

▼ 어댑터 복습▼

▼ 메인 액티비티의 어댑터(RecyclerViewAdapter)▼

class RecyclerViewAdapter(val character: MutableList<MyItem>) :
    RecyclerView.Adapter<RecyclerViewAdapter.Holder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        val binding =
            ItemRecyclerviewBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return Holder(binding)
    }
    override fun onBindViewHolder(holder: Holder, position: Int) {
        holder.apply {
            iconImageView.setImageResource(character[position].aIcon)
            name.text = character[position].aName
            age.text = character[position].aAge
        }
    }
    override fun getItemCount(): Int {
        return character.size
    }
    inner class Holder(val binding: ItemRecyclerviewBinding) :
        RecyclerView.ViewHolder(binding.root) {
        val iconImageView = binding.iconItem1
        val name = binding.recycletext1
        val age = binding.recycletext2
    }
}

7. 메인 액티비티의 어댑터(RecyclerViewAdapter)에서 리사이클러뷰어댑터를 상속 받았으므로 onCreateViewHolder, onBindViewHolder, getItemCount를 반드시 override해서 써주고

 

▼ 메인 액티비티의 어댑터(RecyclerViewAdapter)의 xml파일(item_recyclerview.xml)▼

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <ImageView
        android:id="@+id/iconItem1"
        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"
        android:scaleType="centerCrop"
        android:padding="@dimen/icon_padding"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        app:srcCompat="@drawable/character1" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="vertical">
        <TextView
            android:id="@+id/recycletext_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/Pink200"
            android:textSize="@dimen/list_item_text_size1"
            android:padding="@dimen/list_item_padding"
            android:hint="Name"/>

        <TextView
            android:id="@+id/recycletext_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/Purple200"
            android:textSize="@dimen/list_item_text_size2"
            android:padding="@dimen/list_item_padding"
            android:hint="Age"
            />
    </LinearLayout>
</LinearLayout>

8. 해당 xml을 바인딩해준다음 에뮬레이터를 실행하면

 

9. 이렇게 매우 기본적인 리사이클러 구조를 볼 수 있다.

 

정리

 

1. 메인엑티비티에서 xml파일에 리사이클러뷰를 만들어주고 바인딩한다.

2. 리사이클러뷰 어댑터에 데이터를 넘겨준다.

3. 그럼 어뎁터에서 바인딩된 xml파일의 레이아웃에 각각 데이터를 넣어준다.(앞에서 같이 공부했으므로 생략)

 

 

 

 

 

썸네일 출처

https://kr.freepik.com/free-photo/cute-ai-generated-cartoon-bunny_40572276.htm#query=%EA%B7%80%EC%97%AC%EC%9A%B4%20%EB%8F%99%EB%AC%BC&position=1&from_view=keyword&track=ais