Android BottomNavigationView一个选项卡，具有不同的未选中/选中的颜色 [英] Android BottomNavigationView One tab with different unselected/selected colors
问题描述
我正在尝试匹配这样的设计.
I am attempting to match a design like this..
请注意，选定的标签颜色"为蓝色，但中央标签的图标应始终为绿色圆圈，中间带有白色时钟.
Notice that the "selected tab color tint" is a blue, but the center tab's icon should always be the green circle with the white clock in the middle.
我尝试了很多事情.首先，尝试通过使用具有绿色圆圈和时钟PNG资源的图层列表XML资源以编程方式进行此操作，该资源根本无法正常工作.然后，我让设计师给了我完整的图标(时钟和绿色圆圈)，但是现在我遇到了这个问题.
I've tried a number of things. First trying to do it programmatically by using a layer-list XML resource that had the green circle and clock PNG resource, which didn't work at all. Then I just got the designer to give me the full icon(clock and green circle), but now I'm running into this issue..
(未选中)
(已选择)
我找不到要在Google上搜索的正确字词来解决此问题.
I'm failing at finding the correct terms to search for on Google to fix this.
最后，我需要选择的选项卡颜色为蓝色，但我需要中心选项卡图标始终是实际的图标，并且没有其他颜色(本质上它需要看起来与.png完全一样).
In the end, I need the selected tab color to be blue, but I need the center tab icon to always be the actual icon with no additional coloring(essentially it needs to look exactly like the .png).
PS:我正在使用Xamarin.Forms，FreshMvvm和FreshTabbedFONavigationContainer.但是，通过Renderer，我可以直接访问BottomNavigationView和所有其他本机Android组件.因此，解决方案不必是Xamarin解决方案. Java/kotlin解决方案也可以工作，我可以将其转换为Xamarin.
PS: I am using Xamarin.Forms, FreshMvvm, and the FreshTabbedFONavigationContainer. However, through the Renderer, I have direct access to the BottomNavigationView and all of the other native Android components. So the solution does not have to be a Xamarin solution. A java/kotlin solution would work also and I can just convert it to Xamarin.
====================
已编辑
====================
因此，我使用下面的 Andres Castro 代码进行了很多工作，但我仍然有相同的想法像以前一样发行.使用下面的Andres代码，我切换回使用FontAwesome作为图标(效果很好)，但是这样做意味着我需要使用LayerDrawable来创建圆圈/图标中心选项卡图标.
So I have gotten a lot further using Andres Castro code below, but I'm still having the same issue as before. Using Andres' code below, I switched back to using FontAwesome for the icons(which works great), but in doing so means I needed to use a LayerDrawable to create the circle/icon center tab icon.
这就是我到目前为止的情况.
So this is what I have so far..
未选中的中心图标
选定的中心图标
如您所见，中心图标在未选中时仍为灰色，在选中时仍为蓝色(其他4个图标的正确选择/未选择的颜色).
As you can see, the center icon is still gray when unselected and blue when selected(the proper selected/unselected colors of the other 4 icons).
这是我到目前为止与中心图标有关的代码.
Here is the code I have so far pertaining to the center icon..
UpdateTabbedIcons
private void UpdateTabbedIcons()
{
for (var i = 0; i < Element.Children.Count; i++) {
var tab = _bottomNavigationView.Menu.GetItem(i);
var element = Element.Children[i];
if (element is NavigationPage navigationPage) {
//if the child page is a navigation page get its root page
element = navigationPage.RootPage;
}
UpdateTabIcon(tab, element);
}
}
UpdateTabIcon
public void UpdateTabIcon(IMenuItem menuItem, Page page)
{
var icon = page?.Icon;
if (icon == null) return;
var drawable = new IconDrawable(Context, icon, "fa-regular-pro-400.ttf");
var element = Element.CurrentPage;
if (element is NavigationPage navigationPage) {
//if the child page is a navigation page get its root page
element = navigationPage.RootPage;
}
if (page is DoNowTabPage) { //Page for center icon
drawable.Color(Helpers.Resources.White.ToAndroid());
var finalDrawable = GetCombinedDrawable(drawable);
menuItem.SetIcon(finalDrawable);
return;
} else if (element == page) {
drawable.Color(BarSelectedItemColor.ToAndroid());
} else {
drawable.Color(BarItemColor.ToAndroid());
}
menuItem.SetIcon(drawable);
}
GetCombinedDrawable
private Drawable GetCombinedDrawable(IconDrawable iconDrawable)
{
var displayMetrics = Resources.DisplayMetrics;
GradientDrawable circleDrawable = new GradientDrawable();
circleDrawable.SetColor(Helpers.Resources.Green.ToAndroid());
circleDrawable.SetShape(ShapeType.Oval);
circleDrawable.SetSize((int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 500, displayMetrics), (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 500, displayMetrics));
circleDrawable.Alpha = 1;
var inset = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 140, displayMetrics);
var bottomInset = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 40, displayMetrics);
LayerDrawable finalDrawable = new LayerDrawable(new Drawable[] { circleDrawable, iconDrawable });
finalDrawable.SetLayerHeight(1, iconDrawable.IntrinsicHeight);
finalDrawable.SetLayerWidth(1, iconDrawable.IntrinsicWidth);
finalDrawable.SetLayerInset(1, inset, inset, inset, inset + bottomInset);
finalDrawable.SetLayerInsetBottom(0, bottomInset);
finalDrawable.ClearColorFilter();
return finalDrawable;
}
正如您在为圆圈创建的GradientDrawable中所见，我将其颜色设置为我的绿色(我有一个名为Resources的自定义类.这不是Android Resources类).
As you can see in the GradientDrawable that I'm creating for the circle, I am setting it's color to my Green color(I have a custom class called Resources..that's not the Android Resources class).
这就是我被困住的地方.我将可绘制的圆设置为绿色，但是一旦在BottomNavigationView中，它的颜色将始终与其他图标的未选中/选中的颜色匹配.
So that's where I'm stuck. I am setting the circle drawable to having a green color, but once in the BottomNavigationView, it's color always matches the unselected/selected colors of the other icons.
希望克服最后一个问题.感谢您的帮助.
Hoping to get past this final issue. Thanks for any help.
推荐答案
BottomNavigationView比其iOS实现困难得多.我做了一些研究，看您所提出的要求是否可行，然后当我在Android原生平台上看到它时，我开始思考实现它的方法.
BottomNavigationView is painfully more difficult than its iOS implementation. I did some research to see if what you were asking was possible, and then when I saw it in Android native, I started thinking of ways to make it happen.
要应对最后一个挑战，您每次必须根据底部导航视图的索引以编程方式更改所选的色调/颜色.
To implement your last challenge, you would have to programmatically change the selected tint/color every time depending on the index of the bottom navigation view.
这篇关于Android BottomNavigationView一个选项卡，具有不同的未选中/选中的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
