はじめに
Android初学者向けにKotlinでToDoリストアプリを作成してみました。30分程度でアプリ立ち上げができるのでぜひお試しください。
概要
Android Studio(Electric Eel)でToDoリストアプリを作成します。
今回実装する機能
- ToDoリスト表示機能
- ToDo追加機能
- ToDo移動機能
- ToDo削除機能
実装に用いる技術
- RecyclerViewを用いてリスト一覧を作成
- CardViewを用いてToDoを作成
- GridLayoutを用いてリストを編集
- AlertDialogを用いてメッセージ表示
導入
Android Studioのインストール&セットアップ
https://developer.android.com/studio/install?hl=ja
プロジェクト作成
Android StudioのヘッダーメニューよりFile > New > New Project…
Empty Activityを選択しNext
任意のNameを入力しLangageをKotlinのままFinish
実装
activity_main.xml
①activity_main.xmlを開き、②Splitを選択、③必要のない<TextView ~/>を削除
①Parletteから検索を行い、ButtonとRecyclerViewを画面にドラッグ&ドロップ
②idを設定し、文字やレイアウトを調節
android:text="+"上で option+Enter(Mac) / Alt+Enter(Windows) を押下し、Extract string resourceから登録を行う
<?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">
<Button
android:id="@+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:text="@string/addButton"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
add_todo.xml (ToDo追加ボタン押下時に表示するアラートの内容)
<?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">
<EditText
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:autofillHints="auto"
android:hint="@string/title"
android:inputType="text"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="@id/detail"
app:layout_constraintTop_toBottomOf="parent"
tools:ignore="VisualLintTextFieldSize" />
<EditText
android:id="@+id/detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:autofillHints="auto"
android:hint="@string/detail"
android:inputType="text"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintTop_toBottomOf="@id/title"
tools:ignore="VisualLintTextFieldSize" />
</androidx.constraintlayout.widget.ConstraintLayout>
one_layout.xml (リストに表示する内容)
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="6dp"
app:cardElevation="6dp"
app:cardUseCompatPadding="true"
app:contentPadding="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:maxLines="1"
android:textSize="15sp"
android:textStyle="bold" />
<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />
<TextView
android:id="@+id/detail"
android:layout_width="match_parent"
android:layout_height="65dp"
android:maxLines="4"
android:textColor="@android:color/darker_gray"
android:textSize="13sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
Todo.kt (リストに表示するアイテム)
package com.example.mytodo
data class Todo (
val title: String,
val detail: String
)
RecyclerAdapter.kt (アイテムを生成し、リストに適用するクラス)
package com.example.mytodo
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import java.util.*
class RecyclerAdapter(private val todoList: ArrayList<Todo>) :
RecyclerView.Adapter<RecyclerAdapter.ViewHolderItem>() {
// リストに表示するアイテムの表示内容
inner class ViewHolderItem(v: View) : RecyclerView.ViewHolder(v) {
val titleHolder : TextView = v.findViewById(R.id.title)
val detailHolder : TextView = v.findViewById(R.id.detail)
}
// リストに表示するアイテムを生成
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolderItem {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.one_layout, parent, false)
return ViewHolderItem(view)
}
// position番目のデータを表示
override fun onBindViewHolder(holder: ViewHolderItem, position: Int) {
val currentItem = todoList[position]
holder.titleHolder.text = currentItem.title
holder.detailHolder.text = currentItem.detail
}
// リストサイズを取得する用のメソッド
override fun getItemCount(): Int {
return todoList.size
}
}
MainActivity.kt (メインクラス)
package com.example.mytodo
import android.content.DialogInterface
import android.os.Bundle
import android.view.Window
import android.widget.Button
import android.widget.EditText
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.DividerItemDecoration
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.ItemTouchHelper
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
//表示するリストを用意（今は空）
private var addList = ArrayList<Todo>()
// RecyclerViewを宣言
private lateinit var recyclerView: RecyclerView
// RecyclerViewのAdapterを用意
private var recyclerAdapter = RecyclerAdapter(addList)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// ヘッダータイトルを非表示
supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
// Viewをセット
setContentView(R.layout.activity_main)
// View要素を取得
val btnAdd: Button = findViewById(R.id.btnAdd)
recyclerView = findViewById(R.id.rv)
// コンテンツを変更してもRecyclerViewのレイアウトサイズを変更しない場合はこの設定を使用してパフォーマンスを向上
recyclerView.setHasFixedSize(true)
// レイアウトマネージャーで列数を2列に指定
recyclerView.layoutManager = GridLayoutManager(this, 2, RecyclerView.VERTICAL, false)
val itemDecoration: RecyclerView.ItemDecoration =
DividerItemDecoration(this, DividerItemDecoration.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
// RecyclerViewにAdapterをセット
recyclerView.adapter = recyclerAdapter
// 追加ボタン押下時にAlertDialogを表示する
btnAdd.setOnClickListener {
// AlertDialog内の表示項目を取得
val view = layoutInflater.inflate(R.layout.add_todo, null)
val txtTitle: EditText = view.findViewById(R.id.title)
val txtDetail: EditText = view.findViewById(R.id.detail)
// AlertDialogを生成
android.app.AlertDialog.Builder(this)
// AlertDialogのタイトルを設定
.setTitle(R.string.addTitle)
// AlertDialogの表示項目を設定
.setView(view)
// AlertDialogのyesボタンを設定し、押下時の挙動を記述
.setPositiveButton(R.string.yes) { _: DialogInterface?, _: Int ->
// ToDoを生成
val data = Todo(txtTitle.text.toString(), txtDetail.text.toString())
// 表示するリストの最後尾に追加
addList.add(data)
// 表示するリストを更新(アイテムが挿入されたことを通知)
recyclerAdapter.notifyItemInserted(addList.size - 1)
}
// AlertDialogのnoボタンを設定
.setNegativeButton(R.string.no, null)
// AlertDialogを表示
.show()
}
// 表示しているアイテムがタッチされた時の設定
val itemTouchHelper = ItemTouchHelper(
object : ItemTouchHelper.SimpleCallback(
// アイテムをドラッグできる方向を指定
ItemTouchHelper.UP or ItemTouchHelper.DOWN or
ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT,
// アイテムをスワイプできる方向を指定
ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT
) {
// アイテムドラッグ時の挙動を設定
override fun onMove(
recyclerView: RecyclerView,
viewHolder: RecyclerView.ViewHolder,
target: RecyclerView.ViewHolder
): Boolean {
// アイテム位置の入れ替えを行う
val fromPos = viewHolder.adapterPosition
val toPos = target.adapterPosition
recyclerAdapter.notifyItemMoved(fromPos, toPos)
return true
}
// アイテムスワイプ時の挙動を設定
override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
// アイテムスワイプ時にAlertDialogを表示
android.app.AlertDialog.Builder(this@MainActivity)
// AlertDialogのタイトルを設定
.setTitle(R.string.removeTitle)
// AlertDialogのyesボタンを設定
.setPositiveButton(R.string.yes) { arg0: DialogInterface, _: Int ->
try {
// AlertDialogを非表示
arg0.dismiss()
// UIスレッドで実行
runOnUiThread {
// スワイプされたアイテムを削除
addList.removeAt(viewHolder.adapterPosition)
// 表示するリストを更新(アイテムが削除されたことを通知)
recyclerAdapter.notifyItemRemoved(viewHolder.adapterPosition)
}
} catch (ignored: Exception) {
}
}
.setNegativeButton(R.string.no) { _: DialogInterface, _: Int ->
// 表示するリストを更新(アイテムが変更されたことを通知)
recyclerAdapter.notifyDataSetChanged()
}
// AlertDialogを表示
.show()
}
})
// 表示しているアイテムがタッチされた時の設定をリストに適用
itemTouchHelper.attachToRecyclerView(recyclerView)
}
}
プロジェクトビルド&実行
①ヘッダーメニューよりBuild > Rebuild Projectを行いエラーが出ないことを確認して②実行
初期表示
ToDo追加
ToDo移動
ToDo削除
まとめ
今回はシンプルなアプリを作成してみました。アプリを立ち上げるたびにリセットされるため永続化を行う必要があったり、期日や優先度などToDoの内容を充実させ検索機能を追加したり、ログイン機能を追加したりとまだまだエンハンスしていく必要があります。
とはいえ自作アプリケーションの作成の一歩目の参考になれば幸いです。
次回、上記のエンハンス対応を行う予定です。