Jetpack Compose Scafflodとは?

updateしたらdefaultになっていた?

Android Studioをupdateしたら、MainActivityの中にScafflodなるものに変わっていた。これはなんなのか?

official

公式の解説によると

Scaffold

bookmark_border
マテリアル デザインにおけるスキャフォールドは、 標準化されたプラットフォームであり複数のコンポーネントを組み合わせて UI の一部（アプリバーやフローティング アクション ボタンなど）により、アプリに 統一感のあるデザインにできます

例

Scaffold コンポーザブルには、次のような単純な API が用意されています。 マテリアル デザイン ガイドラインに沿ってアプリの構造をすばやく組み立てることができます。 Scaffold は、パラメータとして複数のコンポーザブルを受け入れます。その中には 次のとおりです。

topBar: 画面上部のアプリバー。
bottomBar: 画面下部にあるアプリバー。
floatingActionButton: 画面の右下にマウスオーバーするボタン キーアクションを表示するために使用できる画面です。
上部と下部の両方を実装する方法の詳細な例については、 アプリバーのページをご覧ください。

また、他のコンテナと同様に、Scaffold のコンテンツを渡すことができます。合格 content ラムダに対する innerPadding 値。子要素で使用できます。 作成できます。

次の例は、Google Cloud SDK の実装方法の完全な例を示しています。 Scaffold。トップ アプリバー、ボトム アプリバー、フローティング アクションを含む Scaffold の内部状態を操作するボタン。

このあと書いてあるサンプルコード今のバージョンでは使えなかったのでリファクタリングした
Scaffloc.ktを作成する。

package com.example.composeapp.view

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Top app bar") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary
                )
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary
            ) {
                Text(
                    text = "Bottom app bar",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Filled.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Content(innerPadding, presses)
    }
}

@Composable
fun Content(innerPadding: PaddingValues, presses: Int) {
    Column(
        modifier = Modifier
            .padding(innerPadding),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Text(
            modifier = Modifier.padding(8.dp),
            text =
            """
                This is an example of a scaffold. It uses the Scaffold composable's parameters to 
                create a screen with a simple top app bar, bottom app bar, and floating action button.

                It also contains some basic inner content, such as this text.

                You have pressed the floating action button $presses times.
            """.trimIndent()
        )
    }
}

@Preview
@Composable
fun ScaffoldExamplePreview() {
    ScaffoldExample()
}

MainActivity.ktを修正する。これ動くはず。最近はここに、Scafflodと書いてありました。実はなくも問題ない。以前はSurfaceと書いてありましたね。

package com.example.composeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.example.composeapp.ui.theme.ComposeAppTheme
import com.example.composeapp.view.ScaffoldExample

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

こんな感じのUIができます。AndroidでよくあるTopAppBar, bottomBar, floatingActionButtonを作成できます。

まとめ

マテリアル デザインにおけるスキャフォールドは、 標準化されたプラットフォームであり複数のコンポーネントを組み合わせて UI の一部（アプリバーやフローティング アクション ボタンなど）により、アプリに 統一感のあるデザインにできます

Scafflodはプラットフォームであり複数のコンポーネントを組み合わせて UI の一部により、アプリに 統一感のあるデザインにできます。
足場を作るとか他のフレームワークでも聞きますが、デザインに関係した実行環境ということなのでしょうね。

Scaffold コンポーザブルには、次のような単純な API が用意されています。 マテリアル デザイン ガイドラインに沿ってアプリの構造をすばやく組み立てることができます。 Scaffold は、パラメータとして複数のコンポーザブルを受け入れます。その中には 次のとおりです。

単純な APIというのが...

• topBar: 画面上部のアプリバー。
• bottomBar: 画面下部にあるアプリバー。
• floatingActionButton: 画面の右下にマウスオーバーするボタン キーアクションを表示するために使用できる画面です。

単純にデザインを作る部品を提供してくれてるということなんでしょうね。