底部导航菜单上特定项目的不同外观/样式

Question

我目前正在构建一个 Xamarin Android 应用程序，并且我正在尝试自定义 BottomNavigationView。

我希望能够通过以下方式更改 BottomNavigationView 中特定菜单项的样式：

到这种风格：

我看过以下问题：Different look/style for specific menu item on ActionBar，但它似乎更针对操作栏而不是底部导航。

我猜这要么需要实现自定义控件，要么需要使用反射来达到预期的结果？任何实现此类功能的第三方库都不是特别有用，因为它们中的大多数都是为原生 android 而不是 xamarin 编写的。

非常感谢 Xamarin C# 或 Native Java（我可以转换）的任何帮助。

目前我尝试以编程方式在菜单项上设置自定义操作布局：

var nav = FindViewById<BottomNavigationView>(R.Id.bottom_navigation);

var result = nav.Menu.GetItem(2);

result.SetTitle(null);
result.SetIcon(null);

var image = new ImageButton(this);

image.SetImageDrawable(GetDrawable(R.Drawable.ic_action_grade));
image.SetColorFilter(Android.Graphics.Color.Black);

result.SetActionView(image);

通过指定自定义布局，使用菜单项的app:actionLayout 属性。来源：https://www.techrepublic.com/article/pro-tip-use-a-custom-layout-to-badge-androids-action-bar-menu-items/

view_accent_grade.axml（动作布局）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

  <ImageView
      android:id="@+id/ic_action_grade"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center"
      android:src="@drawable/ic_action_grade" />

</RelativeLayout>

menu.axml（菜单布局）

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/navigation_home"
        android:title="@string/action_home"
        android:icon="@drawable/ic_action_home" />

    <item
        android:id="@+id/navigation_events"
        android:title="@string/action_events"
        android:icon="@drawable/ic_action_event" />

    <item
        android:id="@+id/navigation_car_of_the_month"
        app:showAsAction="ifRoom"
        app:actionLayout="@layout/view_accent_grade" /> <!-- Specifying App Layout here --> 

    <item
        android:id="@+id/navigation_photos"
        android:title="@string/action_photos"
        android:icon="@drawable/ic_action_photo" />

    <item
        android:id="@+id/navigation_more"
        android:title="@string/action_more"
        android:icon="@drawable/ic_action_more_horiz" />

</menu>

Answer 1

您最好自己编写自定义底部导航视图，而不是尝试在BottomNavigationView 控件的约束中工作。这是一个简单的例子：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey_5">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:background="@drawable/bg_gradient_soft" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@android:color/white"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/spacing_medium">

                <ImageButton
                    android:layout_width="?attr/actionBarSize"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:onClick="clickAction"
                    android:tint="@color/teal_600"
                    app:srcCompat="@drawable/ic_apps" />

            </LinearLayout>

            <View
                android:layout_width="?attr/actionBarSize"
                android:layout_height="0dp" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/spacing_medium">

                <ImageButton
                    android:layout_width="?attr/actionBarSize"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:onClick="clickAction"
                    android:tint="@color/teal_500"
                    app:srcCompat="@drawable/ic_local_offer" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="15dp"
        android:clickable="true"
        android:onClick="clickAction"
        android:tint="@android:color/white"
        app:backgroundTint="@color/teal_500"
        app:elevation="2dp"
        app:fabSize="normal"
        app:rippleColor="@color/deep_orange_400"
        app:srcCompat="@drawable/ic_shopping_cart" />

</RelativeLayout>

结果：

否则，您可以遍历布局并将您想要的任何视图样式应用于BottomNavigationView，如以下答案：

Changing BottomNavigationView's Icon Size

编辑：

有一个扩展库绑定到BottomNavigationView，其中包含您正在尝试执行的操作的示例：

https://github.com/NAXAM/bottomnavigationviewex-android-binding