Android BottomNavigationView 具有不同未选择/已选择颜色的一个选项卡

Question

我正在尝试匹配这样的设计..

请注意，“选定的标签颜色色调”是蓝色的，但中心标签的图标应该始终是中间有白色时钟的绿色圆圈。

我已经尝试了很多东西。首先尝试通过使用具有绿色圆圈和时钟 PNG 资源的图层列表 XML 资源以编程方式执行此操作，但根本不起作用。然后我让设计师给了我完整的图标（时钟和绿色圆圈），但现在我遇到了这个问题..

（未选中）

(已选)

我无法找到正确的术语以在 Google 上搜索以解决此问题。

最后，我需要选择的选项卡颜色为蓝色，但我需要中心选项卡图标始终是没有额外颜色的实际图标（本质上它需要看起来与 .png 完全一样）。

PS：我正在使用 Xamarin.Forms、FreshMvvm 和 FreshTabbedFONavigationContainer。但是，通过 Renderer，我可以直接访问 BottomNavigationView 和所有其他原生 Android 组件。因此，解决方案不必是 Xamarin 解决方案。java/kotlin 解决方案也可以使用，我可以将其转换为 Xamarin。

======================

编辑：

======================

所以我使用下面的安德烈斯卡斯特罗代码得到了很多进一步的信息，但我仍然遇到与以前相同的问题。使用下面 Andres 的代码，我切换回使用 FontAwesome 作为图标（效果很好），但这样做意味着我需要使用 aLayerDrawable创建圆形/图标中心选项卡图标。

所以这是我到目前为止..

未选择的中心图标

选定的中心图标

如您所见，未选择时中心图标仍为灰色，选择时为蓝色（其他 4 个图标的正确选择/未选择颜色）。

这是我迄今为止与中心图标有关的代码..

更新选项卡图标

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);
    }
}

更新标签图标

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 的自定义类......这不是 AndroidResources类）。

所以这就是我被困的地方。我将圆形 drawable 设置为绿色，但是一旦在 BottomNavigationView 中，它的颜色总是与其他图标的未选择/已选择颜色相匹配。

希望通过这个最后的问题。谢谢你的帮助。

Answer 1

BottomNavigationView 比其 iOS 实现要困难得多。我做了一些研究，看看你所要求的是否可行，然后当我在 Android 原生中看到它时，我开始思考如何实现它。

要实现最后一个挑战，您必须根据底部导航视图的索引每次以编程方式更改所选的色调/颜色。