android - 放置图标的底部应用栏问题

Question

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

相反，我得到了这个：

score 15 · Accepted Answer

您可以在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>

你会有这样的东西：

score 0 · Accepted Answer

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

但是，我设法通过在 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 被推到了右侧，并且在中间没有正确对齐。因此，通过添加右边距，它将完美对齐。

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

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

score 0 · Accepted Answer

基于@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="主题.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 中修改所有内容 =)

android - 放置图标的底部应用栏问题

3 回答 3

Related

Reference