web-dev-qa-db-ja.com

アイコンの配置に関する下部のアプリバーの問題

最初の画像にアイコンを表示したいので、下部のアプリバーに問題があります

enter image description here

代わりに私はこれを手に入れました:

enter image description here

6
Lukas John

BottomAppBarのアイコンは、通常のツールバーのアイコンと同じように、通常のアクションアイコンです。したがって、rightに位置合わせされるため、最初の図のように実際に配置することはできません。

ただし、次のようにBottomAppBar内に BottomNavigationView をネストすることで、視覚的に類似したものを実現できました。

    <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:fabAlignmentMode="center"
        app:fabAnimationMode="scale"
        app:hideOnScroll="true"
        app:layout_scrollFlags="scroll|enterAlways">

        <com.google.Android.material.bottomnavigation.BottomNavigationView
            Android:id="@+id/navigation"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginRight="16dp"
            app:menu="@menu/bottom_navigation_menu" />

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

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

BottomNavigationViewに余分なAndroid:layout_marginRight="16dp"属性があることに気付くかもしれません。削除しようとすると、BottomNavigationViewが右に押され、中央に正しく配置されていないことがわかります。したがって、右マージンを追加することにより、完全に位置合わせされます。

BottomNavigationViewの実装をガイドするチュートリアルは次のとおりです。 https://code.tutsplus.com/tutorials/how-to-code-a-bottom-navigation-bar-for-an-Android-app-- cms-30305

これが正しい方法かどうかはわかりませんが、機能します。ハッピーコーディング!

0
Philemon Khor