[英]Customize BottomNavigationView to show text for the selected item, and icon for non-selected items
I'm trying to make this NavigationBottomView
:我正在尝试制作此
NavigationBottomView
:
All I want is to make selected item text instead of icon.我想要的只是制作选定的项目文本而不是图标。
I googled it and tried to make custom navigationBottomView
item, but I found nothing like what I want.我用谷歌搜索它并尝试制作自定义
navigationBottomView
项目,但我没有找到我想要的东西。
is it possible to be a text?
有可能是文本吗? or even can i hide the icon and display item title only?
甚至我可以隐藏图标并仅显示项目标题吗?
Yes it's.是的,它就是。
To control toggling BottomNavigationView
item text, use app:itemTextColor
with a custom selector要控制切换
BottomNavigationView
项目文本, app:itemTextColor
与自定义选择器一起使用
To control toggling the item icon, use app:itemIconTint
with a custom selector要控制切换项目图标,请使用带有自定义选择器的
app:itemIconTint
For both text/icon cases you can use a transparent color as a hack for the hidden state.对于文本/图标情况,您可以使用透明颜色作为隐藏 state 的黑客攻击。
Example:例子:
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemTextColor="@drawable/text_selector"
app:itemIconTint="@drawable/icon_selector"
text_selector.xml: text_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FFEB3B" android:state_checked="true" />
<item android:color="@android:color/transparent" android:state_checked="false" />
</selector>
icon_selector.xml:图标选择器.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#FFEB3B" android:state_checked="false" />
<item android:color="@android:color/transparent" android:state_checked="true" />
</selector>
UPDATE更新
i tried it before but all i got icon get hidden and text still at the bottom not shifted to the center like gif u sent
我之前尝试过,但我得到的所有图标都被隐藏了,文本仍然在底部,没有像你发送的 gif 那样移动到中心
You can have the same behavior by changing the BottomNavView
text size:您可以通过更改
BottomNavView
文本大小来获得相同的行为:
Create the following style to increase the item text:创建以下样式以增加项目文本:
<style name="BottomNavigationViewActiveItemText" parent="@style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">20sp</item>
</style>
Apply it to the BottomNavigationView
with app:itemTextAppearanceActive="@style/BottomNavigationViewActiveItemText"
使用
app:itemTextAppearanceActive="@style/BottomNavigationViewActiveItemText"
将其应用到BottomNavigationView
If your item text can be in two lines, use also:如果您的项目文本可以是两行,也可以使用:
<style name="BottomNavigationStyle">
<item name="android:gravity">center</item>
<item name="android:lines">2</item>
</style>
And apply it with android:theme="@style/BottomNavigationStyle"
并与
android:theme="@style/BottomNavigationStyle"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.