리싸이클러뷰 : chapter 1

코틀린 코드를 이용하여, 리싸이클러뷰 를 사용하는 방법에 대해 설명 드려보겠습니다. 자바 언어를 이용할때 보다는 훨씬 더 심플하게 리싸이클러뷰를 사용 할수 있습니다. 이번 포스팅에서는 리싸이클러 뷰를 적용 하기 위해서 몇가지 기본이 되는 부분에 대해 이야기 드리겠습니다. 먼저 리싸이클러 뷰를 구성하기 위해서는 리싸이클러뷰는 기본 적으로 포함 되어있지 않기때문에 다운로드를 해야합니다. 그리고 리싸이클러뷰를 담을 ViewHolder 와 데이터와 리싸이클러뷰를 연결 시킬 Adpater가 필요합니다. 자 그럼 처음 부터 차근 차근 단계별로 설명 드리겠습니다. 

1. 리싸이클러뷰 다운로드 (먼저 파일에 프로젝트 스트럭처를 선택합니다.)

그리고 Dependencies를 클릭후, "+" 버튼을 선택 합니다. 

소문자로 recyclerview를 검색후, stable 버전을 선택 하고 "Ok" 버튼을 눌러서 다운로드 합니다. 

2. 리싸이클러뷰를 XML 에 구성 하고, ID 값을 넣습니다. 설명에서는 "container" 라고 넣겠습니다. 

3. 리싸이클러뷰에 표시할 item_box1.xml 구성하기 

4. 데이터 클래스 만들기 : ItemModel

class ItemModel (val imageId:Int, val name:String)

5. 데이터를 담을수 있는 ViewHolder 만들기 : ItemViewHolder

import android.view.View
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.extensions.LayoutContainer

class ItemViewHolder(override val containerView: View) : RecyclerView.ViewHolder(containerView), LayoutContainer

6. Adpater 클래스 구현 하기 

class ItemAdapter(val id:Int, val list : List<ItemModel>) : RecyclerView.Adapter<ItemViewHolder>() {
    val selectionList = mutableListOf<Long>()
    var onItemSelectionChangeListener: ((MutableList<Long>) -> Unit)? = null

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(id, parent, false)
        view.setOnClickListener(object : View.OnClickListener{
            override fun onClick(v: View?) {
                val id  = v?.tag
                if(selectionList.contains(id)){selectionList.remove(id)}
                else {selectionList.add(id as Long) }
                notifyDataSetChanged()
                onItemSelectionChangeListener?.let{it(selectionList)}

            }
        })
        return  ItemViewHolder(view)
    }

    override fun getItemCount(): Int {
        return list.size
    }

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        holder.containerView.imageView.setImageResource(list[position].imageId)
        holder.containerView.textView.text = list[position].name
        holder.containerView.tag  = getItemId(position)
        holder.containerView.isActivated = selectionList.contains(getItemId(position))

    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }
}

7. MainActivity 구성하기 

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val list = listOf(
            ItemModel(R.drawable.img2, "1번 이미지"),
            ItemModel(R.drawable.img3, "2번 이미지"),
            ItemModel(R.drawable.img4, "3번 이미지"),
            ItemModel(R.drawable.img5, "4번 이미지"),
            ItemModel(R.drawable.img6, "5번 이미지"),
            ItemModel(R.drawable.img7, "6번 이미지")
            )

        val adpter = ItemAdapter(R.layout.item_box1, list)

        adpter.onItemSelectionChangeListener = {
            println("선택된 ID : $it")
        }
        container.adapter = adpter
        container.layoutManager = LinearLayoutManager(this,RecyclerView.VERTICAL, false)

    }
}

8. 전체 코드 

https://github.com/rain2002kr/recyclerView_exam_selected.git