Android(kotlin) ListView でリストから選択させる画面をつくる - 社内se × プログラマ × ビッグデータ

ListView を使ってリストを表示して、そこから選択できるような画面を作成します。

完成イメージ

f:id:blueskyarea:20200503111254p:plain
※DatabasePractice というアプリケーション名(app_name)になっていますが、なんでも可

今回、編集するファイル

strings.xml
activity_main.xml
MainActivity.kt

strings.xml で文字列の定義

<resources>
    <string name="app_name">DatabasePractice</string>
    <string-array name="lv_levellist">
        <item>Easy</item>
        <item>Normal</item>
        <item>Difficult</item>
    </string-array>
    <string name="tv_lb_name">Selected Level</string>
    <string name="tv_name">None</string>
    <string name="tv_lb_note">Description:</string>
    <string name="btn_save">Save</string>
</resources>

activity_main.xml で画面レイアウトを定義

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- Level list part -->
    <ListView
            android:id="@+id/lvLevel"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            android:layout_weight="0.6"
            android:entries="@array/lv_levellist"/>

    <!-- Selected level label part -->
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tv_lb_name"
            android:textSize="20sp"/>

    <!-- Selected level view part -->
    <TextView
            android:id="@+id/tvSelectedLevel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tv_name"
            android:textSize="20sp"/>

    <!-- Description label part -->
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="@string/tv_lb_note"
            android:textSize="20sp"/>

    <!-- Description view part -->
    <EditText
            android:id="@+id/etNote"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.4"
            android:gravity="top"
            android:inputType="textMultiLine"/>

    <!-- Save button part -->
    <Button
            android:id="@+id/btnSave"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:enabled="false"
            android:onClick="onSaveButtonClick"
            android:text="@string/btn_save"/>
</LinearLayout>

メモ
android:layout_weight="0.6"
> 残りの余白の60％をこの部品に割り当てる

android:gravity="top"
> 上揃えにする

android:inputType="textMultiLine"
> 複数行入力できるようにする

android:enabled="false"
> 初期状態ではボタン押せないようにする

MainActivity.kt でリスト選択時の動作をプログラム

class MainActivity : AppCompatActivity() {
    private var levelId = -1
    private var levelName = ""

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

        // Find ListView for Level list
        val lvLevel = findViewById<ListView>(lvLevel)
        // Register the ListView to listener
        lvLevel.onItemClickListener = ListItemClickListener()
    }

    /**
     * Member(inner) class for clicking list
     */
    private inner class ListItemClickListener: AdapterView.OnItemClickListener {
        override fun onItemClick(parent: AdapterView<*>, view: View, position: Int, id: Long) {
            // Set selected list number
            levelId = position
            // set selected list name
            levelName = parent.getItemAtPosition(position) as String
            // Find TextView for level name
            val tvLevelName = findViewById<TextView>(R.id.tvSelectedLevel)
            // Show selected level name
            tvLevelName.text = levelName
            // Find button for save
            val btnSave = findViewById<Button>(R.id.btnSave)
            // Enable the button
            btnSave.isEnabled = true
        }
    }

    /**
     * Method for Save button
     */
    fun onSaveButtonClick(view: View) {
        // Find EditText for description
        val etNote = findViewById<EditText>(R.id.etNote)
        // Clear the description
        etNote.setText("")
        // Find TextView for Level name
        val tvLevelName = findViewById<TextView>(R.id.tvSelectedLevel)
        // Set the Level name as None
        tvLevelName.text = getString(R.string.tv_name)
        // Find Button for save
        val btnSave = findViewById<Button>(R.id.btnSave)
        // Disable the button
        btnSave.isEnabled = false
    }
}