https://d226lax1qjow5r.cloudfront.net/blog/blogposts/a-better-way-of-creating-android-views-with-jetpackcompose/andriod_jetpack-compose_1200x600.png

Igor Wojdaヴォネージの卒業生

JetPackComposeでAndroidビューを作成する優れた方法

最終更新日 June 3, 2021

所要時間：1 分

歴史について

ユーザーは、通常複数のViewで構成される様々な画面を介してモバイルアプリケーションとインタラクションします。開発者がこのようなユーザーとのインタラクションに対処する方法は、Androidプラットフォームの存続期間中に、複数のパターンを使用することで大きく変化しました。初期の頃、開発者はModel-View-Controllerパターンを使用しており、次にModel-View-Presenterパターン（またはModel-View-Intent）を使用していました。最後に、Googleが推奨するModel-View-ViewModelパターンに移行した。ビューマネージャー」は進化したが（Controller/Presenter/ViewModel）、「ビュー」の部分自体はそれほど変わっていない。最も大きな変化は、初期の頃のようにアクティビティではなく、フラグメントをUIのビルディングブロックとして使うようになったことだ。

この間、私たちは主にXMLを使ってアプリケーション・ビューのレイアウトを定義していました。もちろん、コードだけでビューを定義することもできますが、この方法には欠点があります。通常、アプリケーションにはコードで定義された複雑で動的なビューは少ないかもしれませんが、現在でもほとんどのアプリケーションのレイアウトはXMLファイルで定義されています。

そんな中、Kotin言語が登場し、カスタムKotln DSLを使ってビューを定義できるというクールな機能が追加された。この機能は興味深いコンセプトだったが、Android開発者コミュニティから十分な注目を集めることはなかった。問題はあったが、最大の問題は高度なユースケースをサポートしていないことと、Android Studioからの公式サポートがないことだった。

なぜJetPack Composeなのか

少し前、グーグルはアンドロイド・アプリケーションの開発方法を統一することを決定した。その一環として JetPackスイートの一部として、GoogleはAndroidアプリケーション作成の多くの側面を統一した。ナビゲーションから、データベースへのアクセス、バックグラウンドジョブなどなど。さらにGoogleは、開発者がベストプラクティスに従い、定型的なコードを削減できるよう、強固な基盤を提供した。このファミリーの一部として JetPack Compose- は、UIを扱う新しい方法だ。JetPack Composeは、KotlinとカスタムDSL言語を利用して、画面レイアウトの設定、テーマの定義、ビュー状態の管理、UIアニメーションの追加を行います。これらはすべて、ReactNative、Flutter、iOSアプリですでに広く普及している宣言的アプローチによって実現される。

JetPack Composeの実践

JetPack Composeの使い方と、このツールキットで何ができるかを簡単に説明します。まず、Android Studio Arctic Fox 2020.3.1（またはそれ以降）を使用する必要があります。次に、新しいAndroidプロジェクトを作成します（Select a Project Templateウィンドウで、Empty Compose Activityを選択し、Nextをクリックします）。

詳しい説明はこちら.

開く MainActivityアクティビティはコンポーネント・アクティビティ:

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

        // … view
    }
}

ビューの定義に XML ファイルを使用する代わりに、JetPack Compose DSL の主要な構成要素である setContentラムダ（Kotlinで定義されたカスタムメソッド）でビューを定義します：

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

        setContent {
            // … view
        }
    }
}

XMLタグを使用してビューを定義する代わりに、JetPack Composeが提供するカスタムレイアウトとビューを使用します：

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

        setContent {
            Column {
                Text("Alfred Sisley")
                Text("3 minutes ago")
              }
        }
    }

    @Preview
    @Composable
    fun SampleView() {
        
    }
}

上記のコードでは、「2つの行」を持つ1つのカラムが作成されます（各行には、テキストを含む1つのビューが含まれます）。

A preview of outputting text on multiple lines in a single view

プレビューを生成する方法については、しばらくしてから学ぶことにしよう。

各コンポーネントは、より複雑なビューを簡単に作成できるように、ビュー階層を定義することができます。私たちのビューコードは、Composable アノテーションでアノテーションされたメソッドを作成することで、Comosable "コンポーネント" に抽出することができます：

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

        setContent {
            SampleView()
        }
    }

    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

これらのメソッドはアノテーションアノテーションでアノテーションされた)これらのメソッドは、Applications UIの基本的なビルディング・ブロックを提供します。Android Studioでプレビューを見るには、メソッドにPreviewアノテーションを付けてアプリをビルドします：

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

        setContent {
            SampleView()
        }
    }

    @Preview
    @Composable
    fun SampleView () {
        Column {
            Text("Apple Juice")
            Text("100 ml")
        }
    }
}

A preview of outputting text on multiple lines in a single view

個々の項目のプロパティに変更を加えることもできます。テキストの各行の背景色を変更してみましょう：

@Preview
@Composable
fun SampleView() {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text("Apple Juice")
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("100 ml")
        }
    }
}

A preview of outputting text on multiple lines in a single view

また、これらのビューにパラメーターを追加して、ジュースの名前やボリュームをダイナミックにすることもできる：

@Composable
fun SampleView(name: String, volume: Int) {
    Column {
        Box(
            Modifier.background(Color.Green)
        ) {
            Text(name)
        }
        Box(
            Modifier.background(Color.Blue)
        ) {
            Text("$volume ml")
        }
    }
}

残念ながら、パラメータ化されたビューはプレビューできないので、別のビューを作成してプレビューを有効にする必要があります。そこで SampleViewPreviewはプレビューアノテーションを持ち、以前に定義された SampleView:

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

        setContent {
            SampleViewPreview()
        }
    }

    @Preview
    @Composable
    fun SampleViewPreview() {
        SampleView("Orange Juice", 50)
    }

    @Composable
    fun SampleView(name: String, volume: Int) {
        Column {
            Box(
                Modifier.background(Color.Green)
            ) {
                Text(name)
            }
            Box(
                Modifier.background(Color.Blue)
            ) {
                Text("$volume ml")
            }
        }
    }
}

JetPack Composeはすべてコンポジションなので、SampleViewの複数のインスタンスを簡単に使用することができます：

@Preview
@Composable
fun SampleViewPreview() {
    Column {
        SampleView("Orange Juice", 50)
        SampleView("Mango Juice", 100)
    }
}

A preview of outputting text on multiple lines in a single view with various colours

概要

JetPack Composeは使いやすく、大きな可能性を秘めています。モダンで、インタラクティブで、ダイナミックなUIを構築できる。アプリのデスクトップUIを構築するのにも使える（まだアルファ版だが）。唯一の欠点は、JetPack Composeがまだ安定していない（2021年6月現在）ことだが、これはすぐに変わり、Android UIの新しい標準になる可能性が高い。JetPack Composeを学ぶには、ちょっとしたマインドシフトが必要だが、UIがますますダイナミックになる中、このステートドライブアプローチは、すべての開発者の生活を楽にするだろう。

リンク

Igor Wojdaヴォネージの卒業生

シェア:

JetPackComposeでAndroidビューを作成する優れた方法

歴史について

なぜJetPack Composeなのか

JetPack Composeの実践

概要

シェア: