web-dev-qa-db-ja.com

新しいマテリアルBottomAppBarをBottomNavigationViewとして実装する方法

通常は次のようになる新しいBottomAppBarを実装しようとしました： material BottomAppBar GoogleホームアプリのようにBottomNavigationViewとして this のように。

私の問題は、BottomAppBarをメニューリソースでのみ満たすことができるため、すべてを片側に揃えるのではなく、ボタンをBottomNavigationViewのように（ただし、Fabボタンの「カット」で）揃える方法を理解できないことです。 BottomAppBarの。

この新しいMaterial BottomAppBar内にカスタムレイアウトを追加するにはどうすればよいですか？

または代わりに、Fabボタンの「カット」を使用してBottomNavigationViewを実装する方法はありますか（新しいBottomAppBarのようなクールなデフォルトアニメーションを維持します）。

androidmaterial-designandroid-appbarlayoutbottomnavigationviewandroid-bottomappbar
15
Berenluth

[〜＃〜]解決済み[〜＃〜]

基本的に、メニューリソースを必要なレイアウトに強制するのではなく、代わりにこのソリューションを使用しました。@ dglozanoが示唆するように、「空の」要素を使用してBottomAppBar内にLinearLayoutを配置するだけです。

?attr/selectableItemBackgroundBorderlessを使用すると、BottomNavigationViewと非常によく似た効果を得ることができます。

<com.google.Android.material.bottomappbar.BottomAppBar
    Android:id="@+id/bar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:gravity="center"
    app:layout_anchorGravity="start"
    app:hideOnScroll="true"
    app:fabAnimationMode="scale"
    app:fabAlignmentMode="center"
    app:backgroundTint="@color/colorPrimary">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:weightSum="5"
        Android:paddingEnd="16dp">
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            app:srcCompat="@drawable/ic_home_white_24dp"
            Android:background="?attr/selectableItemBackgroundBorderless"
            Android:tint="@color/secondary_text"/>
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            app:srcCompat="@drawable/ic_map_black_24dp"
            Android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:background="@Android:color/transparent"/>
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            app:srcCompat="@drawable/ic_people_white_24dp"
            Android:background="?attr/selectableItemBackgroundBorderless"/>
        <ImageButton
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            app:srcCompat="@drawable/ic_account_circle_24dp"
            Android:background="?attr/selectableItemBackgroundBorderless"/>
    </LinearLayout>
</com.google.Android.material.bottomappbar.BottomAppBar>
2
Berenluth

1-build.gradleのリポジトリにMavenを含めます

allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

2-build.gradle.にマテリアルコンポーネントの依存関係を配置します。マテリアルバージョンは定期的に更新されます。

implementation 'com.google.Android.material:material:1.0.0-alpha1'

3-compileSdkVersionとtargetSdkVersionを最新のAPIバージョンをターゲットとするAndroid P、28に設定します。

4-BottomAppBarに最新のスタイルを使用させるために、アプリがTheme.MaterialComponentsテーマを継承していることを確認してください。または、次のように、レイアウトxmlファイル内のウィジェット宣言でBottomAppBarのスタイルを宣言できます。

style=”@style/Widget.MaterialComponents.BottomAppBar”

5-以下のように、レイアウトにBottomAppBarを含めることができます。 BottomAppBarはCoordinatorLayoutの子である必要があります。

<com.google.Android.material.bottomappbar.BottomAppBar
Android:id="@+id/bottom_app_bar"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

Fab in bottomnavbar

6-FABのapp：layout_anchor属性でBottomAppBarのIDを指定することにより、フローティングアクションボタン（FAB）をBottomAppBarに固定できます。 BottomAppBarは、成形された背景を持つFABをクレードル化するか、FABがBottomAppBarとオーバーラップできます。

<com.google.Android.material.floatingactionbutton.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />

7-下部ナビゲーションバーとファブアイコンを構成するために使用できる多くの属性があります。

Atributes

8-詳細については、この中程度の投稿を確認してください。

UPDATE：チェック 特定の問題の最終的な解決策のOPの回答

2
dglozano

これは、誰かが上記の設計を達成するのを助けるかもしれません。空のメニュー項目を追加して、fabボタンとスペースを調整します。

<androidx.coordinatorlayout.widget.CoordinatorLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


     <com.google.Android.material.bottomappbar.BottomAppBar
            Android:id="@+id/bottom_bar"
            style="@style/AppTheme.BottomAppBar"
            Android:layout_width="match_parent"
            Android:layout_height="?android:attr/actionBarSize"
            Android:layout_gravity="bottom"
            Android:backgroundTint="@color/bottom_bar">

        <com.google.Android.material.bottomnavigation.BottomNavigationView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="@Android:color/transparent"
                app:itemIconTint="@color/white"
                app:labelVisibilityMode="unlabeled"
                app:menu="@menu/bottom_menu">

        </com.google.Android.material.bottomnavigation.BottomNavigationView>
    </com.google.Android.material.bottomappbar.BottomAppBar>


    <com.google.Android.material.floatingactionbutton.FloatingActionButton
            Android:id="@+id/fab_button"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:backgroundTint="@color/bottom_bar"
            Android:src="@drawable/ic_plus"
            Android:visibility="visible"
            app:borderWidth="0dp"
            app:fabAlignmentMode="end"
            app:fabCradleMargin="20dp"
            app:fabSize="normal"
            app:layout_anchor="@id/bottom_bar"
            app:maxImageSize="38dp"
            app:tint="@color/white">

    </com.google.Android.material.floatingactionbutton.FloatingActionButton>
1
Ram Prajapati

透明な背景を持つbottomNavigationViewの下にbottomAppBarを配置します。空のメニュー項目をmenu.xmlに追加して、FABのスペースを解放します。

XML：

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/lt_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@color/white"
Android:fitsSystemWindows="false">


<ViewPager
    Android:id="@+id/main_pager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginBottom="56dp"
    Android:layout_above="@+id/bottom_navigation"
    Android:layout_alignParentStart="true" />


<com.google.Android.material.bottomnavigation.BottomNavigationView
    Android:id="@+id/bottom_navigation"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    Android:layout_gravity="bottom"
    Android:layout_alignParentBottom="true"
    Android:background="@color/transparent"
    app:menu="@menu/bottom_menu" />

<com.google.Android.material.bottomappbar.BottomAppBar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:id="@+id/bottom_bar"
    Android:layout_gravity="bottom"/>

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:layout_anchor="@id/bottom_bar"/>

結果

0
Artur Antonyan