美文网首页
抽屉导航 NavigatinView的menuItem后加上小红

抽屉导航 NavigatinView的menuItem后加上小红

作者: 临星hfuu | 来源:发表于2020-11-11 10:25 被阅读0次

    利用Navigation导航组件配合DrawerLayout和NavigationView实现APP的抽屉导航真的是很方便;但是拿到UI的设计图后发现抽屉导航的菜单样式都是自定义的。那默认的样式只是一个 图标 + item标题 + 选中背景 这些。那怎么来处理呢?
    实现效果图:


    消息提醒的蓝色小点.jpg

    利用menuItem 的 actionLayout属性:

    <menu
        ...
        xmlns:app="http://schemas.android.com/apk/res-auto"
        ...>
       <item
            android:id="@+id/navigation_notifications"
            android:icon="@drawable/ic_notifications"
            android:title="@string/title_notifications"
            app:actionLayout="@layout/drawer_menu_item"/>
        ...
    </menu>
    

    注意由于这里我们一般用的都是support支持库或者androidx库所以这里一定要用 app:actionLayout 而不是android:actionLayout。用android:actionLayout会没有任何效果,item的actionView还是null;
    Try app:actionLayout="@layout/menu_header" instead of android:actionLayout="@layout/menu_header" if you are using support libraries.
    而用app:actionLayout 时记得在最外层加上命名空间:xmlns:app="http://schemas.android.com/apk/res-auto"

    其中 drawer_menu_item.xml 为layout文件如下:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical">
        <TextView
            android:id="@+id/msg"
            android:background="@drawable/shape_btn_radius16_clickable"
            android:textColor="@android:color/white"
            android:gravity="center"
            android:layout_width="20dp"
            android:layout_height="20dp"/>
    </LinearLayout>
    

    在页面代码中给item的actionView设置值

     val actionView = binding.navView.menu.findItem(R.id.navigation_notifications).actionView as LinearLayout
     actionView.findViewById<TextView>(R.id.msg).text = "9"
    

    上面我通过viewbinding来拿到NavgationView的,当然也可以findViewById拿到。

    相关文章

      网友评论

          本文标题:抽屉导航 NavigatinView的menuItem后加上小红

          本文链接:https://www.haomeiwen.com/subject/mgfebktx.html