Loading
BLOG 開発者ブログ

2020年12月15日

Jetpack Composeでレイアウト作成の基本



Androidの新しいUI作成ツールJetpack Composeを触ってみたので、基本的な使い方、使い勝手について書いて行こうと思います。
まだアルファ版なので、どのくらい実用性がありそうなのか確認するためにも、まずは基本的なレイアウト作成についてまとめていきます。

はじめに

こんにちは。
モバイルソリューショングループのkatsu.rです。

この記事は アイソルート Advent Calendar 2020 15日目の記事です。




Jetpack Composeとは

Jetpack Compose は、Android のネイティブ UI を構築するための最新のツールキットです。Jetpack Compose は、少ないコード、パワフルなツール、直感的な Kotlin API を使用して Android での UI の開発を簡素化し、加速します。

引用:https://developer.android.com/jetpack/compose/tutorial




準備

それでは、ここからJetpack Composeを使用する方法について書いていきます。

冒頭でも書きましたがJetpack Composeはアルファ版となります。

今回は以下の環境で動作を確認しました。
・Android Studio 4.2 Beta1
・Jetpack Compose1.0.0-alpha07

いずれもバージョンアップなどで変更が入る可能性が十分に想定されますのでご注意ください。

Jetpack Compose使用するために、まず以下のリンク先にしたがって、build.gradleの設定等をしておく必要があります。
https://developer.android.com/jetpack/compose/setup



※Android Studio内でJetpack Composeを使用して作成したレイアウトのプレビューを確認する方法については
今回は割愛するので以下をご参考ください。
https://developer.android.com/jetpack/compose/preview




基本的な使い方

準備が整ったら、さっそくレイアウトを作成していきます。


テキスト

画面にテキストを表示させる方法です。
「Hello World!」というテキストを表示するコンポーザブルな関数を作成し、Text()で画面に指定したテキストを表示することができます。



引数の渡し方

コンポーザブルな関数に引数を渡して動的にテキストを表示する方法です。
引数によって指定された文字列を「Hello XXX!」と表示したい場合は、以下のようにすれば実装が可能です。




レイアウト

複数のViewを縦に並べたり横に並べたりしたいときの方法です。
Column()を使うと、各Viewを縦に並べることができます。
※Rowメソッドを使うと横並びのレイアウトになります。



スタイル

レイアウトに余白や表示領域など、スタイルを設定する方法です。
以下では、Columnのレイアウトを横幅いっぱい表示、内側の余白16dpを設定しました。

また、horizontalAlignmentを設定することで、水平方向の位置を指定できます。
今回は要素のViewが画面の真ん中に表示されるように設定しました。
※垂直方向の設定は、verticalArrangementで可能です。



画像

画像を表示する方法です。
以下のようにImage()を使用して画像の表示が可能です。
また、先ほどと同様にModifierでスタイルを設定したり、角丸の設定も簡単にできます。



リスト

リストの表示方法です。(個人的にここが一番今までと比較して簡単に実装できてよかったです!)

まず、セル用のコンポーザブルな関数を作成します。
今回は固定の画像と名前のテキストを表示するようにしています。


次に、リスト用のコンポーザブルな関数を作成します。
先ほど作成したセル用の関数を、ScrollableColumnを使用して繰り返し表示します。
ScrollableColumn()を使用すると、スクロール可能なレイアウトが作成できます。
※Dividerは区切り線です。


最後に、表示したいリストを作成してリスト用の関数を以下のように呼び出してあげると
リスト表示が可能です。



今までリストを作成するときは、リストのレイアウト、セルのレイアウト、Adapterクラスを作成していましたが、
Jetpack Composeを使うとこれだけのコード量で実現できてしまうのは驚きですね!

クリックイベント

Viewにクリックイベントを追加する方法です。
先ほどのリストのセル用関数の引数にクリックイベントを追加します。

今回はクリック可能領域をセル全体にするため、まずはColumnのModifierにクリックイベントを付与します。
(ImageやText単体にクリックイベントを付与することも可能です。)


次に、リスト用の関数にも引数にクリックイベントを追加します。


最後に、呼び出し元でセルタップ時の実装を作成し、引数に設定してあげればクリックイベントの設定は完了です。
今回はタップしたセルの名前をトーストで表示ようにしました。
※もちろん、コンポーザブルな関数内でタップ時の実装を作成するのも可能です。



まとめ

今までのxmlファイルでレイアウトを作成する時と比べ、コード量はかなり削減しました!
書き方に慣れる時間は必要ですが、慣れてしまえばレイアウト作成の時間は短縮できそうです。
また、View操作時の実装をする時にxmlファイルとktファイルなどファイル間の行き来が減るのも個人的には使いやすいと感じました!
複雑なレイアウトを作成する際は、コンポーザブルな関数を別ファイルに書き出して整理したりは必要になると思いますが、
よく使うViewの使いまわしもより簡単に実現できそうなのも良い点かなと思います。

今回は紹介していませんが、コンポーザブルな関数内でViewModelなどの状態が変化する値の監視についても可能になります。
こちらをうまく利用すれば、APIで取得した値を動的に画面表示なども簡単に実現可能です。
https://developer.android.com/jetpack/compose/state?hl=ja#use-other-types-of-state-in-jetpack-compose

明日は kikuchi.s さんの 【アジャイル】設計書に時間をかけたくない人のための話 です。