💻

Jetpack Compose入門(1)

2023/09/24に公開

Android

Kotlin

Jetpack Compose

tech

はじめに

こんにちは。
ご覧頂きありがとうございます。
本職は Web ですが、最近 Android アプリ開発の勉強も始めました。
技術カンファレンスへ出席する中で Jetpack Compose という単語をよく耳にしてきましたが、
自分でもどういったものなのか理解できてなかったので、
今回勉強したみたいと思い、その過程を記事にしてみることにしました。

環境

OS:macOS Ventura バージョン 13.5.2
Android Studio Giraffe

Jetpack Compose とは

サイトにはこのように書かれています。

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

自分は、以下のような形だと解釈しました。
Android で UI を開発する際は、
これまで、XML レイアウトを編集したり、LayoutEditor を使用したりしていたが、
コンポーズ可能な関数(UI の一部を記述し、出力する関数)を利用して、簡単に要素を定義できる。

自分も以前、Android アプリの学習をした際に、XML を編集したりしていました。
それが、コードで完結できるようになるみたいです。

チュートリアル実施

公式のチュートリアルをやってみることにしました。

コンポーズ可能な関数

Android Studio で[ComposeTutorial]という新規プロジェクトを作成します

新規プロジェクト作成画面

!

チュートリアル上では、
[Empty Compose Activity]テンプレートを使う旨記載ありますが、
Android Studio Flamingo よりテンプレートが変わったらしく、
Flamingo 以降は、[Empty Activity]で作成をすれば良いようです。
https://developer.android.com/studio/releases/past-releases/as-flamingo-release-notes?hl=ja#updates-to-npw-nmw
プロジェクトが作成されたら、チュートリアルに沿って[onCreate]内に処理を記述していきます
ここで記述される[Text]はコンポーズ可能な関数といいます
コンポーズ可能な関数は他にも、[Image, RadioButton]などがあるようです
[Row]といって要素を縦に並べる関数もあります
例えが合ってるかわかりませんが、HTML タグのようなものでしょうか

ちなみに今回記述した[Text]は画面上にテキストラベルを配置する関数です
MainActivity.kt
```
 package com.example.composetutorial

 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.material3.Text

 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             Text("Hello world!")
         }
     }
 }
```
画面

コンポーズ可能な関数を作成する
コンポーズ可能な関数は、[@Composable]アノテーションをつけることで定義することができます
こうすることで関数の再利用性を高めることができるようになると思います

MainActivity.kt

 package com.example.composetutorial

 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable

 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             // コンポーズ可能な関数を呼び出し
             MessageCard("Android")
         }
     }
 }

 // コンポーズ可能な関数を定義
 @Composable
 fun MessageCard(name: String) {
     Text(text = "Hello $name!")
 }

画面

プレビューの利用
コンポーズ可能な関数をチェックするにはアプリをビルドして、エミュレータ、実機で確認する必要がありました
[@Preview]アノテーションを利用すると、ビルドしなくても、
コンポーズ可能な関数をプレビュー画面で確認することができます
(ビルドに時間がかかっている場合とか便利そうですね)
MainActivity.kt
```
// プレビューを定義
@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}
```
プレビュー画面

プレビュー画面が表示されましたが、
自分の Android Studio がダークテーマの為、見えずらいですね…
チュートリアルとは少し外れますが、バックグランドのカラーを指定して、みやすくしてみました。
MainActivity.kt
```
// コンポーズ可能な関数を定義
 @Composable
 fun MessageCard(name: String) {
     Text(text = "Hello $name!",
         // 背景色を指定する
         modifier = Modifier.background(
             color = Color(0xffffffff)
         )
     )
 }
```
背景色指定後のプレビュー画面

当たり前ですが、プレビュー関数内で記載された引数等は、プレビューでのみ利用されます
下記の例では、プレビュー関数に、["Android dddd"]を、onCreate には、["Android"]を渡しています

プレビュー画面とエミュレータ画面

ここまでのソースコード

MainActivity.kt

  package com.example.composetutorial

  import android.os.Bundle
  import androidx.activity.ComponentActivity
  import androidx.activity.compose.setContent
  import androidx.compose.foundation.background
  import androidx.compose.material3.Text
  import androidx.compose.runtime.Composable
  import androidx.compose.ui.Modifier
  import androidx.compose.ui.graphics.Color
  import androidx.compose.ui.tooling.preview.Preview

  class MainActivity : ComponentActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContent {
              // コンポーズ可能な関数を呼び出し
              MessageCard("Android")
          }
      }
  }

  // コンポーズ可能な関数を定義
  @Composable
  fun MessageCard(name: String) {
      Text(text = "Hello $name!",
          // 背景色を指定する
          modifier = Modifier.background(
              color = Color(0xffffffff)
          )
      )
  }

  @Preview
  @Composable
  fun PreviewMessageCard() {
      MessageCard("Android")
  }

まとめ

今回は、コンポーズ可能な関数について学習しました。
Android 自体学習は久々だったのですが、公式ガイドもわかりやすく勉強しやすかったです。
(若干、最新のバージョンじゃない部分とかはあったりはしますが…)
また、Jetpack Compose 自体もまだ触りしかやってないですが、
かなりとっつきやすいものかなと言った印象を受けました。
次回以降も引き続きチュートリアルをやっていきたいと思います。

参考サイトまとめ

実際のソースコード(GitHub)

チュートリアルが進むにつれ、随時更新していきます