[Jetpack Compose] タスクマネージャー編

はじめに

4日ぶりの投稿です。本記事では、先日投稿した記事に続き、「Composeを用いたAndroidアプリの基礎」というコース内でタスクマネージャーといったお題に挑戦して得られた知識を共有したいと思います。

お題について

Jetpack Composeの基本を用いて、↓画像のような画面を作るのが今回のお題でした。

そして、お題に関数UI仕様は次のようなでした。

1. すべてのコンテンツを画面の垂直方向と水平方向に中央揃えで配置します。
2. 最初のTextコンポーザブルを、フォントの太さBold、上パディング24dp、下パディング8dpに設定します。
3. 2つ目のTextコンポーザブルを、フォント16spに設定します。

該当リンク

完成したコード

MainActivity.kt

package com.example.taskmanager

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.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.taskmanager.ui.theme.TaskManagerTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            TaskManagerTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ComposableTaskManagerApp()
                }
            }
        }
    }
}


@Composable
fun ComposableTaskManagerApp() {
    TaskManager(
        completedMessage = stringResource(R.string.completed_text),
        praisedMessage = stringResource(R.string.praised_text),
        imagePainter = painterResource(R.drawable.ic_task_completed)
    )
}

@Composable
fun TaskManager(
    completedMessage: String,
    praisedMessage: String,
    imagePainter: Painter,
    modifier: Modifier = Modifier
) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
    ) {
        Image(
            painter = imagePainter,
            contentDescription = null
        )
        Text(
            text = completedMessage,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(top = 24.dp, bottom = 8.dp)
        )
        Text(
            text = praisedMessage,
            fontSize = 16.sp
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    TaskManagerTheme {
        ComposableTaskManagerApp()
    }
}

実装したなかでの工夫点やポイント

・工夫点
MainActitivy内にUI直接構造を記述することは、可読性・再利用性・保全性などの観点からよろしくないため、UI構造はTaskManager()という専用の関数として定義し、その親コンポーザブルであるComposableTaskMangerApp()で呼び出すようなコードを設計しました。

・ポイント
お題のメイン部分である、コンテンツを画面の垂直方向・水平方向に中央揃えで配置する方法として、Columnコンポーザブルのパラメータに垂直方向の配置レイアウトを設定するためのverticalArrangement = Arrangement.Center　と水平方向の配置レイアウトを設定するためのhorizonAlignment = Alignment.CenterHorizontally をそれぞれ設定しました。