Help us understand the problem. What is going on with this article?

5. 【Android/Kotlin】ダイアログ(Dialog)

はじめに

DreamHanksのMOONです。

前回は「リストビュー」というViewについて説明をしました。
4. 【Android/Kotlin】リストビュー(ListView)

今回はリストビューのアイテムをクリックした場合、
ダイヤログが表示され、リストのアイテムを削除できるようにしていきます。

ダイアログとは

ダイアログは、ユーザーによる意思決定や追加情報の入力用に表示される小さなウィンドウです。ダイアログは全画面に表示されることはなく、通常はユーザーが処理を続ける前にアクションを起こす必要があるモデルイベントに使用されます。

種類は代表的にAlertDialogDatePickerDialogTimePickerDialogがあります。
その中で今回はAlertDailogを使用していきます。

AlertDialog追加

前回作成したコードを使用して修正します。
全体コードを確認したい場合は前回のリンクで確認してください。

まず、Activityファイルを下記のように修正します。

ListViewActivity.kt
package com.example.practiceapplication

import android.app.AlertDialog
import android.content.DialogInterface
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log.d
import android.view.ContextThemeWrapper
import android.widget.*
import kotlinx.android.synthetic.main.activity_listview.*
import javax.xml.validation.Validator

class ListViewActivity : AppCompatActivity() {

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

        var userList = arrayListOf<User>(
            User("佐藤","sato@ggggg.com"),
            User("鈴木","suzuki@aaaaa.com"),
            User("高橋","takahasi@yyyyy.com"),
            User("伊藤","ito@fffff.com"),
            User("渡辺","watanabe@bbbbb.com"),
            User("山本","yamamoto@zzzzz.com"),
            User("中村","nakamura@ccccc.com"),
            User("小林","kobayasi@xxxxx.com"),
            User("加藤","gato@wwwww.com")
        )

        var list_view = findViewById<ListView>(R.id.list_view)
        //リストビューのアイテムを変更
        setListView(userList)

        //リストビューのアイテムのクリックイベントを設定
        list_view.setOnItemClickListener { parent, view, position, id ->
            //クリックされたアイテム
            val element = parent.getItemAtPosition(position)

            //ダイアログを生成
            val builder = AlertDialog.Builder(ContextThemeWrapper(this@ListViewActivity, R.style.Theme_AppCompat_Light_Dialog))
            builder.setTitle("ユーザー名")
            //選択されたアイテムがユーザーオブジェクトの場合
            if(element is User){
                //ダイアログの内容にユーザー名を設定
                builder.setMessage(element.name)
            }
            //確認ボタンを追加(確認ボタンは単純に確認機能)
            builder.setPositiveButton("確認", DialogInterface.OnClickListener { dialog, which ->
            })
            //削除ボタンを追加
            builder.setNegativeButton("削除", DialogInterface.OnClickListener { dialog, which ->
                //ユーザーリストで選択されたアイテムを削除
                userList.remove(element)

                //リストビューのアイテムを変更
                setListView(userList)
            })

            builder.show()
        }
    }

    fun setListView(userList: ArrayList<User>){
        //アダプターにリストを設定
        val Adapter = ListAdapter(this, userList)
        //リストビューにアダプターを設定
        list_view.adapter = Adapter
    }
}

追加分

 ・リストビューのアイテムクリックイベント設定

        //リストビューのアイテムのクリックイベントを設定
        list_view.setOnItemClickListener { parent, view, position, id ->
            //クリックされたアイテム
            val element = parent.getItemAtPosition(position)

            //ダイアログを生成
            val builder = AlertDialog.Builder(ContextThemeWrapper(this@ListViewActivity, R.style.Theme_AppCompat_Light_Dialog))
            builder.setTitle("ユーザー名")
            //選択されたアイテムがユーザーオブジェクトの場合
            if(element is User){
                //ダイアログの内容にユーザー名を設定
                builder.setMessage(element.name)
            }
            //確認ボタンを追加(確認ボタンは単純に確認機能)
            builder.setPositiveButton("確認", DialogInterface.OnClickListener { dialog, which ->
            })
            //削除ボタンを追加
            builder.setNegativeButton("削除", DialogInterface.OnClickListener { dialog, which ->
                //ユーザーリストで選択されたアイテムを削除
                userList.remove(element)

                //リストビューのアイテムを変更
                setListView(userList)
            })

            builder.show()
        }

 ・リストビューにアダプターを設定

    fun setListView(userList: ArrayList<User>){
        //アダプターにリストを設定
        val Adapter = ListAdapter(this, userList)
        //リストビューにアダプターを設定
        list_view.adapter = Adapter
    }

①リストビューにアイテムクリックイベントを設定します。
②イベント内にダイアログを生成します。
③ダイアログにタイトルを設定、メッセージには選択したアイテムの名前を設定します。
④確認ボタンを設定し、確認ボタンは別の設定は不要です。
⑤削除ボタンを設定し、削除ボタンにはユーザーリスト内のユーザー中から選択したユーザーを削除します。
⑥最後にリストビューに変更したユーザーにストのアダプターを設定します。

アプリ起動

・初期画面

・佐藤さんをクリックした場合

・佐藤さんから伊藤まで削除した場合

終わりに

今回は「ダイアログ」について説明をしました。

次回は「スピナー」について説明をしていきます。
6. 【Android/Kotlin】スピナー(Spinner)

最新内容については下記のリンク(DreamHanksのブログ)で確認することができます。
DreamHanksブログ(Android/Kotlinアプリ開発)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away