๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
studies/Mobile Application

[Android/Kotlin] Horizontal ๊ฐ€๋กœ ์Šฌ๋ผ์ด๋“œ Recycler View ์‚ฌ์šฉํ•˜๊ธฐ (์™„์ „ ์‰ฌ์›€)

by Vada Kim 2021. 5. 15.
728x90
๋ฐ˜์‘ํ˜•

 ์ž‘๋…„ ๊ฐ€์„ ์ดํ›„๋กœ ์•ˆ๋“œ๋กœ์ด๋“œ๋ฅผ ๋งŒ์ง„ ์ ์ด ์—†๋Š”๋ฐ, ์š”์ฆ˜ ๋‹ค์‹œ ๋ถ™์žก๊ณ  ์žˆ๋‹ค.

 ์˜ค๋žœ๋งŒ์— (๋ฐ˜๋…„์ „์ด์ง€๋งŒ ๋‚˜์—๊ฒ ํฐ ์‹œ๊ฐ„) ๋งŒ์ง€๋‹ˆ ๋‚ ์•„๊ฐ„ ๊ธฐ์–ต๋“ค์ด ์žˆ์–ด ๋ณต์Šตํ•œ๋‹ค๋Š” ๋Š๋‚Œ์œผ๋กœ ์ž๋ฃŒ๋ฅผ ์ฐพ์•„๊ฐ€๋ฉฐ ์ง„ํ–‰์ค‘์ด๋‹ค. Recycler view๋Š” ์‚ฌ์šฉ๋ฐฉ๋ฒ•์ด ๋ฌด์กฐ๊ฑด ์ต์ˆ™ํ•ด์•ผํ•œ๋‹ค๊ณ  ๋Š๊ปด์„œ ์ด๋ฒˆ์— ์ œ๋Œ€๋กœ ๋ฝ€๊ฐฐ๋‹ค.

์šฐ์™• ์ด๋ชจํ‹ฐ์ฝ˜ ์ƒ๊ฒผ๋‹ค. ์—…๋ฐ์ดํŠธ๋œ๋“ฏ !


 

1. RecyclerView ๊ด€๋ จ XML element ์ƒ์„ฑ

๋ฆฌ์‚ฌ์ดํด๋Ÿฌ๋ทฐandroidx.recyclerview.widget.RecyclerView ์™€ ๊ทธ ์•„์ดํ…œ ๋ทฐ ์ƒ์„ฑ

 

์•„์ดํ…œ ๋ทฐ Root layout ํฌ๊ธฐ ์†์„ฑ์€ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ถŒ์žฅํ•œ๋‹ค. 

  • item_room.xml
android:layout_width="wrap_content"
android:layout_height="wrap_content"

 

๋ฆฌ์‚ฌ์ดํด๋Ÿฌ๋ทฐ ์ƒ์„ฑ์‹œ ์•„๋ž˜ ์†์„ฑ์„ ๋ฐ˜๋“œ์‹œ ์ž…๋ ฅํ•ด์•ผํ•œ๋‹ค.

  • HomeActivity.kt ์˜ <androidx.recyclerview.widget.RecyclerView>
android:orientation="horizontal" //์•„์ดํ…œ ์ˆ˜ํ‰ ๋ฐฐ์น˜ (๊ฐ€๋กœ flow)
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

 

 

 

 

 

2. VO class ์ƒ์„ฑ

Recycler View์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ๊ฐ์ฒด ์ •์˜. ๋‚˜๋Š” Room์ด๋ž€ ๊ฐ์ฒด๋ฅผ ์ •์˜ํ•˜๊ณ ์ž ํ•œ๋‹ค.

  • RoomVo.kt
class RoomVo(var title: String, var desc: String, var day: String)

 

 

 

 

3. Adapter class ์ƒ์„ฑ

ViewHolder ๋‚ด๋ถ€ ํด๋ž˜์Šค, ์˜ค๋ฒ„๋ผ์ด๋“œ ํ•„์ˆ˜ ๋ฉ”์„œ๋“œ(onCreateViewHolder, onBindViewHolder, getItemCount) ์ •์˜

  • RoomViewAdapter.kt
class RoomViewAdapter(val context: Context, private val RoomData: ArrayList<RoomVo>): RecyclerView.Adapter<RoomViewAdapter.ViewHolder>(){
//RoomData: ๋ฐ”์ธ๋”ฉ ๋  ๋ฐ์ดํ„ฐ ๊ฐ์ฒด ๋ฐฐ์—ด

    inner class ViewHolder(view: View?) : RecyclerView.ViewHolder(view!!){
    	//๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ”์ธ๋”ฉ ๋‹นํ•  Item XML ๋‚ด๋ถ€์˜ elements๋“ค
        val title = view?.findViewById<TextView>(R.id.title_meeting_item)
        val desc = view?.findViewById<TextView>(R.id.desc_meeting_item)
        val day = view?.findViewById<TextView>(R.id.date_meeting_item)

        fun bind(room: RoomVo, context: Context){
            title?.text = room.title
            desc?.text = room.desc
            day?.text = room.day
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.item_room, parent, false)
        //๋ฐ”์ธ๋”ฉ ๋‹นํ•  Item XML ํŒŒ์ผ๋ช… ์ง€์ • --R.layout.item_room
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    	//๋ฐ์ดํ„ฐ๋ฅผ ์ˆœ์„œ๋Œ€๋กœ ๋ฐ”์ธ๋”ฉ --ํฌ์ง€์…˜(์ธ๋ฑ์Šค)๊ฐ’์„ ํ™œ์šฉ ๊ฐ€๋Šฅ. ํ˜„์žฌ๋Š” ๋ชจ๋“  ๊ฐ’ ๋ฐ”์ธ๋”ฉ
        holder.bind(RoomData[position], context)
    }

    override fun getItemCount() = RoomData.size //์–ดํƒญํ„ฐ๋กœ ๋ฐ”์ธ๋”ฉ๋œ ์•„์ดํ…œ ๊ฐœ์ˆ˜ ๋ฐ˜ํ™˜

}

 

 

 

 

4. Adapter ํ˜ธ์ถœ

  • HomeActivity.kt
class HomeActivity : AppCompatActivity() {
    lateinit var roomsRecyclerView: RecyclerView
    lateinit var roomAdapter: RoomViewAdapter
    var roomData = ArrayList<RoomVo>() //๋ฐ”์ธ๋”ฉ ๋  ๊ฐ์ฒด ๋ฐ์ดํ„ฐ ๋ฆฌ์ŠคํŠธ
    
    override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_home)

      roomsRecyclerView = findViewById(R.id.rooms_recycleView_home)
      roomAdapter = RoomViewAdapter(this, roomData)
      roomsRecyclerView.adapter = roomAdapter //๋ฆฌ์‚ฌ์ดํด๋Ÿฌ๋ทฐ์— ์–ด๋Œ‘ํ„ฐ ์ง€์ •
    }
}

 

 

728x90
๋ฐ˜์‘ํ˜•