[英]Selected tab's color in Bottom Navigation View
我正在向項目中添加一個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_width="match_parent"
android:layout_height="wrap_content"
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>
我將不勝感激任何幫助。
在制作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
。
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_width="0dp"
android:layout_height="wrap_content"
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:文件結構:
BottomNavigationView
使用應用於所選選項卡的主題中的colorPrimary ,並使用android:textColorSecondary
為非活動選項卡圖標着色。
因此,您可以使用首選原色創建樣式,並將其設置為 xml 布局文件中BottomNavigationView
的主題。
樣式.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_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
android:theme="@style/BottomNavigationTheme"
app:menu="@menu/navigation" />
如果要以編程方式更改圖標和文本顏色:
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);
我正在使用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>
現在回答為時已晚,但可能對某人有幫助。 我犯了一個非常愚蠢的錯誤,我使用名為bottom_color_nav.xml的選擇器文件進行選擇和取消選擇顏色更改,但它仍然沒有反映 BottomNavigationView 中的任何顏色更改。
然后我意識到,我在onNavigationItemSelected方法中返回了false 。 如果您在此方法中返回 true,它將正常工作。
為了設置 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>
嘗試使用android:state_enabled
而不是android:state_selected
作為選擇器項屬性。
這將起作用:
setItemBackgroundResource(android.R.color.holo_red_light)
不是創建選擇器,而是創建樣式的最佳方式。
<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>
享受安卓!
由於文件夾結構發生了變化,tab_color.xml 現在屬於 res > drawable,它可以處理選擇器。 從那里開始,公認的解決方案有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.