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

BottomNavigationMenu上特定项目的外观/样式不同

1 个答案: