上から下へ.棒

アクションバーを構成する(de)の第3分割払いへようこそ.今日、私たちはこのようなことを見ます.

XMLでそれを実装していました.まずレイアウト

<com.google.android.material.bottomnavigation.BottomNavigationView
  android:id="@+id/bottom_navigation"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:menu="@menu/bottom_navigation_menu" />

次のコンテンツ

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:id="@+id/page_home"
    android:enabled="true"
    android:icon="@drawable/ic_baseline_home_24"
    android:title="@string/home"/>
  <item
    android:id="@+id/page_info"
    android:enabled="true"
    android:icon="@drawable/ic_baseline_info_24"
    android:title="@string/info"/>
</menu>

によるとdocs , BottomNavigationView 表す

a standard bottom navigation bar for application.
It is an implementation of material design bottom
navigation.

Bottom navigation bars make it easy for users to
explore and switch between top-level views in a single tap.
They should be used when an application has three to five
top-level destinations.

Jetpack Composeでこれをする方法を見ましょう.タイピングを始めたらBottom あなたは選択肢の過多を得る:

だからBottomAppBar() うまく収まる、作曲可能なScaffold() . The docs 言いましょう.

A BottomAppBar displays actions relating to the current
screen and is placed at the bottom of the screen. It can
also optionally display a FloatingActionButton, which is
either overlaid on top of the BottomAppBar, or inset,
carving a cutout in the BottomAppBar.

含まれます.

ナビゲーション引き出し制御

フローティングアクションボタン

アクションアイコン

オーバーフローメニューコントロール

シンプルなものを焼きましょう

bottomBar = {
  BottomAppBar {
    IconButton(onClick = { }) {
      Icon(Icons.Filled.Menu, contentDescription = null)
    }
    Spacer(Modifier.weight(1f, true))
    IconButton(onClick = { }) {
      Icon(Icons.Filled.Favorite, contentDescription = null)
    }
    IconButton(onClick = { }) {
      Icon(Icons.Filled.MoreVert, contentDescription = null)
    }
  }
}

あなたは、私がなぜ入れたかについて疑問に思うかもしれませんSpacer(Modifier.weight(1f, true)) , これは、アクションをBottomAppBar .
によるとMaterial Design docs ボトムアプリケーションバーには、フローティングアクションボタンの存在とバーのその位置に基づいて別のレイアウトがあります.彼らは、バーに含まれることができる行動の数を口述します.
センターファブ

Use bottom app bars on home screens that feature a
navigation menu control and a prominent action (such as a
FAB). A minimum of one and a maximum of two additional
actions can be placed on the opposite side of the bar.

エンドファブ

Use a FAB on secondary screens that require a floating
action button and three to four additional actions.

ノーファブ

When no floating action button is needed, the bottom app
bar can accommodate a navigation menu icon and up to four
actions aligned on the opposing edge.

これが確かに美しく見える間、これは古い世界からの私の導入例がそうしなかったものでありません.それはトプヴェルナビゲーション目的地についてだったことを思い出してください.
があるBottomNavigation() 作曲可能.このポストを終えるために、それがどのように働くかについて見ましょう.によるとthe docs

BottomNavigation is a component placed at the bottom of
the screen that represents primary destinations in your
application.

BottomNavigation should contain multiple
BottomNavigationItems, each representing a singular
destination.

これは次のようになります.

BottomNavigation() {
  BottomNavigationItem(
    icon = { Icon(Icons.Filled.Info, contentDescription = null) },
    label = { Text("About") },
    selected = false,
    onClick = { }
  )
  BottomNavigationItem(
    icon = { Icon(Icons.Filled.Settings, contentDescription = null) },
    label = { Text("Settings") },
    selected = false,
    onClick = { }
  )
}

これは確かに大きく見える.しかしながら、実際にナビゲーションを実装する方法は、別のポストの価値があるかもしれません.😀 あなたは、私があなたのアプリでここで説明した作曲家を使いましたか?私はコメントであなたの考えを聞くのが大好きだ.
source