[Android/Kotlin] Todo List 앱을 만들어보자! - 5 (목록 불러오기)

본 포스트는 Todo List 앱을 만들어보자! - 4 에 이어지는 글입니다.

 

이번에는 추가한 메모의 목록을 불러와보도록 하겠습니다!

 

먼저 RecyclerView를 사용하기 위해 Adapter를 만들도록 하겠습니다.

 

TodoAdapter.kt

class TodoAdapter(val context: Context): RecyclerView.Adapter<TodoAdapter.TodoViewHolder>() {

    private var list = mutableListOf<Todo>()

    inner class TodoViewHolder(itemView: View): RecyclerView.ViewHolder(itemView) {

        var title = itemView.findViewById<TextView>(R.id.tvTodoItem)
        var timestamp = itemView.findViewById<TextView>(R.id.tvTimeStamp)
        var checkbox = itemView.findViewById<CheckBox>(R.id.cbCheck)

        fun onBind(data: Todo) {
            title.text = data.title
            timestamp.text = data.timestamp
            checkbox.isChecked = data.isChecked

            if (data.isChecked) {
                title.paintFlags = title.paintFlags or STRIKE_THRU_TEXT_FLAG
            } else {
                title.paintFlags = title.paintFlags and STRIKE_THRU_TEXT_FLAG.inv()
            }

            checkbox.setOnClickListener{
                itemCheckBoxClickListener.onClick(it, layoutPosition, list[layoutPosition].id)
            }
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TodoViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_todo_list, parent, false)
        return TodoViewHolder(view)
    }

    override fun onBindViewHolder(holder: TodoViewHolder, position: Int) {
        holder.onBind(list[position])
    }

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

    fun update(newList: MutableList<Todo>) {
        this.list = newList
        notifyDataSetChanged()
    }

    interface ItemCheckBoxClickListener {
        fun onClick(view: View, position: Int, itemId: Long)
    }

    private lateinit var itemCheckBoxClickListener: ItemCheckBoxClickListener

    fun setItemCheckBoxClickListener(itemCheckBoxClickListener: ItemCheckBoxClickListener) {
        this.itemCheckBoxClickListener = itemCheckBoxClickListener
    }
}

onBind 함수를 통해 item_todo_list의 변수에 값을 저장합니다.

체크박스의 상태에 따라 제목에 줄을 그어주기 위해 itemCheckBoxClickListener 이벤트를 만들어줍시다.

데이터가 변화하면 수정하여 반영하기 위한 update 함수를 작성해줍니다.

 

이제 MainActivity로 돌아가 Adapter를 연결해주도록 하겠습니다.

 

MainActivity.kt

class MainActivity : AppCompatActivity() {
    ...
    lateinit var todoAdapter: TodoAdapter
    ...

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        
        todoViewModel.todoList.observe(this) {
            todoAdapter.update(it)   
        }

        todoAdapter = TodoAdapter(this)
        binding.rvTodoList.layoutManager = LinearLayoutManager(this)
        binding.rvTodoList.adapter = todoAdapter

        ...

        todoAdapter.setItemCheckBoxClickListener(object: TodoAdapter.ItemCheckBoxClickListener {
            override fun onClick(view: View, position: Int, itemId: Long) {
                CoroutineScope(Dispatchers.IO).launch {
                    val todo = todoViewModel.getOne(itemId)
                    todo.isChecked = !todo.isChecked
                    todoViewModel.update(todo)
                }
            }
        })
    }
}

todoViewModel.todoList는 LiveData이기 때문에 observe를 통해 변화된 값을 감지할 수 있습니다.

이를 이용해 목록의 값이 변경(추가, 수정, 삭제)되면 이를 TodoAdapter에 반영하여 데이터가 업데이트 되도록 하겠습니다.

 

todoAdapter를 선언해주고

binding.rvTodoList에 연결해줍니다.

 

그리고 checkbox의 클릭 이벤트를 처리해줍니다.

todoViewModel.getOne(itemId)를 통해 클릭된 아이템의 정보를 가져오고, isChecked를 토글합니다.

 

저장한 todo 목록이 정상적으로 출력되어 나타났네요!

 

 

다음 포스트에서는 목록의 Todo 아이템을 클릭하여 수정하는 작업을 해보도록 하겠습니다!