Jetpack Compose

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

Sara

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

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

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

どのような画面を作る?

📘 参考:p.12〜書籍はこちら

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

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

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 関数内に3〜6行目のコードを追加します。

@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… を選択します。

7〜9行目のコードを追加します。

@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() の下に、9〜18行目のコードを追加します。

@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 では3つのレイアウトが用意されています。

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

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

Column の使い方

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

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

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

とても頻繁に使うので「Column → 縦並び、Row → 横並び」は覚えておきましょう。

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

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

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

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

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

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

6. 画面中央に移動

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

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

@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(右)など自由に配置できます。

なぜ左右の配置が Left / Right ではないかというと、右から左に読む言語(アラビア語など)があるからです。エミュレータを日本語に設定していると 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 よりもすっきりとしたコードで画面を作ることができましたね。

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

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

ここまでのコード

Q
MainActivity.kt
package com.example.flowercompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.flowercompose.ui.theme.FlowerComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            FlowerComposeTheme {
                
            }
        }
    }
}

@Composable
fun AppScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = stringResource(R.string.message),
            fontSize = 18.sp
        )
        Spacer(Modifier.height(40.dp))
        Image(
            painter = painterResource(R.drawable.f0),
            contentDescription = null,
            modifier = Modifier.size(200.dp)
        )
        Spacer(Modifier.height(40.dp))
        Button(
            onClick = {}
        ) {
            Text(stringResource(R.string.btn_water))
        }
        Spacer(Modifier.height(20.dp))
        OutlinedButton(
            onClick = {}
        ) {
            Text(stringResource(R.string.btn_reset))
        }
    }
}

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

書籍の紹介

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

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

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

guest
0 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Kotlin / Java / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

POINT 01

動くコード

プログラミングの文法を学んでも、そこからどのようにアプリ開発ができるのかイメージが湧きにくいものです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなどアプリとして機能するものを作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

受講期限もないので、いつでも前のレッスンに戻ることができるので安心です。

お申し込みしたその日からすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました