Jetpack Compose Academy · レッスン

下部バーとフローティングアクションボタン

ナビゲーションと主要なアクションを固定します。

「下部バーとフローティングアクションボタン」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Anchoring the Bottom

The thumb-friendly zone of a phone is the bottom. Scaffold's bottomBar and floatingActionButton slots put your key controls right where fingers reach. 👍

The bottomBar Slot

Whatever you place in the bottomBar slot is pinned to the bottom, and Scaffold shrinks the content area so nothing slides behind it.

Scaffold(
    bottomBar = { BottomAppBar { Text("Tools") } }
) { p -> }

BottomAppBar

BottomAppBar is a Material container for actions tied to the current screen, like edit or share buttons. It is a RowScope, so children flow left to right.

Meet the FAB

A FloatingActionButton is the round, raised button for the single most important action on a screen, like Add or Compose. ➕

FloatingActionButton(onClick = { }) {
    Icon(Icons.Default.Add, "Add")
}

The FAB Slot

Put your FAB in Scaffold's floatingActionButton slot, not in your content. Scaffold then floats it correctly above the bottom edge.

Scaffold(
    floatingActionButton = { FloatingActionButton(onClick = {}) {} }
) { p -> }

One FAB Per Screen

A FAB signals the primary action, so use just one per screen. Two competing FABs leave users unsure which one really matters.

FAB Position

Control where the FAB sits with floatingActionButtonPosition. The default is the bottom-right corner, but Center pairs nicely with a bottom bar.

floatingActionButtonPosition = FabPosition.Center

FAB Sizes

Beyond the standard FAB, Material 3 adds SmallFloatingActionButton and LargeFloatingActionButton so you can match the button to the screen's weight.

The ExtendedFAB

An ExtendedFloatingActionButton shows an icon plus a text label. It works well when the action's name is not obvious from an icon alone.

ExtendedFloatingActionButton(
    onClick = { },
    icon = { Icon(Icons.Default.Add, "Add") },
    text = { Text("New") }
)

Bars and FAB Together

Scaffold understands when a bottomBar and a FAB coexist, lifting the FAB so it never overlaps the bar. You just fill both slots.

Describe the FAB

Like any icon button, give the FAB's Icon a contentDescription. A bare plus sign means nothing to a screen reader without it.

Quick Check

How many FloatingActionButtons should a single screen normally show?

Recap

Use the bottomBar slot for screen actions and the floatingActionButton slot for one primary action. Scaffold spaces them so they never collide. ✨

よくある質問

「下部バーとフローティングアクションボタン」レッスンは無料ですか？

はい。「下部バーとフローティングアクションボタン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「下部バーとフローティングアクションボタン」で何を学びますか？

ナビゲーションと主要なアクションを固定します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「下部バーとフローティングアクションボタン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る