Jetpack Compose入門・基本編は今回で終了です。今回は基本編を振り返ります。
「基本編の目標」 では、以下の目標を立てていました。
- 画面内の任意の位置にUIコンポーネントを配置する
- UIの階層構造を定義する
- UIコンポーネントの大きさや色など、簡単な見た目のカスタマイズを行う
- ボタン押下やテキスト入力イベントを検出し画面を更新する
これらの目標は達成できたでしょうか。
基本編で学んだこと
「文字列を表示する」 では、Textコンポーネントを使って文字列を表示する方法を学びました。合わせて、Jetpack Composeで多用されるKotlinの記述方法についても学びました。名前付き引数の使い方とデフォルト値の定義についても確認しました。文字列の色やサイズなどの変更方法も確認しました。
「コンポーネントを装飾する」では、Modifierの使い方について学びました。modifier引数を使ってコンポーネントの見た目を変更できることを確認し、背景や枠線、サイズや位置の設定例を確認しました。
「画像を表示する」では、Imageコンポーネントを使って画像を表示する方法を学びました。画像の拡大縮小を制御するcontentScaleについても効果を確認しました。
「コンポーネントを配置する」では、ColumnやRowを使ってコンポーネントを縦横に並べたり、Boxを使ってコンポーネントを任意の位置に配置する方法を学びました。Arrangementを指定して配置や間隔を調整したり、Modifier.weight()でサイズ比率を調整したり、Alignmentで位置を揃えたりする方法も確認しました。レイアウトコンポーネントを入れ子にして複雑な配置を実現する方法も確認しました。
「ボタンクリックでUIを更新する」では、Buttonコンポーネントを使ってボタンを表示する方法、ボタンクリックイベントを取得する方法、イベント発生時に表示を更新する方法を学び、動的なUIを作れるようになりました。状態を記憶するためのMutableState変数をby rememberで定義する方法も学びました。さらに、変数の監視とUIの再構築の仕組みについても学び、宣言型UIで動的に表示を更新する仕組みについても理解しました。
「TextFieldで文字入力欄を作る」では、TextFieldコンポーネントとOutlinedTextFieldコンポーネントを使って文字入力欄を実現する方法を学びました。文字入力欄も、rememberで定義した変数の監視とUI再構築の組み合わせで実現していることを確認しました。TextFieldの説明やプレースフォルダーの表示方法も確認しました。
「UIの階層化と制御構文」では、コンポーザブル関数のネストによるUI階層の実現方法を学び、複雑なUIもシンプルに書けることを理解しました。コンポーザブル関数の引数を使って、親階層から子階層へ状態を渡したり、反対に子階層から親階層にイベントを返したりする方法を確認しました。また、if文を使ってUIの表示・非表示を切り替えたり、for文を使って同じ構造のUIの繰り返しを簡潔に書いたりする方法も確認しました。
基本編で扱ったコンポーネント
基本編では、Text、Image、Button、TextFieldの4つのコンポーネントの使い方を学びました。また、レイアウトコンポーネントとして、Column、Row、Boxの使い方も学びました。
まとめ
基本編では、4種類の基本的なコンポーネントを、自由に配置することができるようになりました。UIを階層化し、複雑な構造の画面も作成できるようになりました。配置を変更するだけでなく、色や大きさなど見た目のカスタマイズもできるようになりました。ボタンクリックイベントや文字入力を検出して画面を更新することもできるようになりました。基本編を通して読んでいただければ、初めに立てた4つの目標は達成できたと思います。
さて、実際のアプリでは、もっといろいろなコンポーネントを駆使することになります。画面遷移も必要になるでしょう。データも複雑なのでViewModelやModelとの連携も必要で、画面更新トリガーはユーザーの操作だけとは限りません。リスト表示もよく使われますが、基本編では紹介しませんでした。こういった内容については、今後の実践編で扱っていきたいと思います。
Jetpack Compose入門
