底部导航视图中选定选项卡的颜色
Posted
技术标签:
【中文标题】底部导航视图中选定选项卡的颜色【英文标题】：Selected tab's color in Bottom Navigation View 【发布时间】：2017-03-12 13:07:40 【问题描述】：我正在将BottomNavigationView 添加到项目中，并且我希望所选选项卡具有不同的文本（和图标色调）颜色（以实现使未选定选项卡变灰的效果）。在颜色选择器资源文件中使用 android:state_selected="true" 的不同颜色似乎不起作用。我还尝试使用android:state_focused="true" 或android:state_enabled="true" 添加其他项目条目，不幸的是没有效果。还尝试将默认（未选择）颜色的 state_selected 属性设置为 false（显式），但没有成功。
这是我将视图添加到布局的方法：
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_
android:layout_
android:layout_alignParentBottom="true"
app:itemBackground="@color/silver"
app:itemIconTint="@color/bnv_tab_item_foreground"
app:itemTextColor="@color/bnv_tab_item_foreground"
app:menu="@menu/bottom_nav_bar_menu" />
这是我的颜色选择器 (bnv_tab_item_foreground.xml)：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/darker_gray" />
<item android:state_selected="true" android:color="@android:color/holo_blue_dark" />
</selector>
还有我的菜单资源 (bottom_nav_bar_menu.xml)：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_home"
android:icon="@drawable/ic_local_taxi_black_24dp"
android:title="@string/home" />
<item
android:id="@+id/action_rides"
android:icon="@drawable/ic_local_airport_black_24dp"
android:title="@string/rides"/>
<item
android:id="@+id/action_cafes"
android:icon="@drawable/ic_local_cafe_black_24dp"
android:title="@string/cafes"/>
<item
android:id="@+id/action_hotels"
android:icon="@drawable/ic_local_hotel_black_24dp"
android:title="@string/hotels"/>
</menu>
我将不胜感激。
【问题讨论】：
【参考方案1】：在创建selector 时，始终保持最后的默认状态，否则只会使用默认状态。您需要将选择器中的项目重新排序为：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@android:color/holo_blue_dark" />
<item android:color="@android:color/darker_gray" />
</selector>
与BottomNavigationBar 一起使用的状态是state_checked 而不是state_selected。
【讨论】：
添加到 就我而言，我需要生成动态菜单，但这个解决方案不起作用。唯一可行的解决方案是手动设置菜单项***.com/a/7106111/2098878 “state_checked 不是 state_selected”。多么节省时间：）谢谢！ 将其添加到 而不是@drawable 对于像我一样被卡住的人，我不得不在 "res" 中创建一个 "color" 目录，然后把这个文件放在那里。【参考方案2】：1.在res中创建文件夹，名称为color（如drawable）
2. 右键单击颜色文件夹。选择 新建-> 颜色资源文件-> 创建 color.xml 文件 (bnv_tab_item_foreground) （图 1：文件结构）
3.复制粘贴bnv_tab_item_foreground
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_
android:layout_
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
app:itemBackground="@color/appcolor"//diffrent color
app:itemIconTint="@color/bnv_tab_item_foreground" //inside folder 2 diff colors
app:itemTextColor="@color/bnv_tab_item_foreground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
bnv_tab_item_foreground：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/white" />
<item android:color="@android:color/darker_gray" />
</selector>
图 1：文件结构：
【讨论】：
【参考方案3】：BottomNavigationView 使用主题中的 colorPrimary 应用于所选选项卡，uses android:textColorSecondary 用于非活动选项卡图标色调。
因此，您可以使用首选原色创建样式，并将其设置为 xml 布局文件中 BottomNavigationView 的主题。
styles.xml：
<style name="BottomNavigationTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/active_tab_color</item>
<item name="android:textColorSecondary">@color/inactive_tab_color</item>
</style>
your_layout.xml：
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_
android:layout_
android:background="?android:attr/windowBackground"
android:theme="@style/BottomNavigationTheme"
app:menu="@menu/navigation" />
【讨论】：
android:textColorSecondary 不起作用。应该改用android:colorForeground
这是最好的答案，“选择器”方法使用“darker_gray”作为非活动标签颜色，与原始颜色不同。 android:textColorSecondary 也适合我。谢谢！【参考方案4】：
如果您想以编程方式更改图标和文本颜色：
ColorStateList iconColorStates = new ColorStateList(
new int[][]
new int[]-android.R.attr.state_checked,
new int[]android.R.attr.state_checked
,
new int[]
Color.parseColor("#123456"),
Color.parseColor("#654321")
);
navigation.setItemIconTintList(iconColorStates);
navigation.setItemTextColor(iconColorStates);
【讨论】：
你成就了我的一天 :) 像魅力一样工作【参考方案5】：我正在使用com.google.android.material.bottomnavigation.BottomNavigationView（与 OP 不同）并且我尝试了上述各种建议的解决方案，但唯一有效的是将 app:itemBackground 和 app:itemIconTint 设置为我的选择器颜色对我有用.
<com.google.android.material.bottomnavigation.BottomNavigationView
style="@style/BottomNavigationView"
android:foreground="?attr/selectableItemBackground"
android:theme="@style/BottomNavigationView"
app:itemBackground="@color/tab_color"
app:itemIconTint="@color/tab_color"
app:itemTextColor="@color/bottom_navigation_text_color"
app:labelVisibilityMode="labeled"
app:menu="@menu/bottom_navigation" />
我的color/tab_color.xml 使用android:state_checked
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/grassSelected" android:state_checked="true" />
<item android:color="@color/grassBackground" />
</selector>
我还在为color/bottom_navigation_text_color.xml 使用选定的状态颜色
这里不完全相关，但为了完全透明，我的BottomNavigationView 样式如下：
<style name="BottomNavigationView" parent="Widget.Design.BottomNavigationView">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">@dimen/bottom_navigation_height</item>
<item name="android:layout_gravity">bottom</item>
<item name="android:textSize">@dimen/bottom_navigation_text_size</item>
</style>
【讨论】：
颜色/tab_color.xml?你能解释一下吗？ 我在上面的答案中发布了color/tab_color.xml，它是颜色选择器文件。【参考方案6】：
现在回答为时已晚，但可能对某人有所帮助。 我犯了一个非常愚蠢的错误，我使用了一个名为 bottom_color_nav.xml 的选择器文件来选择和取消选择颜色变化，但它仍然没有反映 BottomNavigationView 中的任何颜色变化。
然后我意识到，我在 onNavigationItemSelected 方法中返回了 false。如果您在此方法中返回 true，它将正常工作。
【讨论】：
【参考方案7】：为了设置textColor，BottomNavigationView有两个样式属性你可以直接从xml设置：
itemTextAppearanceActive
itemTextAppearanceInactive
在您的 layout.xml 文件中：
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bnvMainNavigation"
style="@style/NavigationView"/>
在您的 styles.xml 文件中：
<style name="NavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
<item name="itemTextAppearanceActive">@style/ActiveText</item>
<item name="itemTextAppearanceInactive">@style/InactiveText</item>
</style>
<style name="ActiveText">
<item name="android:textColor">@color/colorPrimary</item>
</style>
<style name="InactiveText">
<item name="android:textColor">@color/colorBaseBlack</item>
</style>
【讨论】：
不知道为什么我不能让这个解决方案工作，但接受的解决方案确实有效。还有任何人在寻找itemIconTint 和 itemTextColor 的默认材质样式，请查看 @color/mtrl_navigation_bar_item_tint【参考方案8】：
尝试使用android:state_enabled 而不是android:state_selected 作为选择器项属性。
【讨论】：
如问题中所述，我也尝试了 state_enabled ，但这不是用于此特定小部件的正确状态属性。问题是答案中提到的：1. 排序错误（默认状态应该是选择器中的最后一项） 2. state_checked 是与 BottomNavigationView 一起使用的正确状态属性。【参考方案9】：这将起作用：
setItemBackgroundResource(android.R.color.holo_red_light)
【讨论】：
【参考方案10】：而不是创建选择器， 创建样式的最佳方式。
<style name="AppTheme.BottomBar">
<item name="colorPrimary">@color/colorAccent</item>
</style>
并更改文本大小，选择或未选择。
<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>
享受安卓！
【讨论】：
以上是关于底部导航视图中选定选项卡的颜色的主要内容，如果未能解决你的问题，请参考以下文章
如何使用底部导航菜单处理屏幕旋转，其中每个菜单都引用一个带有有限选项卡的新查看器（3-4）？我正在使用 ViewModel