如何处理 Bottomappbar 项目选择器?
How to handle Bottomappbar items selector?
我目前正在为我的音乐应用使用 BottomAppBar
,左侧有 4 个菜单项,右侧固定有 FAB,每个项目都将导航到一个功能片段。
我想为所有 4 个菜单项设置一个选择器,这类似于 BottomNavigationView
,在选择和未选择时会有 2 种状态。但到目前为止,我正在努力做到这一点。
我已经在 XML 中尝试过选择器或在代码中以编程方式设置它,但其中 none 有效。
这是我想要实现的布局,抱歉不能post直接图像,因为我没有足够的声誉。
https://imgur.com/972GZX8
编辑 1:
很好,所以我刚刚检查了一下,您将无法在选择类似于 BottomNavigationView
时更改底部应用栏中图标的颜色。但是有一个破解方法,您可以在 BottomAppBar
..
旁边添加 BottomNavigationView
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:backgroundTint="#008577"
app:fabAlignmentMode="end">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?android:attr/windowBackground"
app:itemBackground="@android:color/white"
app:itemIconTint="@drawable/nav_item_colors"
app:itemTextColor="@drawable/nav_item_colors"
app:menu="@menu/navigation" />
</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/ic_attach_money_black_24dp"
app:layout_anchor="@id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In your case, create five menu items and disable the fifth menu item
in the bnv. So your fab will appear in that place.
旧答案:
试试这个:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="@android:color/white"
app:itemIconTint="@drawable/nav_item_colors"
app:itemTextColor="@drawable/nav_item_colors"
app:menu="@menu/navigation" />
在drawable目录下,创建nav_item_colors
:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#E15B49" android:state_checked="true" />
<item android:color="@color/colorviolet" android:state_checked="false" />
</selector>
试试这个,
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
style="@style/Widget.MaterialComponents.BottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/gray_f1f0f5"
app:itemTextColor="@color/nav_item_colors"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="@menu/bottom_navigation_menu" />
我目前正在为我的音乐应用使用 BottomAppBar
,左侧有 4 个菜单项,右侧固定有 FAB,每个项目都将导航到一个功能片段。
我想为所有 4 个菜单项设置一个选择器,这类似于 BottomNavigationView
,在选择和未选择时会有 2 种状态。但到目前为止,我正在努力做到这一点。
我已经在 XML 中尝试过选择器或在代码中以编程方式设置它,但其中 none 有效。
这是我想要实现的布局,抱歉不能post直接图像,因为我没有足够的声誉。
https://imgur.com/972GZX8
编辑 1:
很好,所以我刚刚检查了一下,您将无法在选择类似于 BottomNavigationView
时更改底部应用栏中图标的颜色。但是有一个破解方法,您可以在 BottomAppBar
..
BottomNavigationView
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:backgroundTint="#008577"
app:fabAlignmentMode="end">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?android:attr/windowBackground"
app:itemBackground="@android:color/white"
app:itemIconTint="@drawable/nav_item_colors"
app:itemTextColor="@drawable/nav_item_colors"
app:menu="@menu/navigation" />
</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/ic_attach_money_black_24dp"
app:layout_anchor="@id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In your case, create five menu items and disable the fifth menu item in the bnv. So your fab will appear in that place.
旧答案:
试试这个:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="@android:color/white"
app:itemIconTint="@drawable/nav_item_colors"
app:itemTextColor="@drawable/nav_item_colors"
app:menu="@menu/navigation" />
在drawable目录下,创建nav_item_colors
:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#E15B49" android:state_checked="true" />
<item android:color="@color/colorviolet" android:state_checked="false" />
</selector>
试试这个,
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
style="@style/Widget.MaterialComponents.BottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/gray_f1f0f5"
app:itemTextColor="@color/nav_item_colors"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="@menu/bottom_navigation_menu" />