[Android 개발일지] MVVM 패턴으로 Todo, Done List 만들기 - (3) Todo리싸이클러뷰, 메모 추가 기능

2021.05.22 - [안드로이드/개발] - [Android 개발일지] MVVM 패턴으로 Todo, Done List 만들기 - (2) 레이아웃, DB 만들기

[Android 개발일지] MVVM 패턴으로 Todo, Done List 만들기 - (2) 레이아웃, DB 만들기

2021.05.22 - [안드로이드/개발] - [Android 개발일지] MVVM 패턴으로 Todo, Done List 만들기 - (1) 기획, Mockup [Android 개발일지] MVVM 패턴으로 Todo, Done List 만들기 - (1) 기획, Mockup MVVM 패턴에 대..

hanyeop.tistory.com

에서 이어지는 글입니다.

0️⃣ 오류수정

@Dao
interface MemoDao {
    // OnConflictStrategy.IGNORE = 동일한 아이디가 있을 시 무시
    @Insert(onConflict = OnConflictStrategy.IGNORE)
    suspend fun addMemo(memo : Memo)

    @Update
    suspend fun updateMemo(memo : Memo)

    @Delete
    suspend fun deleteMemo(memo : Memo)

    @Query("SELECT * FROM Memo ORDER BY id ASC")
    fun readAllData() : Flow<List<Memo>>

    @Query("SELECT * FROM Memo WHERE content LIKE :searchQuery")
    fun searchDatabase(searchQuery : String) : Flow<List<Memo>>
}

// 앱에서 사용하는 데이터와 그 데이터 통신을 하는 역할
class MemoRepository(private val memoDao: MemoDao) {
    val readAllData : Flow<List<Memo>> = memoDao.readAllData()

    suspend fun addMemo(memo: Memo){
        memoDao.addMemo(memo)
    }

    suspend fun updateMemo(memo: Memo){
        memoDao.updateMemo(memo)
    }

    suspend fun deleteMemo(memo: Memo){
        memoDao.deleteMemo(memo)
    }

    fun searchDatabase(searchQuery: String): Flow<List<Memo>> {
        return memoDao.searchDatabase(searchQuery)
    }
}

// 뷰모델은 DB에 직접 접근하지 않아야함. Repository 에서 데이터 통신.
class MemoViewModel(application: Application) : AndroidViewModel(application) {

    val readAllData : LiveData<List<Memo>>
    private val repository : MemoRepository

    init{
        val memoDao = MemoDatabase.getDatabase(application)!!.memoDao()
        repository = MemoRepository(memoDao)
        readAllData = repository.readAllData.asLiveData()
    }

    fun addMemo(memo : Memo){
        viewModelScope.launch(Dispatchers.IO) {
            repository.addMemo(memo)
        }
    }

    fun updateMemo(memo : Memo){
        viewModelScope.launch(Dispatchers.IO) {
            repository.updateMemo(memo)
        }
    }

    fun deleteMemo(memo : Memo){
        viewModelScope.launch(Dispatchers.IO) {
            repository.deleteMemo(memo)
        }
    }

    fun searchDatabase(searchQuery: String): LiveData<List<Memo>> {
        return repository.searchDatabase(searchQuery).asLiveData()
    }
}

Dao, Repository, ViewModel에서 저번에 작업한 자료로 사용했더니 메소드 이름을 User로 사용하여서 다 Memo로 바꿔주었다.

1️⃣ TodoList 리싸이클러뷰 설정

todolist 리싸이클러뷰에서 사용할 아이템을 만들어주고

class TodoAdapter : RecyclerView.Adapter<TodoAdapter.MyViewHolder>() {

    private var memoList = emptyList<Memo>()

    class MyViewHolder(val binding: TodoItemBinding) : RecyclerView.ViewHolder(binding.root)

    // 어떤 xml 으로 뷰 홀더를 생성할지 지정
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val binding = TodoItemBinding.inflate(LayoutInflater.from(parent.context),parent,false)
        return MyViewHolder(binding)
    }

    // 뷰 홀더에 데이터를 바인딩
    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val currentItem = memoList[position]
        val currentContent = currentItem.content
        val currentCheck = currentItem.check

        holder.binding.memoCheckBox.text = currentContent
    }

    // 뷰 홀더의 개수 리턴
    override fun getItemCount(): Int {
        return memoList.size
    }

    // 메모 리스트 갱신
    fun setData(memo : List<Memo>){
        memoList = memo
        notifyDataSetChanged()
    }
}

어댑터를 만들어 바인딩해준다.

일단은 테스트하기 위해 저장된 메모내용만 표시되도록 할 것이다.

TodoListFragment

private val adapter : TodoAdapter by lazy { TodoAdapter() } // 어댑터 선언

어댑터를 선언해주고

// 아이템을 가로로 하나씩 보여주고 어댑터 연결
        binding!!.todoRecyclerView.layoutManager = LinearLayoutManager(activity,LinearLayoutManager.VERTICAL,false)
        binding!!.todoRecyclerView.adapter = adapter

        // 리스트 관찰하여 변경시 어댑터에 전달해줌
        memoViewModel.readAllData.observe(viewLifecycleOwner, Observer {
            adapter.setData(it)
        })

아까 만들어준 어댑터를 연결해주고

저장된 데이터 리스트를 관찰하여 변경점이 있을 시 리스트를 다시 넘겨준다.

넣어놓은 임의의 값들이 잘 출력되는 것을 확인할 수 있다.

2️⃣ 메모 추가 기능, 다이얼로그 만들기

커스텀 다이얼로그 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="@drawable/rounded_corner"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <EditText
            android:id="@+id/editTextTextPersonName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="메모"
            android:textSize="16sp"
            android:layout_margin="5dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.225" />

        <Button
            android:id="@+id/okButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginBottom="32dp"
            android:text="확인"
            android:textSize="24sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <Button
            android:id="@+id/cancelButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="32dp"
            android:layout_marginBottom="32dp"
            android:text="취소"
            android:textSize="24sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

todolist에서 fab 클릭시 다이얼로그를 띄워 이곳에서 메모를 입력하게 하려고 한다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="4dp"
        android:color="@color/primaryColor" />

    <solid android:color="@color/backgroundColor"/>
    <corners android:radius="20dp"/>

</shape>

버튼 디자인은 따로 만들어서 구현하였으며

컬러는 다크모드와 일반모드에 각각 구현하여 모드에 맞는 색이 뜨도록 하였다.

TodoListFragment

// Fab 클릭시 사용되는 함수
    private fun onFabClicked(){
        val myCustomDialog = MyCustomDialog(activity!!)
        myCustomDialog.show()
    }

fab 클릭 시 만든 커스텀 다이얼로그가 보여지게 만들어주고,

MyCustomDialog

class MyCustomDialog(context : Context, myInterface: MyCustomDialogInterface) : Dialog(context) {

    // 액티비티에서 인터페이스를 받아옴
    private var myCustomDialogInterface: MyCustomDialogInterface = myInterface

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

        var okButton : Button = findViewById(R.id.okButton)
        var cancelButton : Button = findViewById(R.id.cancelButton)
        var memoEditView : EditText = findViewById(R.id.memoEditView)

        // 배경 투명하게 바꿔줌
        window!!.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

        okButton.setOnClickListener {
            val memo = memoEditView.text.toString()

            // 입력하지 않았을 때
            if ( TextUtils.isEmpty(memo)){
                Toast.makeText(context, "메모를 입력해주세요.", Toast.LENGTH_SHORT).show()
            }

            // 입력 창이 비어 있지 않을 때
            else{
                myCustomDialogInterface.onOkButtonClicked(memo)
                dismiss()
            }
        }

        // 취소 버튼 클릭 시 종료
        cancelButton.setOnClickListener { dismiss()}
    }
}

다이얼로그를 상속받은 커스텀다이얼로그 클래스에서 아까 만든 레이아웃을 연결하여 보여준다.

MyCustomDialogInterface

interface MyCustomDialogInterface {
    fun onOkButtonClicked(content : String)
}

또한 인터페이스로 메소드를 공유하여

다이얼로그에서 입력한 값을 TodoListFragment에서 사용할 수 있게 하였다.

TodoListFragment

class TodoListFragment : Fragment(), MyCustomDialogInterface

아까 만든 인터페이스를 상속해주고

// 다이얼로그에서 추가버튼 클릭 됐을 때
    override fun onOkButtonClicked(content: String) {
        val memo = Memo(false,content)
        memoViewModel.addMemo(memo)
        Toast.makeText(activity,"추가", Toast.LENGTH_SHORT).show()
    }

받아온 에디트뷰의 텍스트로 메모를 추가해준다.