[Android] RecyclerView에 DataBinding 적용하기
만들 화면! 태그들을 RecyclerView로 만들고 DataBinding을 곁들여서 Drawable 이미지와 텍스트를 변경해줄 것이다.
파일 구조는 위와 같다.
🔸 TagData.kt
data class TagData(val tagImage: Drawable, val tagText: String) {
}
RecyclerView에 들어가는 정보인 이미지와 텍스트를 클래스로 정의해준다. 이미지를 url로 받아오는 것이 아니라 drawable에 있는 이미지를 가져올 것이므로 Gilde를 사용하지 않는다.
🔸 tag_item.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="tag"
type="com.example.cagong.data.TagData" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/tag_background"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/rounded_tag"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/tag_image"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="@{tag.tagImage}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="@+id/tag_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="@{tag.tagText}"
android:textColor="@color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tag_background" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
TagData에서 데이터를 받아와서 xml에 뿌려줄 것이므로 data영역에 변수 tag를 지정한다. 그리고 데이터바인딩으로 속성을 아래와 같이 정의해준다.
- ImageView에는 android:src="@{tag.tagImage}"
- TextView에는 android:text="@{tag.tagText}"
🔸 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout>
<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=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
메인액티비티에 RecyclerView를 추가한다.
🔸 MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private lateinit var manager: RecyclerView.LayoutManager
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
manager = GridLayoutManager(this, 3)
var data = listOf(TagData(getDrawable(R.drawable.icon_plugin)!!, "콘센트가 많아요"),
TagData(getDrawable(R.drawable.icon_mute)!!, "조용해요"),
TagData(getDrawable(R.drawable.icon_table)!!, "책상이 넓어요"),
TagData(getDrawable(R.drawable.icon_eyes)!!, "눈치가 덜 보여요"),
TagData(getDrawable(R.drawable.icon_chair)!!, "자리가 편해요"),
TagData(getDrawable(R.drawable.icon_light)!!, "눈이 편해요")
)
binding.recyclerView.apply{
adapter = TagRecyclerAdapter(data)
layoutManager = manager
}
}
}
TagData의 리스트를 만들어 어댑터에 넘겨준다.
Drawable을 얻어오는 방식
- getDrawable(R.drawable.리소스명)
- 뒤에 !!을 붙이지 않으면 넘겨줘야 하는 타입은 Drawable인데 Drawable?을 넘겨줬다는 의미로 타입 미스매치가 발생한다.
🔸 TagRecyclerAdapter.kt
class TagRecyclerAdapter(private val itemList: List<TagData>): RecyclerView.Adapter<TagRecyclerAdapter.MyViewHolder>(){
inner class MyViewHolder(val binding: TagItemBinding): RecyclerView.ViewHolder(binding.root) {
fun bind(item: TagData) {
binding.tag = item
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
val inflater = LayoutInflater.from(parent.context)
val listItemBinding = TagItemBinding.inflate(inflater, parent, false)
return MyViewHolder(listItemBinding)
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
holder.bind(itemList[position])
}
override fun getItemCount(): Int {
return itemList.size
}
}
뷰 객체를 그려주는 ViewHolder, Data와 View를 연결해주는 Adapter를 만들자. 다만 Adapter 클래스 안에 ViewHolder를 넣어줄 것이다.
- ViewHolder
: 각각의 뷰를 보관하는 Holder 객체. Item 뷰들을 재활용하기 위해 각 요소를 저장해두고 사용한다. bind 함수는 ViewHolder와 클래스의 각 변수를 연동하는 역할을 한다. 쉽게 말해 '이쪽 TextView엔 이 String을 넣어라'라고 지정하는 함수이다.
- onCreateViewHolder
: 화면을 최초 로딩한 상태라 만들어진 View가 없는 경우, xml파일을 inflate하여 ViewHolder를 생성한다.
- onBindViewHolder
: bind함수를 통해 위의 onCreateViewHolder에서 만든 View와 실제 입력되는 각각의 데이터를 연결한다.
- getItemCount
: RecyclerView로 만들어지는 item의 총 개수를 반환한다.
Author And Source
이 문제에 관하여([Android] RecyclerView에 DataBinding 적용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hygge/Android-RecyclerView에-DataBinding-적용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)