具有自定义项(actionLayout)的底部导航视图

17

我想要在新的BottomNavigationView中添加自定义项。

有很多教程可以向普通的导航视图添加自定义视图,但我找不到关于底部导航视图的任何内容。

这是我的视图。

   <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/menu_main" />

这是菜单

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

<item
    android:id="@+id/menu_one"
    android:icon="@drawable/ic_tab_one"
    android:title="one" />
<item
    android:id="@+id/menu_two"
    app:actionLayout="@layout/item_action_notification"
    android:title="two" />

正如您所看到的,我像平常一样放置了 actionLayout 标签,但它并没有显示。

有什么想法吗?谢谢。


2
Manza,你找到这个问题的解决方案了吗?我也遇到了同样的情况。我尝试使用动作布局和动作视图类,但什么都没有显示出来。 - aNoviceGuy
@aNoviceGuy 很遗憾,还没有。 - Manza
你知道如何在它们之间添加分隔符吗?> - Anshul Tyagi
@AnshulTyagi,将菜单项包装在<group>中会在菜单项之间显示分隔符。 - azizbekian
@Manza,你找到解决方案了吗? - Kaustubh Bhagwat
不是的,我还没有尝试Pramila的解决方案。 - Manza
1个回答

27

希望以下解决方案能够帮助到您。

  1. 创建一个布局:layout/_custom_cart_item_layout.xml

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

<TextView
android:id="@+id/cart_badge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginLeft="10dp"
android:background="@drawable/circle"
android:backgroundTint="@color/colorAccent"
android:gravity="center"
android:text="0"
android:textColor="@android:color/white"
android:textSize="12sp" />

</FrameLayout>
  • drawable/circle

  • <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="@color/white"/>
    <size android:width="40dp" android:height="40dp" />
    </shape>
    
  • MainActivity: 布局/main_activity.xml

  • <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.MainActivity">
    
    <android.support.design.widget.BottomNavigationView
    android:id="@+id/bot_nav"
    android:layout_width="0dp"
    android:layout_height="56dp"
    android:background="@color/white"
    android:elevation="2dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_menu" />
    
    </android.support.constraint.ConstraintLayout>
    
  • 菜单: menu/bottom_menu.xml

  • <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item
    android:id="@+id/menu_home"
    android:icon="@drawable/home24"
    android:title="Home" />
    
    <item
    android:id="@+id/menu_cart"
    android:icon="@drawable/shoppingcart24"
    android:title="Cart" />
    <item
    android:id="@+id/menu_acct"
    android:icon="@drawable/user24"
    android:title="Account" />
    </menu>
    
    在你的MainActivity类中,在onCreate方法中。
    BottomNavigationView mbottomNavigationView =findViewById(R.id.bot_nav);
    
    BottomNavigationMenuView mbottomNavigationMenuView =
    (BottomNavigationMenuView) mbottomNavigationView.getChildAt(0);
    
    View view = mbottomNavigationMenuView.getChildAt(1);
    
    BottomNavigationItemView itemView = (BottomNavigationItemView) view;
    
    View cart_badge = LayoutInflater.from(this)
    .inflate(R.layout._custom_cart_item_layout,
     mbottomNavigationMenuView, false);
    
    itemView.addView(cart_badge);
    

    输出:图片

    希望它对您也有类似的作用。

    谢谢。


    1
    非常抱歉,我误操作将您的答案投票下来了,实际上它是有效的。 - Kaustubh Bhagwat
    3
    没关系,关于投票的问题,你理解得很对,谢谢 :) - Pramila Shankar
    1
    谢谢 @Sachin - Pramila Shankar
    1
    新增加的视图没有显示在中心位置,它没有采取它所添加的标签的确切位置。 - Shubham Mogarkar
    1
    这个在我的当前应用程序主题—— Appcompat 主题下完美地运行了。其他解决方案需要 Material 主题。 - Trupti Nasit
    显示剩余2条评论

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接