【はじめてのKotlinプログラミング(37)】RecyclerViewでToDoアプリ(前編:リストの追加)

後編:リストの削除はこちら

kotlinでRecyclerViewを使って
リストに入力した情報を追加したり、削除したりできる、
簡単なメモ帳アプリというか、Todoアプリのようなものを作ってみたいと思います。

今回は前半で、入力した文字が、リストに追加される、というところまで解説します。
リストからアイテムを削除する方法は後編で解説します。

以下準備中

動画

目次

タイトル 再生時間
作業内容 02:25~
[1]activity_main.xml 07:50~
[2]1行だけのレイアウト(xml) 15:30~
[3]data class 18:20~
[4-5]Adapter(準備)と、ViewHolder 20:45~
[6-8]Adapterの3つ 29:20~
[9-10]MainActivity.kt 35:00~
[11]ボタンを押したら~ 39:00~

コード

▼activity_main.xml

<?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"
    tools:context=".MainActivity">


    <EditText
        android:id="@+id/et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="何か書いて"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="+"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et" />
</androidx.constraintlayout.widget.ConstraintLayout>

▼one_layout.xml

<?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="wrap_content">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

▼TodoData.kt

package com.example.recyclertodo

data class TodoData(
    val myTodo :String
)

▼RecyclerAdapter.kt

package com.example.recyclertodo

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

//5)リストを用意 クラス名(private val 変数名:ArrayList<データクラス>) //or MutableList
class RecyclerAdapter(private val todoList:ArrayList<TodoData>) :RecyclerView.Adapter<RecyclerAdapter.ViewHolderItem>() {
    //listOf

    //5)ViewHolder(インナークラス)
    inner class ViewHolderItem(v:View) :RecyclerView.ViewHolder(v) {
        val tvHolder : TextView = v.findViewById(R.id.tv)
    }

    //6)一行だけのViewを生成
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolderItem {
        val itemXml = LayoutInflater.from(parent.context)
            .inflate(R.layout.one_layout,parent,false)
        return ViewHolderItem(itemXml)
    }

    //7)position番目のデータをレイアウト(xml)に表示するようセット
    override fun onBindViewHolder(holder: ViewHolderItem, position: Int) {
        val currentItem = todoList[position] //何番目のリスト(アイテム)ですか
        holder.tvHolder.text = currentItem.myTodo //そのリストの中の要素を指定して代入
    }

    //8)リストサイズ
    override fun getItemCount(): Int {
        return todoList.size
    }
}

▼MainActivity.kt

package com.example.recyclertodo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
    //9)追加リストと、RecyclerViewと、アダプターを用意
    private var addList =ArrayList<TodoData>() //空っぽのリストを用意<型はデータクラス>
    private lateinit var recyclerView : RecyclerView
    private var recyclerAdapter = RecyclerAdapter(addList) //アダプターに追加リストをセット

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //10)viewの取得、アダプターにセット、レイアウトにセット
        recyclerView = findViewById(R.id.rv)
        recyclerView.adapter = recyclerAdapter
        recyclerView.layoutManager = LinearLayoutManager(this)

        //11)追加ボタンを押したら~
        val btnAdd : Button = findViewById(R.id.btnAdd)
        btnAdd.setOnClickListener {
            val et :EditText = findViewById(R.id.et)
            val data =TodoData(et.text.toString())
            addList.add(data)
            recyclerAdapter.notifyItemInserted(addList.lastIndex) //表示を更新(リストの最後に挿入)

            et.text = null
        }
    }
}

【参考】

RecyclerView:アイテムの変更(Change/Insert/Move/Remove)

kotlin android how to add and delete item in recyclerview/android how to add popup menu recyclreview

RecyclerViewの基本的な使い方と動的にリストを作る方法

 

    コメントを残す