Jetpack Compose をさわってみた

専門学生時代はAndroid開発にすごくハマっていて、平日でも寝るのを忘れてコーディングするぐらい開発にのめり込んでいたのですが、
それももう5年ほど前で、社会人になってからは客先常駐で組み込みエンジニアとしてC言語で開発をやっています。

先日、ふと「あ、こういうアプリを作りたいな」と思い付き、
「よし、久しぶりにAndroidアプリを開発しよう」と思いAndroidStudioを立ち上げたのですが、

うん、なるほど。わからん。
さすがに5年も離れていると、いろいろと変わってるし、忘れてるし。

さて、どうしようか。と考えていたところJetpackComposeという文字を発見。

公式ドキュメントを見てみると、

Jetpack Compose は、ネイティブ UI をビルドする際に推奨される Android の最新ツールキットです。Android での UI 開発を簡素化し、加速します。少ないコード、パワフルなツール、直感的な Kotlin API を使用してアプリをすぐに動かすことができます。

ふむふむ、「どうせほぼ最初から勉強し直すなら新しいことをやってみるか」ということで、JetpackComposeを触ってみることにしました。

ということで、とりあえずチュートリアルをちょっと触ってみたので、自分が後で見返したりする用に書いてみようと思います。

アノテーション

@Composable

• Jetpack Compose は、コンポーズ可能な関数に基づいて構築される。
• コンポーズ可能な関数を使用すると、UI の外観とデータの依存関係を指定することにより、アプリの UI をプログラムで定義できる。
• コンポーズ可能な関数は、関数名に @Composable アノテーションを追加するだけで作成できる。

Compose UI ライブラリで定義されているコンポーズ可能な関数（Text, Image, Spacerなど）も使用できます。

@Preview

• Android Studio 内でコンポーズ可能な関数をプレビューできる。
• @Composableの前に@Previewアノテーションを追加する。

レイアウト

• Column関数で、要素を垂直方向に揃える。
• Row関数で、アイテムを水平方向に揃える。
• Box関数で、要素を積み重ねる。
• modifierパラメータで、sizeやpaddingを指定できる。

modifier

その名の通り、要素を修飾（paddingやsize, clickableなど）し、以下のようなことができる。

• コンポーザブルのサイズ、レイアウト、動作、外観を変更する
• ユーザー補助ラベルなどの情報を追加する
• ユーザー入力を処理する
• 要素をクリック可能、スクロール可能、ドラッグ可能、ズーム可能にするなど、高レベルの操作を追加する

詳しくは → Modifier

ないとき

MainActivity.kt

data class Message(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message){
    Row() {
        Image(
            painter = painterResource(id = R.drawable.icon),
            contentDescription = "Contact profile picture"
        )
        Column{
            Text(text = msg.author)
            Text(text = msg.body)
        }
    }
}

あるとき

MainActivity.kt

data class Message(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message){
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.icon),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                // Set image size to 50 dp
                .size(50.dp)
                // Clip image to be shaped as a circle
                .clip(CircleShape),
            // ContentScale to be scales the source uniformly
            contentScale = ContentScale.Crop
        )

        // Add a horizontal space between the image and the column
        Spacer(modifier = Modifier.width(8.dp))

        Column{
            Text(text = msg.author)
            // Add a vertical space between the author and message texts
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body)
        }
    }
}

マテリアルデザインを使用する

マテリアルデザインは、Googleが提唱したデザインのこと
→ Material Design

アプリのテーマで定義されているとおりにスタイルを継承し、アプリ内での一貫性を確保するために、プロジェクト内で作成されたマテリアル テーマ プロジェクト名Theme と Surface を使用して、MessageCard 関数をラップします。

MainActivity.kt

setContent {
    JetpackComposeTutorialTheme {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            MessageCard(msg = Message("Colleague", "Hey, take a look at Jetpack Compose, it's great!"))
    }
}

Color

Material Design 3 in Compose - Color scheme

MaterialTheme.colorsを使用して、ラップされたテーマの色でスタイルを設定する。

.kt

MaterialTheme.colorScheme.secondary

Typography

Material Design 3 in Compose - Typography

MaterialTheme.typographyを使用して、スタイルを設定する。

.kt

MaterialTheme.typography.titleLarge

Shape

Material Design 3 in Compose - Shapes

MaterialTheme.shapesを使用して、形状を設定する。

.kt

MaterialTheme.shapes.medium

ダークモードとライトモード

ダークモードとライトモードをプレビューで確認することが出来ます。

.kt

@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode"
)

実機で動かさなくても確認できるのはいいなと思いました。
それぞれで使用されるカラーは、ui.theme/Theme.kt, ui.theme/Color.ktで確認出来ます。

Now in Android

というサンプルアプリがあるみたいです。(GooglePlayストアでアプリが公開されています。)

GitHubのリポジトリより

Now in Android is a fully functional Android app built entirely with Kotlin and Jetpack Compose. It follows Android design and development best practices and is intended to be a useful reference for developers. As a running app, it's intended to help developers keep up-to-date with the world of Android development by providing regular news updates.

Now in Androidは、Androidの設計と開発のベストプラクティスに沿って、KotlinとJetpackComposeで作られていて、開発者にとって有用なリファレンスとなることを目的にしているそうです。

ドキュメントも

• アーキテクチャに関する architecture learning journey
• モジュール化に関する modularization learning journey

があり、デザイン事例 design case study もあるので、JetpackComposeの基本が分かったらNow in Androidで勉強してみようと思います。

感想

とりあえず、さらっと書いてみました。
Imageに

.kt

modifier = Modifier.size(50.dp).clip(CircleShape)

を付け足すだけで、よくアイコンとかで使う感じのが出来て、
ちょっと触ってみた感じ、確かにコード量も少なくなりそうだし、開発スピードも上がりそうな感じがします。

今後もJetpackComposeを使っていって、何かあれば追記か、別で記事書こうかなと思います。