📝

Android Basic with ComposeのUnit1で学んだことをまとめてみる - Compose

2024/10/12に公開

Android

初心者

Jetpack Compose

tech

はじめに

こんにちは、某SIerでSEをやっているnekorush14です。
この記事は絶賛再*n入門しているAndroid開発について、Google公式のLearning Courseを通して学んだことをアウトプットするシリーズです。

Jetpack Composeに関するCourseのUnit1で得た知見を話します。

Unit1: Your first Android app

このユニットでは、シンプルなアプリケーションの実装を通して以下の内容を習得します。

基礎的なKotlinの記法
Android Studioのインストール方法
テキストと画像のみのシンプルなUIを持つアプリケーションの作成方法
Android Emulatorを用いたアプリケーションの実行方法

私は(昔ですが)Kotlinに触れたことがあるので、基礎的なKotlinの記法についてはざっと読み流しました。
一般的な文法(変数宣言、関数、引数、標準出力)の解説と演習問題で構成されていました。

Android Studioについても、以前に触れたことがあったので読み流しました。

今回はUnit1で扱われたComposeについてまとめてみます。

Compose

Jetpack ComposeはAndroidのモダンなUI開発ツールキットです。Androidのレイアウトを定義する新たな方法で、宣言的UIの考え方によりKotlinでUIを定義できます。

Jetpack ComposeではUIを定義するさい、関数にアノテーション@Composableを付与します。
この@Composableを付与した関数をComposable関数とよび、様々なComposable関数を組み合わせることで宣言的にUIを構築します。

Composable関数の例

@Composable
fun SummarizeButton() {
    // ...
}

Jetpack Composeのアノテーションには引数を取るものもあります。
例えばAndroid Studio上でUIのプレビューを表示する@Previewです。
@Previewには多くの引数が存在しますが、ここで取り上げられていたのはプレビューに背景を描画するbooleanであるshowBackgroundです。
以下のようにすることでComposable関数のプレビュー表示時に背景も描画されるようになります。

背景付きプレビューの例

@Preview(showBackground = true)
fun SummarizeButtonPreview() {
    // ...
}

Composable関数の名称はパスカルケースである必要があり、命名規則には以下のようなルールがあります。

名詞である必要がある: DoneButton()
名詞付きの前置詞はNG: TextFieldWithLink()
名詞の前に説明をする形容詞が付く場合あり: RoundIcon()

命名に関する詳細な事項は以下に掲載されています。

Layout

UIの構造は親子関係でネストさせていくことができます。
Jetpack Composeでは基本レイアウト構造としてBox、Column、Rowの3つがあります。

Boxは指定したComposableを重ねて描画するレイアウトです。
例えば、画像にテキストを重ねるといった使い方ができます。

Boxレイアウトの例

Box(modifier) {
    Image(
        painter = image,
        contentDescription = null,
    )
    Text(
        text = R.string.sampleText,
    )
}

Columnは要素を垂直方向に並べるレイアウトです。
例えば複数のテキストや画像を縦に並べて表示するといった使い方ができます。

Columnレイアウトの例

Column(modifier) {
    Text(
        text = R.string.sampleText,
    )
    Text(
        text = R.string.anotherSampleText,
    )
}

Rowは要素を水平方向に並べるレイアウトです。
例えばアイコンとテキストを水平方向に並べて表示するといった使い方ができます。

Rowレイアウトの例

Row(modifier) {
    Icon(
        imageVector = Icons.Filled.AccountCircle,
        contentDescription = null,
    )
    Text(
        text = R.string.userName,
    )
}

まとめ

今回はUnit1で扱われたComposeについてまとめてみました。
Unit1ということもあり、Jetpack Composeの基礎(と思っている)Composableについて丁寧に説明されていた印象でした。

また、ComposeについてはAndroidViewでConstraintLayoutに頭を抱えていた頃より随分書きやすくなっていた印象でした。
宣言的にUIが定義できるのは良きです。
(~~UI定義でXMLを書かないのも良きです。~~)

次回も引き続きUnit1の内容ですが、画像を扱うDrawableと画像や文字列などのResourceについてまとめます。