みなさんこんにちは！この記事ではAndroid Jetpackに含まれるRoomとComposeを使ってTodoアプリを作りたいと思います。
【前編】（この記事）ではComposeでリスト表示をする部分を実装して、
【後編】ではRoomを使ってデータベースにデータを保存する部分を実装したいと思います。
今回作成したTodoアプリのソースコードはこちらにあります。（GitHub）
完成イメージ
Android Jetpackとは？
Android JetpackはAndroidアプリの開発を行うためのライブラリの集まりで、2018年のGoogle I/Oで発表されました。アプリ開発のためのコンポーネントやツール、ガイダンスが含まれており、下位互換性を持ちながら、Androidバージョンやデバイスに影響されることなく安定したクオリティのアプリを開発することができます。
Android JetpackはUI、Behavior、Foundation、Architectureの4つのカテゴリに分類されます。
開発環境
- Android Studio Chipmunk 2021.2.1
- Kotlin: 1.6.10
- Compose Version: 1.1.1
- Room Version: 2.4.2
- targetSDK: 31
実装手順
さっそく実装していきましょう！
1. プロジェクトを作成する
新しくプロジェクトを作成します。この時Empty Compose Activityを選択します。
アプリ名を入力してプロジェクトを作成します。
まずはRunして、下の画面のように「Hello World!」と表示されればOK！
2. Composeでリストを表示できるようにする
ためしにGreetingの引数のAndroidの文字列を適当な文字列に変えてRunをしてみよう。
文字が変わるはずです。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TodoAppTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Todo") // Androidを他の文字列に変えてみる
}
}
}
}
ここからリストを表示できるようにしていきます。
Greeting関数の下にMainScreenという関数を作って以下のようなコードを書きます。
@Composable
fun MainScreen(todolist: List<String>) {
LazyColumn(
modifier = Modifier.fillMaxSize()
) {
items(todolist) { todo ->
Text(todo)
}
}
}
onCreateでサンプルのリストを生成します。
GreetingからMainScreenに書き換えて、引数にリストを渡します。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TodoAppTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
val todoList = (1..100).map { "タスク ${it}" }
MainScreen(todoList)
}
}
}
}
Runするとリストが表示されるはずです。
MainScreenを書き換えて画面の構成を整えます。
Columnを使うと要素を縦に並べることができます。同じようにRowを使うと要素を横に並べることができます。
画面の上部にTopAppBarを使ってAppBarを表示します。画面の下部にはTextFieldとButtonを使ってTodoを入力するUIを作ります。
@Composable
fun MainScreen(todoList: List<String>) {
Column {
TopAppBar(
title = { Text("Todo List") }
)
LazyColumn(
modifier = Modifier.fillMaxWidth().weight(1f)
) {
items(todoList) { todo ->
Text(
text = todo,
modifier = Modifier.fillMaxWidth().padding(16.dp)
)
}
}
Row(
modifier = Modifier.fillMaxWidth().padding(16.dp)
) {
OutlinedTextField(
value = "",
onValueChange = {},
label = { Text("ToDo") },
modifier = Modifier.wrapContentHeight().weight(1f)
)
Spacer(Modifier.size(16.dp))
Button(
onClick = {},
modifier = Modifier.align(Alignment.CenterVertically)
) {
Text("ADD")
}
}
}
}
アプリを実行して下のような画面が表示されればOKです。
3. リストに動的に要素を追加できるようにする
ここからリストにタスクを追加できるようにしていきます。
MainScreenの中にtodoListとtextの2つの変数を作ります。この時MainScreenの引数は消します。
@Composable
fun MainScreen() {
var todoList: SnapshotStateList<String> by remember { mutableStateOf(mutableStateListOf()) }
var text: String by remember { mutableStateOf("") }
....
}
OutlinedTextFieldを下のように書き換えます。
) {
OutlinedTextField(
value = text,
onValueChange = { it -> text = it },
label = { Text("ToDo") },
modifier = Modifier.wrapContentHeight().weight(1f)
)
....
Buttonコンポーネントをしたのように書き換えます。
....
Button(
onClick = {
if (text.isEmpty()) return@Button
todoList.add(text)
text = ""
},
modifier = Modifier.align(Alignment.CenterVertically)
) {
Text("ADD")
}
onCreate内のMainScreeを呼び出している部分の引数も消します。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TodoAppTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
val todolist = (1..100).map { "タスク ${it}" }
MainScreen() // 引数を消す
}
}
}
}
アプリを実行してみましょう。
リストにタスクが追加できるようになっているはずです！
kotlinファイルだけでUIまで実装することができました！
次回はRoomを使ってデータの保存を実装します。
参考資料