カウントアプリの見た目を作ろう

勉強会で使用するサンプルアプリのリポジトリ

今回のサンプルコードは以下のリポジトリから確認できます。もし追いつけなかったときに確認してみてください。

GitHub リポジトリ: https://github.com/harutiro/CountAppSysHack ↗

ノート

リポジトリにはカウントアプリの完成版コードが含まれています。学習中に困ったときの参考にしてください。

カウントアプリの機能

これから作成するカウントアプリでは、以下の機能を実装します。

• カウントを表示するテキスト
• カウントを増やすボタン

シンプルな構成ですが、Androidアプリ開発の基本的な要素を学ぶことができます。

現状の状態確認

先ほど、プロジェクトが作成できて、以下のような画面が表示されているか確認をしてください。できていない場合はプロジェクトの新規作成をしてください。

Android Studioで MainActivity.kt を開くと、以下のようなコードが表示されています。

package io.github.harutiro.countapp

import ...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CountAppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

コードのいらないところを消そう

デフォルトで書かれたコードがあるので、使わないため、ここまで綺麗にしておきましょう。

package io.github.harutiro.countapp

import ...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CountAppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->

                }
            }
        }
    }
}

ノート

innerPaddingのエラーは無視で大丈夫です。使われてないので、画面が崩れる可能性があるよと教えてくれているだけです。

Composable関数を用いてカウントアプリを表示する部分を作ろう

MainActivityクラスの中のScaffold内にCountAppScreenを追加し、クラスの外にCountAppScreen関数を定義します。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CountAppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    CountAppScreen(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun CountAppScreen(modifier: Modifier = Modifier) {

}

@Composable関数とは？

@Composable関数について説明します。

@Composable
fun QuizScreen() {
    Scaffold(
        topBar = { SelfIntroductionAppBar() }
    ) { paddingValues ->
        Column(
            Modifier
                .padding(paddingValues)
                .padding(16.dp)
        ) {
            SkillQuizSection()
        }
    }
}

• @Composableをつけた関数
• Composable関数はComposable関数の中でしか呼べない
• 見た目に関する記述をするときに明示的につけよう

Modifierとは？

Compose修飾子で、コンポーザブルの見た目を装飾したり、拡張したりする動作を追加したり、見た目をより綺麗に整える。

できることの一例

機能	説明
背景色の変更	要素の背景色を設定
ボーダーをつける	要素に枠線を追加
余白をつける	padding で余白を設定
要素を画面いっぱいに広げる	fillMaxWidth, fillMaxHeight

fillMaxWidth / fillMaxHeight

要素を画面いっぱいに広げます。

Button(
    onClick = {},
    modifier = Modifier.fillMaxWidth(),
) {
    Text(text = "button")
}

padding

要素に空白をつけます。

Text(
    text = "padding",
    modifier = Modifier
        .border(1.dp, Color.Green)
        .padding(8.dp)
)

他にもたくさんのModifierがあります。詳しくは以下を参照。

https://developer.android.com/develop/ui/compose/modifiers?hl=ja ↗

コンポーネントを配置しよう

CountAppScreenの中身を作ろう。Textコンポーネントと、Buttonコンポーネントを配置します。

@Composable
fun CountAppScreen(modifier: Modifier = Modifier) {
    Text(
        text = "カウント: 0",
        textAlign = TextAlign.Center
    )

    Button(
        onClick = {
            // ここに値を追加する処理を書く
        }
    ) {
        Text(
            "+",
        )
    }
}

ノート

TextとButtonについては、次のスライドで説明します。また、赤いエラーについても説明します。

importについて

赤くなっているTextにカーソルを重ねて Macの人は option + return、Winの人は alt + enter を押して、インポートするライブラリを選択する。

ライブラリは、今回の場合コンポーザブルに関するものなので、Composableと最初についているものを選ぼう。

Textについて

テキストを表示するための関数。Colorなどの引数をつけることで、色なども指定できる。

Text("バームクーヘン")

色を指定する場合：

Text(
    text = "バームクーヘン",
    color = Color.Red
)

TextAlignについて

テキストをどちらに寄せるのかを記載する。

設定	説明
TextAlign.Start	左寄せ
TextAlign.Center	中心寄せ
TextAlign.End	右寄せ

Text(
    text = "カウント: 0",
    textAlign = TextAlign.Center
)

Buttonについて

ボタンを作成できるコンポーネント。onClickを用意することで、動作を記述できる。また、Buttonの中にTextを用意することで、文字を表示することができる。

Button(onClick = { /*TODO*/ }) {
    Text(text = "ボタン")
}

実際に動かしてみる

Android Studioの上部にある「Run ‘app’」ボタン（再生ボタン）をクリックします。

これで、エミュレータが立ち上がり、自動でコードがビルドされます。

変な位置に重なって表示される

実行してみると、テキストとボタンが重なって変な位置に表示されることがあります。

これには2つの原因があります：

1. 隙間が一切ない - 原因：innerPaddingが設定されてない
2. テキストとボタンが重なってる - 原因：コンポーネントが縦並びになっていない

次のセクションでこれらの問題を解決していきます。

修正を入れてみよう

CountAppScreenをColumnで囲み、modifierを追加します。

@Composable
fun CountAppScreen(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
    ) {
        Text(
            text = "カウント: 0",
            textAlign = TextAlign.Center
        )

        Button(
            onClick = {
                // ここに値を追加する処理を書く
            }
        ) {
            Text(
                "+",
            )
        }
    }
}

Column Rowについて

要素を縦に並べたり横に並べたりするコンポーネントです。

コンポーネント	説明
Column	要素を縦に並べる
Row	要素を横に並べる

ColumnとRowを組み合わせて自由にレイアウトを作ることができます。

Column {
    Row {
        Text(text = "1")
        Text(text = "2")
    }
    Text(text = "3")
}

innerPaddingとは？

アプリを表示させるにあたり、様々な情報が表示されて、かぶってしまう領域が設定されているpaddingの値です。

この部分を覆い被さらないようにpaddingが設定されます。

このように表示されましたか？

修正が完了すると、カウントのテキストと+ボタンが縦に並んで、正しい位置に表示されるようになります。