Question

我的底部应用栏有问题，因为我希望图标在第一张图片中显示给我

相反，我得到了：

Answer 1

BottomAppBar中的图标是常规的动作图标，就像常规的工具栏中的图标一样。因此，由于它们会与右对齐，因此您无法真正将它们放置在第一张图片中。

但是，我设法通过将BottomNavigationView嵌套在BottomAppBar内来实现与视觉类似的东西：

    <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

不确定这是否正确，但是可以。编码愉快！

Answer 2

您可以在BottomAppBar内放置自定义布局。唯一的是，您将需要在自定义布局中手动对齐项目。

<com.google.android.material.bottomappbar.BottomAppBar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@android:color/white"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageButton
            android:id="@+id/first_menu_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"
            android:drawableTop="@drawable/ic_first_icon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/second_menu_item"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:id="@+id/second_menu_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_second_icon"
            app:layout_constraintBottom_toBottomOf="@+id/first_menu_item"
            app:layout_constraintEnd_toStartOf="@+id/placeholder"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/first_menu_item" />

        <View
            android:id="@+id/placeholder"
            android:layout_width="70dp"
            android:layout_height="0dp"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="@+id/first_menu_item"
            app:layout_constraintEnd_toStartOf="@+id/third_menu_item"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/second_menu_item"
            app:layout_constraintTop_toTopOf="@+id/first_menu_item" />

        <ImageButton
            android:id="@+id/third_menu_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_third_icon"
            app:layout_constraintBottom_toBottomOf="@+id/first_menu_item"
            app:layout_constraintEnd_toStartOf="@+id/fourth_menu_item"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/placeholder" />

        <ImageButton
            android:id="@+id/fourth_menu_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_fourth_icon"
            app:layout_constraintBottom_toBottomOf="@+id/first_menu_item"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/third_menu_item"
            app:layout_constraintTop_toTopOf="@+id/first_menu_item" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.bottomappbar.BottomAppBar>

您将看到以下内容：

Answer 3

根据@amatkivskiy 的回复，我制作了一个带有 ConstraintLayout、指南和样式的版本。我真的很感激你所做的@amatkivskiy。

首先，创建您的 xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <!-- Note: A RecyclerView can also be used -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingBottom="100dp">

        <!-- Scrollable content -->

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:contentInsetRight="0dp"
        app:contentInsetStart="0dp"
        android:backgroundTint="@color/colorPrimary">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <!--region GuideLine-->
            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/first_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.20" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/second_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.40" />


            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/third_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.60" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/last_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.80" />
            <!--endregion-->

            <!--region icon 1-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/first_guideline"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/first_icon_title"
                    style="@style/Menu.Icon.Title"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:textColor="@android:color/white"
                    android:text="@string/menu_icon_shop"
                    app:layout_constraintTop_toBottomOf="@id/second_icon_image"
                    tools:ignore="MissingConstraints" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/second_icon_image"
                    style="@style/Menu.Icon.Image"
                    app:layout_constraintBottom_toTopOf="@+id/first_icon_title"
                    tools:ignore="MissingConstraints"
                    app:srcCompat="@drawable/ic_food_selected" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <!--endregion-->

            <!--region icon 2-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/second_guideline"
                app:layout_constraintStart_toEndOf="@+id/first_guideline"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/second_icon_title"
                    style="@style/Menu.Icon.Title"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:text="@string/menu_icon_shop"
                    app:layout_constraintTop_toBottomOf="@id/imageView"
                    tools:ignore="MissingConstraints" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/imageView"
                    style="@style/Menu.Icon.Image"
                    app:layout_constraintBottom_toTopOf="@+id/second_icon_title"
                    app:layout_constraintVertical_chainStyle="packed"
                    tools:ignore="MissingConstraints"
                    app:srcCompat="@drawable/ic_food" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <!--endregion-->
            <!--region icon 3-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout2"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/last_guideline"
                app:layout_constraintStart_toStartOf="@+id/third_guideline"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/third_icon_title"
                    style="@style/Menu.Icon.Title"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:text="@string/menu_icon_shop"
                    app:layout_constraintTop_toBottomOf="@id/third_icon_image"
                    tools:ignore="MissingConstraints" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/third_icon_image"
                    style="@style/Menu.Icon.Image"
                    app:layout_constraintBottom_toTopOf="@+id/third_icon_title"
                    app:layout_constraintVertical_chainStyle="packed"
                    app:srcCompat="@drawable/ic_food"
                    tools:ignore="MissingConstraints" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <!--endregion-->

            <!--region icon 4-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/last_guideline"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/last_icon_title"
                    style="@style/Menu.Icon.Title"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:text="@string/menu_icon_shop"
                    app:layout_constraintTop_toBottomOf="@id/last_icon_image"
                    tools:ignore="MissingConstraints" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/last_icon_image"
                    style="@style/Menu.Icon.Image"
                    app:layout_constraintBottom_toTopOf="@+id/last_icon_title"
                    app:layout_constraintVertical_chainStyle="packed"
                    app:srcCompat="@drawable/ic_food"
                    tools:ignore="MissingConstraints" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <!--endregion-->

        </androidx.constraintlayout.widget.ConstraintLayout>

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        app:srcCompat="@drawable/ic_food" />

   </androidx.coordinatorlayout.widget.CoordinatorLayout>
   </androidx.constraintlayout.widget.ConstraintLayout>

请注意，要更改大小或位置，请更改样式，以便所有这些都具有相同的修改。

接下来，您需要将它们添加到您的样式中。用你的主题代替我的

<块引用>

parent="Theme.ChefJeff"

    <style name="Menu.Icon.Title" parent="Theme.ChefJeff">
    <item name="android:gravity">center</item>
    <item name="android:textSize">12sp</item>
    <item name="layout_constraintVertical_chainStyle">packed</item>
    <item name="layout_constraintBottom_toBottomOf">parent</item>
    <item name="layout_constraintEnd_toEndOf">parent</item>
    <item name="layout_constraintStart_toStartOf">parent</item>
</style>

<style name="Menu.Icon.Image" parent="Theme.ChefJeff">
    <item name="android:layout_width">24dp</item>
    <item name="android:layout_height">24dp</item>
    <item name="android:layout_marginTop">3dp</item>
    <item name="layout_constraintEnd_toEndOf">parent</item>
    <item name="layout_constraintStart_toStartOf">parent</item>
    <item name="layout_constraintTop_toTopOf">parent</item>
    <item name="layout_constraintVertical_chainStyle">packed</item>
</style>

有关更多详细信息：我使用指南来对齐我的图标和文本。你可以按照你喜欢的百分比来玩。您甚至可以使图标更大，删除文本。我觉得使用 imageview 和 Textview 我们有更多的控制权，而且更容易自定义。

当你点击一个项目时，我没有放置代码来控制颜色，因为它取决于你的架构和代码风格。但是您可以在运行时在 kotlin 或 java 中修改所有内容 =)

底部应用栏问题，放置图标

3 个答案: