放置图标的底部应用栏问题答案

【问题标题】：Bottom app bar problem with placing icons放置图标的底部应用栏问题
【发布时间】：2019-07-13 00:35:33
【问题描述】：

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

相反，我得到了这个：

【问题讨论】：

标签： android kotlin navigation material-design android-bottomappbar

【解决方案1】：

您可以在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:src="@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>

你会得到这样的东西：

【讨论】：

这很酷，但我使用Linear Layout 并将weightSum 设置为我想要使用的图像数量，然后使用layout_weight 定义每个图像的宽度
我可以将导航视图与导航控制器一起使用吗？？？@amatkivskly
@Saadat 不幸的是我不使用导航控制器:(
感谢您的信息。 @amatkivskiy 我想将它与导航控制器一起使用

【解决方案2】：

BottomAppBar 中的图标是常规操作图标，就像常规工具栏 中的图标一样。因此，您不能像第一张图片中那样真正定位它们，因为它们会与右侧对齐。

但是，我设法通过在 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" />

您可能会注意到底部导航视图中有一个额外的android:layout_marginRight="16dp" 属性。尝试将其删除，您会注意到 BottomNavigationView 被推到了右侧，并且在中间没有正确对齐。因此，通过添加右边距，它将完美对齐。

这里有一个指导您实现 BottomNavigationView 的教程：https://code.tutsplus.com/tutorials/how-to-code-a-bottom-navigation-bar-for-an-android-app--cms-30305

不确定这是否是正确的方法，但它有效。编码愉快！

【讨论】：

删除左边距在BottomAppBar中使用此行：app:contentInsetLeft="0dp" app:contentInsetStart="0dp"
被FAB重叠时的中心项，使用菜单xml文件中的空项

【解决方案3】：

根据@amatkivskiy 的回复，我制作了一个带有约束布局、指南和样式的版本。我真的很感激你所做的@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 中修改所有内容 =)

【讨论】：