
今回から、Jetpack Compose入門・基本編になります。基本編では次の4つをできるようになることが目標です。
- 画面内の任意の位置にUIコンポーネントを配置する
- UIの階層構造を定義する
- UIコンポーネントの大きさや色など、簡単な見た目のカスタマイズを行う
- ボタン押下やテキスト入力イベントを検出し画面を更新する
この4つができるようになれば、何か情報を表示し、ユーザー操作によって表示を更新する、というアプリの基本的な動作を実現できることになります。
また、基本編では次の4つのUIコンポーネントを使います。
- Text
- Image
- Button
- TextField

Textは文字列を表示するコンポーネントで、従来のViewシステムのTextViewに相当します。Imageは画像を表示するコンポーネントで、ImageViewに相当します。Buttonはその名の通りボタンのコンポーネントで、ViewシステムでもButtonというコンポーネントがありました。名前は同じですが、Jetpack ComponentのButtonとViewのサブクラスのButtonは全く別のものです。TextFieldは編集可能な文字列を表示するコンポーネントで、EditTextに相当します。
これらの4つのUIコンポーネントを画面内に配置し、イベントを受け取って表示を更新する一連の処理を実現して、簡単なアプリ作成の取っ掛かりがつかむことが基本編の目標です。