公開日：2020/04/27
更新日：2020/08/03

【Kotlin MVP】MVPアーキテクチャで、TODOアプリを作成する #6

アプリ開発におけるアーキテクチャ(設計)の1つに、MVPというものがあります。

本記事は、ToDoアプリの作成を通して、MVPについて学習するシリーズの第６弾です。

第６弾の今回は、ダイアログによるタスクの追加、更新処理を実装します。

なお、本シリーズで実装するTODOアプリのソースコードは、todo-sample | GitHubにて公開しております。

１．タスクの追加・編集処理の修正
- １－１．タスク追加処理の修正
- １－２．タスク編集処理の修正

タスクの追加・編集処理の修正

タスク追加処理の修正

これまで、タスクの追加・更新は、「New Task」、「Updated Task」というテキストが、固定でタスクの内容として設定されておりました。

この部分を、入力ダイアログを表示し、ユーザーが自由に入力できるように修正します。

まずは追加処理を修正します。MainFragmentのonViewCobject()内に実装されている、addTaskButton.setOnClickListenerの処理を以下のように修正します。

MainFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    (省略)

    addTaskButton.setOnClickListener {
        val editText = EditText(context).apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)
        }

        val container = LinearLayout(context).apply {
            setPadding(48,0,48,0)
            addView(editText)
        }

        AlertDialog.Builder(context)
            .setTitle(getString(R.string.add_dialog_title))
            .setView(container)
            .setPositiveButton(getString(R.string.ok), { dialog, which ->
                presenter.insertTask(editText.text.toString())
            })
            .setNegativeButton(getString(R.string.cancel), null)
            .show()
    }
}

AlertDialogに入力欄を表示するため、EditTextを生成しております。そして、入力欄の左右にスペースを作るため、LinearLayoutにPaddingを設定し、そのLinearLayoutの子Viewとして、EditTextを追加しております。

AlertDialogに対しては、setTitle()で、ダイアログのタイトルを設定しております。

そして、setView()で、先ほどのLinearLayoutを設定しております。

setPositiveButton()、setNegativeButton()は、ダイアログのボタンの実装です。OKがタップされると、EditTextから入力されたテキストを取得し、タスクの追加処理を行います。キャンセルがタップされると、何もせず、ダイアログを閉じます。

実行結果

タスク編集処理の修正

続いて、タスクの更新処理を修正します。MainFragmentの無名クラスのitemListener内に実装されている、onDescriptionClickの処理を以下のように修正します。

MainFragment.kt

val itemListener = object : TaskItemListener {
    (省略)

    override fun onDescriptionClick(task: Task) {
        val context = context?: return

        val editText = EditText(context).apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)
            setText(task.description)
        }

        val container = LinearLayout(context).apply {
            setPadding(48,0,48,0)
            addView(editText)
        }

        AlertDialog.Builder(context)
            .setTitle(getString(R.string.edit_dialog_title))
            .setView(container)
            .setPositiveButton(getString(R.string.ok), { dialog, which ->
                presenter.updateTaskDescription(task, editText.text.toString())
            })
            .setNegativeButton(getString(R.string.cancel), null)
            .show()
    }

    (省略)
}

実装されている処理は、追加のダイアログとほとんど同じです。タスクの更新なので、元のタスク内容が、入力欄に入力済みの状態で表示されるように実装しております。

実行結果