Android 基礎 -- Part 03 コンテナのコンポーネントと入力欄のコンポーネントを作って main から呼び出して表示する

NoteApp というファイルと関数を作り、At Composable アノテーションをつける

com.example.helloJetpack には

ui / theme /

と

MainActivity.kt

これらがある。

ここに並列で NoteApp というファイルと、同名の関数を中に作る。

そして関数の上に At Composable のアノテーションをつける。

package com.example.hellojetpack

import androidx.compose.runtime.Composable

@Composable
fun NoteApp() {
    Text(text = "NoteApp")
}

Spring では At Compose というアノテーションがあった。
At Compose はアプリの起動時に自動でインスタンスを作成して
呼び出し側が楽に使うための機能だった。

似たように、At Composable も呼出側が楽に使うためのアノテーションだと解釈した。

仮にテキストを入れてみる。

Andorid の compose では div や h2 が使えず、
Text などの MUI っぽいものを使うと解釈している。

NoteApp を MainActivity の setContent で呼び出す

MainActivity の setContent で呼ばれた UI の Composable が
アプリケーションで描画されると解釈する。

なので先ほど作った中身のない NoteApp を setContent で呼び出す。

まずは既存の HelloJetpackTheme で包まれて呼び出されていた
Surface と Greeting の呼び出しを削除

すると、画面は真っ白になった。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NoteApp()
        }
    }
}

NoteApp を呼び出すと、Text に渡したテキストが表示できた。

これで Composable として外部ファイルで書いた UI を
MainActivity の setContent で呼び出すことができた。

編集画面のパッケージと 入力用の EditScreen という Composable を作る

https://www.youtube.com/watch?v=WVMjHAN1JA0&list=PLgAI_5b_7BdRaBPAD5RMrzjoSwefDXpkw&index=3

screen / edit / というパッケージを作成。

UI ごとにパッケージを作っていくようだ

React や AngularDart で アトミックデザインをするときの
compose / 配下と似たような感じだろうか？

EditNoteScreen という名前でまた Composable を作る。

@Composable
fun EditScreen() {
    TextField(value = "", onValueChange = {})
}

フォームの入力欄として、TextField を描画する。
value と onChange には空の値と関数をわたしておく。

@Composable
fun NoteApp() {
    Text(text = "NoteApp")
    EditScreen()
}

これで setContent から呼び出されている NoteApp から呼び出すと

フォームが表示された！！！

しかし、HTML の input と違ってこれだけでは入力すらできない。

TextField の枠やラベルをつける

Andorid Compose には CSS はない。
MUI と同じく、呼び出すコンポーネントや渡す引数で変えるようだ

https://developer.android.com/jetpack/compose/text

    OutlinedTextField(
        value = "", onValueChange = {},
        label = { Text("入力欄")}
    )

テキストフィールドは、ラベルをつけたりアウトラインにできるようだ。

TextField の長さや余白を変える

https://developer.android.com/jetpack/compose/modifiers

compose では、マージンやパディングをつけるときや、width を変える時には
Modifier を使って変えるようだ。

@Composable
fun EditScreen() {
    OutlinedTextField(
        value = "", onValueChange = {},
        label = { Text("入力欄")},
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    )
}

fillMaxWidth で width = auto のようにして
padding でパディングをつけた。
px より dp が主流らしい。詳細はまだ調べてない。

ステートを作って TextField を入力可能にする

https://www.youtube.com/watch?v=QwRG9v_k5T4&list=PLgAI_5b_7BdRaBPAD5RMrzjoSwefDXpkw&index=4

@Composable
fun EditScreen() {
    var body by remember { mutableStateOf("") }
    OutlinedTextField(
        value = body, onValueChange = { body = it},
    )
}

remember を使って mutable な state である body を作成し
TextField の初期値と変更後の値に設定した。

これでキーボードからの入力を受け付けるようになった！