カテゴリー:
Compose を用いた Android アプリ開発の基礎 / ユニット 1: 初めての Android アプリ
閲覧数:12 配信日:2024-10-14 19:19
Jetpack Compose は、Android UI を構築するための最新のツールキットです。
Compose は、簡潔なコード、パワフルなツール、直感的な Kotlin 機能を使用して Android での UI の開発を簡素化し、加速します。
Compose では、データを受け取って UI 要素を記述するコンポーズ可能な関数と呼ばれる一連の関数を定義することで、UI を構築できます。
コンポーズ可能な関数
コンポーズ可能な関数は、Compose の UI の基本的なビルディング ブロックです。
コンポーズ可能な関数の機能は以下のとおりです。
・UI の一部を記述します。
・何も返しません。
・入力を受け取り、画面に表示されるものを生成します。
アノテーション
アノテーションは、コードに追加情報を付加する方法です。
この情報は、Jetpack Compose コンパイラのようなツールや、他のデベロッパーがアプリのコードを理解する際に役立つものです。
アノテーションを付けるには、アノテーションを付ける宣言の先頭にある名前(アノテーション)の前に @ 文字を追加します。
アノテーションは、プロパティ、関数、クラスなど、さまざまなコード要素に付けることができます。
次のコード スニペットは、アノテーション付きのプロパティの例を示しています。
// Example code, do not copy it over
@Json
val imgSrcUrl: String
@Volatile
private var INSTANCE: AppDatabase? = null
パラメータ付きアノテーション
アノテーションはパラメータを受け入れることができます。
パラメータは、それらを処理するツールに追加情報を提供します。
コンポーズ可能な関数の例
コンポーズ可能な関数には、@Composable アノテーションが付けられています。
コンポーズ可能な関数はすべて、このアノテーションが必要です。
このアノテーションは、この関数がデータを UI に変換するためのものであることを Compose コンパイラに伝えます。
なお、コンパイラとは、記述したコードを 1 行ずつ読み、コンピュータが理解できる内容(機械語)に変換する特殊なプログラムです。
このコード スニペットは、シンプルなコンポーズ可能な関数の例です。
渡されるデータ(name 関数パラメータ)を使用して、画面上にテキスト要素をレンダリングしています。
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
コンポーズ可能な関数には以下の特徴があります。
・Jetpack Compose は、コンポーズ可能な関数に基づいて構築されています。コンポーズ可能な関数を使用すると、UI の外観を指定することにより、アプリの UI をプログラムで定義できます。UI の構築プロセスに注意を払う必要はありません。関数名に @Composable アノテーションを追加するだけでコンポーズ可能な関数を作成できます。
・コンポーズ可能な関数は、アプリのロジックで UI の記述や変更を行えるようにする引数を受け入れることができます。今回の例では、UI 要素で String を受け入れることで、名前を入れてユーザーにメッセージを表示できます。
コード内でのコンポーズ可能な関数について
1.Android Studio で MainActivity.kt ファイルを開きます。
2.GreetingPreview() 関数までスクロールします。このコンポーズ可能な関数は、Greeting() 関数をプレビューするのに役立ちます。関数には、その機能を説明する名前を付けるか、そのような名前に変更することをおすすめします。この関数の名前を BirthdayCardPreview() に変更します。
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
HappyBirthdayTheme {
Greeting("Android")
}
}
コンポーズ可能な関数は、他のコンポーズ可能な関数を呼び出すことができます。
上記のコード スニペットでは、Preview 関数でコンポーズ可能な関数 Greeting() を呼び出しています。
なお、元の関数には、@Composable アノテーションの前にパラメータが付いた別のアノテーション @Preview もありました。
コンポーズ可能な関数の名前
Compose 関数が何も返さず、@Composable アノテーションが付いている場合は、パスカルケースを使用して名前を付ける必要があります。
パスカルケースとは、複合語内の各単語の最初の文字が大文字になる命名規則を指します。
パスカルケースとキャメルケースの違いは、パスカルケースでは、すべての単語の最初の文字が大文字になることです。
キャメルケースでは、最初の文字は、単語の他の文字が小文字であれば大文字、大文字であれば小文字になります。
Compose 関数:
・必ず名詞にしてください: DoneButton()
・動詞または動詞句にしないでください: DrawTextField()
・名詞の前置詞にしないでください: TextFieldWithLink()
・形容詞にしないでください: Bright()
・副詞にしないでください: Outside()
・名詞の前に記述形容詞を付けることができます: RoundIcon()
詳しくは、コンポーズ可能な関数の命名をご覧ください