【書籍特別編】Jetpack Compose 開発シリーズ | 第２回 アプリ画面の作成

💡 今回の内容
テキスト・画像・ボタンが並ぶアプリ画面を作ります。

📚 このシリーズについて
本シリーズでは、書籍『いきなりプログラミング Android アプリ開発』の第１章のアプリを Jetpack Compose で開発していく手順を紹介します。

📎 メニュー
✅ 第0回：イントロダクション
✅ 第1回：プロジェクトの用意と Jetpack Compose の概要
➡️ 第2回：アプリ画面を作ってみよう
⬜ 第3回：ボタンをタップできるようにしよう

どのような画面を作る？

📘 参考：p.12〜（書籍はこちら）

このアプリで必要になるのは「テキスト・画像・ボタン」３つです。これらが縦一列に並ぶアプリ画面を作っていきましょう。

コンポーザブル関数の用意

1. コンポーザブル関数の作成

まずはアプリ画面のコンポーザブル関数を追加します。

21行目あたりに comp と入力して Enter キーを押します。

雛形が入力されたら AppScreen という名前で関数を作成します。

class MainActivity : ComponentActivity() {
    // 省略
}

@Composable
fun AppScreen() {
    
}

アプリ画面が複雑になっていくと、複数のコンポーザブル関数を組み合わせながらアプリを開発していきます。

今回開発するアプリはとてもシンプルな見た目なので、この AppScreen コンポーザブル関数に全てのコードを書いていきます。

2. プレビュー用関数の作成

次に画面右側に表示されるプレビュー用のコンポーザブル関数を作成します。

プレビュー用のコンポーザブル関数の名前は プレビュー表示する関数名 + Preview とするのが一般的です。

ここでは AppScreen 関数のプレビューを表示するので、名前は AppScreenPreview にしましょう。

28行目あたりに prev と入力すると入力候補が出てくるので Enter キーを押します。

雛形が入力されたら、関数名に AppScreenPreview と入力します。プレビューが表示されるように AppScreen 関数を呼び出しておきましょう。

@Composable
fun AppScreen() {
    
}

@Preview
@Composable
private fun AppScreenPreview() {
    AppScreen()
}

まだ AppScreen 関数にコードを書いていないので、プレビューには何も表示されません。

このあとテキストを追加してから表示を確認します。

アプリ画面の作成

1. テキスト

📘 参考：p.38〜（書籍はこちら）

まずはメッセージを表示するコードを書いていきましょう。

書籍では、activity_main.xml ファイルに TextView タグを使ってメッセージを表示しました。

<TextView
    android:id="@+id/messageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/message"
    android:textSize="18sp" />

Jetpack Compose には activity_main.xml が存在しないので、MainActivity.kt にコードを書いていきます。

とても少ないコードで書くことができるので、さっそく書いてみましょう！

Text コンポーザブル関数

AppScreen 関数内に３〜６行目のコードを追加します。

@Composable
fun AppScreen() {
    Text(
        text = stringResource(R.string.message),
        fontSize = 18.sp
    )
}

テキストを表示するために使うのが Text コンポーザブル関数です。

コードの Text 部分にカーソルを合わせると Text コンポーザブル関数の詳細が表示されるので確認してみましょう。

text, modifier, color… など色々書いてありますが、これらをパラメータと言って、テキストに関する設定を書くために使います。

Text コンポーザブル関数の場合、必ず書かなければならないのは text パラメータだけで、それ以外はオプションです。

ここでは文字サイズを指定する fontSize パラメータも書きました。XML では、文字サイズは 18sp と書いていましたが、Jetpack Compose では 18.sp となることに注意です。

プレビューの確認

どのような画面になっているかプレビューを確認してみましょう。

画面右上の [Split] ボタンをクリック→ Build & Refresh… をクリックします。

テキストと背景が同じ色で見にくいので、プレビューの設定を変更します。

34 行目あたり @Preview アノテーションの後ろにコードを追加します。

@Preview(showBackground = true)
@Composable
private fun AppScreenPreview() {
    AppScreen()
}

背景色が白くなって文字が読みやすくなりましたね。ここでは背景色の表示を設定する showBackground の値を true にして有効化しています。

2. 画像

📘 参考：p.40〜（書籍はこちら）

次は画像を追加しましょう。

Text() の下に Image と入力すると候補が出てくるので、Image(painter: Painter… を選択します。

７〜９行目のコードを追加します。

@Composable
fun AppScreen() {
    Text(
        // 省略
    )
    Image(
        painter = painterResource(R.drawable.f0),
        contentDescription = null,
        modifier = Modifier.size(200.dp)
    )
}

painter パラメータで、drawable フォルダに置いた画像を表示しています。

contentDescription パラメータは書籍 p.41 で書いたものと同じです。

Jetpack Compose でとてもよく使われるのが Modifier（モディファイア）です。サイズや余白の調整、クリック動作の設定などに使います。

この Modifier を使って、画像サイズを 200.dp にしています。文字サイズ sp と同じく 200dp ではなく 200.dp と書くことに注意です。

Modifier の設定項目はたくさんあるので、コードを書きながら慣れていきましょう。

3. ボタン

📘 参考：p.41〜（書籍はこちら）

次は「水をあげる」「リセット」ボタンを作成しましょう。

Image() の下に、９〜１８行目のコードを追加します。

@Composable
fun AppScreen() {
    Text(
        // 省略
    )
    Image(
        // 省略
    )
    Button(
        onClick = {}
    ) {
        Text(stringResource(R.string.btn_water))
    }
    OutlinedButton(
        onClick = {}
    ) {
       Text(stringResource(R.string.btn_reset))
    }
}

ここでは色付きボタン（Button）と枠付きボタン（OutlinedButton）を用意しました。

onClick = {} には、ボタンをタップした時の処理を書いていきます。

ボタンのテキストには Text コンポーザブル関数を使います。最初に追加したメッセージの Text() と同じコードです。

4. 縦方向に並べる

プレビューを確認してみると、全ての UI が重なって表示されています。これを修正していきましょう。

レイアウトの種類

XML では LinearLayout を使ってビューを縦並び・横並びにすることができました。

Jetpack Compose では３つのレイアウトが用意されています。

• Box: 重ねるレイアウト
• Column: 縦に並べるレイアウト
• Row: 横に並べるレイアウト

今回は Column を使って、テキストと画像を縦方向に並べましょう。

Column の使い方

35〜53行目のコードを選択した状態にすると表示される [豆電球のアイコン] をクリックして、Surround with widget（ウィジェットで囲む）をクリックします。

Surround with Column（カラムで囲む）をクリックします。

選択したコードが Column で囲まれて、テキスト・画像・ボタンが縦に並びました。

5. 画面いっぱいに広げる

プレビューは表示されていますが、スマートフォンのサイズになっていないと完成予想図としてはあまり役に立ちません。

次はプレビュー画面をスマートフォンのサイズに広げてみましょう。

36 行目あたり Column の後ろにコードを追加します。

@Composable
fun AppScreen() {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = stringResource(R.string.message),
            fontSize = 18.sp

先ほど画像サイズの設定に使った Modifier を使っています。fillMaxSize() で最大サイズに広げることができます。

6. 画面中央に移動

画面左上を基準に UI が配置されているで、画面中央に表示する設定をしましょう。

Column 部分に５・６行目のコードを追加します。

@Composable
fun AppScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = stringResource(R.string.message),

画面中央に配置されましたか？

verticalArrangement で上下の配置、horizontalAlignment で左右の配置を設定しています。

ここでは Center（中央）にしましたが、Top（上）/ Bottom（下）/ Start（左）/ End（右）など自由に配置できます。

7. 余白の追加

画像の上下とボタンの間に余白を追加しましょう。

XML では Margin 属性を使いましたが、Jetpack Compose では Spacer コンポーザブル関数が用意されています。

9・13・19行目のコードを追加します。

@Composable
fun AppScreen() {
    Column(
        // 省略
    ) {
        Text(
            // 省略
        )
        Spacer(modifier = Modifier.height(40.dp))
        Image(
            // 省略
        )
        Spacer(modifier = Modifier.height(40.dp))
        Button(
            onClick = {}
        ) {
            Text(stringResource(R.string.btn_water))
        }
        Spacer(Modifier.height(20.dp))
        OutlinedButton(
            // 省略

縦方向に余白を入れるので height を指定しています。横方向に余白をつけるときは Spacer(modifier = Modifier.width(40.dp)) と書きます。

画像の上下とボタンの間に余白が追加されたら完成です！

次に行うこと

以上でアプリ画面は完成です！XML よりもすっきりとしたコードで画面を作ることができましたね。

次回はボタンをクリックできるようにして、アプリを完成させましょう。

>> 第３回 ボタンをタップできるようにしように進む

ここまでのコード

書籍の紹介

書籍では、フラワーシュミレータを含めた全６種類のアプリの作り方を学ぶことができます。（Jetpack Compose ではなく XML による開発です）

「コードを書く→アプリを動かす→コードを書く…」という手順を繰り返すことで、途中で挫折しにくい構成になっています。

とにかく動作するアプリを作ってみたい方、難しい参考書で挫折しまった方にオススメです！

Label

{} [+]

お名前*

メールアドレス*

Label

{} [+]

お名前*

メールアドレス*

0 Comments

古い順

新しい順 人気順

Inline Feedbacks

View all comments

Sara

運営者

XYouTubeContact

書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Kotlin / Java / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！