Android Studio 리사이클러뷰 생성 (Kotlin)

리사이클러뷰는 리스트뷰와 유사하지만 보다 더 유연하다는 점에 있어서 자주 쓰이고 있다.

 

리사이클러뷰를 만들기 전에 꼭 build.gradle에 추가해줘야 할 코드가 있다.

implementation 'androidx.recyclerview:recyclerview:1.1.0'

dependencies에 꼭 추가해주어야 한다.

 

 본격적으로, 리사이클러뷰 생성 방법에 대해 말해보자면

가장 먼저 해야할 것은 리사이클러뷰 배치 및 아이템 레이아웃 구성이다.

 

1. 먼저, 리사이클러뷰를 배치해야할 뷰에 RecyclerView를 구성한다.

 

<androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

리사이클러뷰 배치

아이템 레이아웃

본인이 원하는 구성대로 알맞게 배치시키면 된다.

 

2. 그 후 리사이클러뷰 내부에 들어갈 item 레이아웃(xml)을 구성한다.

 

여기까지 리사이클러뷰 UI 레이아웃을 모두 구성한 것이다. 그 다음으로 해야될 것은 리사이클러뷰와 아이템을 이어줘야 된다.

 

3. data class 파일을 생성시켜야 한다. 이 파일 내부에는 Item에 필요한 데이터들을 사용할 수 있게끔 생성시켜준다.

data class ListItem (
    val name: String,
    val gender: Int,
    val age: Int,
    val phone : String
)

위의 코드와 같이 본인 아이템 데이터에 맞게 구성하면 된다.

 

4. 다음으로 뷰홀더 파일을 만들어야 한다. 뷰홀더는 쉽게 말하자면 뷰(레이아웃)의 각 요소들을 Hold. 관리하는 곳으로 생각하면 된다. 일단 이 파일에서는 RecyclerView.ViewHolder를 상속받아야 한다.

class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {

    val vh_name: TextView = view.findViewById(R.id.item_name)
    val vh_gender: TextView = view.findViewById(R.id.item_gender)
    val vh_age: TextView = view.findViewById(R.id.item_age)
    val vh_phone: TextView = view.findViewById(R.id.item_phone)

    fun bind(data: ListItem){
        vh_name.text=data.age
        vh_gender.text=data.gender
        vh_age.text=data.age
        vh_phone.text=data.phone
    }
}

(※ 앞에 vh_를 붙인 이유는 data class의 이름이랑 겹쳐서 헷갈릴까봐 표기를 했다.)

 

bind 함수에서 데이터들을 세팅시킨다고 생각하면 된다.

 

5. 뷰홀더를 만든 후에는 어댑터 파일을 만들어야 한다. 어댑터는 '데이터들을 ViewHolder'로 변경시켜주기 위해 있는 파일이라고 생각하면 쉽다. 이 파일에서는 RecyclerView.Adapter를 상속받아서 사용한다. 그리고 데이터들을 어떤 ViewHolder로 변경시켜줄 것인지를 <ViewHolder>에 적으면 된다.

class Adapter(private val context: Context) : RecyclerView.Adapter<ViewHolder>(){

    //데이터 저장할 아이템리스트
    var data= listOf<ListItem>()

    //해당 아이템을 뷰홀더로 만드는 법
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        //리스트 아이템 인플레이터
        val view = LayoutInflater.from(context).inflate(R.layout.rv_item,parent,false)
        return ViewHolder(view)
    }

    //아이템 전체 갯수 파악
    override fun getItemCount(): Int {
        return data.size
    }
    
    //바인드뷰홀더 생성
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(data[position])
    }
}

(※ R.layout.rv_item 에서 rv_item은 본인이 만든 item 뷰의 id값이다.)

 

6. 이제 리사이클러뷰에 넣어줄 데이터들이 담긴 파일을 만들어 준다. (innerData.kt)

class innerData {
    fun getRepoList(): List<ListItem> {
        return listOf(
            ListItem(
                name = "홍길동",
                gender = 1,
                age = 30,
                phone = "010-0000-0000"
            ),
            ListItem(
                name = "홍길동",
                gender = 1,
                age = 30,
                phone = "010-0000-0000"
            ),
            ListItem(
                name = "홍길동",
                gender = 1,
                age = 30,
                phone = "010-0000-0000"
            )
		)
    }
}

 

7. 마지막으로 리사이클러뷰를 생성한 액티비티에 어댑터 연결 및 아이템 배치를 할 것이다. 리사이클러뷰가 있는 액티비티로 돌아와 아래와 같이 코드를 써주면 된다.

class MainPageActivity : AppCompatActivity() {
    private lateinit var rv: RecyclerView
    private lateinit var my_adapter: Adapter // 본인이 만든 어댑터
    private val repository= innerData() // 아이템 데이터를 생성한 파일
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_page)
        
        rv = findViewById(R.id.recyclerView)
        
        my_adapter = Adapter(this)
        rv.adapter = my_adpater // 리사이클러뷰 어댑터를 본인이 만든 어댑터로 설정

        rv.layoutManager = LinearLayoutManager(this)
        my_adapter.data=repository.getRepoList() // 데이터 받아오기
        rv.notifyDataSetChanged()
            
}

어댑터를 연결 시키고, layoutManager를 이용하여 아이템 배치를 설정하면 된다.

notifyDataSetChanged()는 어댑터에 데이터가 들어간 것을 갱신해주는 역할을 한다.

 

그럼 리사이클러뷰가 완성된다.