放置图标的底部应用栏问题
Posted
技术标签:
【中文标题】放置图标的底部应用栏问题【英文标题】：Bottom app bar problem with placing icons 【发布时间】：2019-07-13 00:35:33 【问题描述】：我的底部应用栏有问题，因为我希望在第一张图片中向我显示图标
相反，我得到了这个：
【问题讨论】：
【参考方案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_
android:layout_
android:layout_gravity="bottom"
app:backgroundTint="@android:color/white"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_
android:layout_>
<ImageButton
android:id="@+id/first_menu_item"
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_
android:layout_
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_
android:layout_
android:clipToPadding="false"
android:paddingBottom="100dp">
<!-- Scrollable content -->
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bar"
android:layout_
android:layout_
android:layout_gravity="bottom"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
android:backgroundTint="@color/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_
android:layout_>
<!--region GuideLine-->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/first_guideline"
android:layout_
android:layout_
android:orientation="vertical"
app:layout_constraintGuide_percent="0.20" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/second_guideline"
android:layout_
android:layout_
android:orientation="vertical"
app:layout_constraintGuide_percent="0.40" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/third_guideline"
android:layout_
android:layout_
android:orientation="vertical"
app:layout_constraintGuide_percent="0.60" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/last_guideline"
android:layout_
android:layout_
android:orientation="vertical"
app:layout_constraintGuide_percent="0.80" />
<!--endregion-->
<!--region icon 1-->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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 中修改所有内容 =)
【讨论】：
以上是关于放置图标的底部应用栏问题的主要内容，如果未能解决你的问题，请参考以下文章