美文网首页
抽屉导航 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后加上小红

    利用Navigation导航组件配合DrawerLayout和NavigationView实现APP的抽屉导航真的...

  • Android 导航

    一.导航抽屉Navigation Drawer 想必用过Android的人都熟悉导航抽屉,这算是一个比较经典的导航...

  • RN抽屉导航

    抽屉导航

  • 移动导航类型

    tab 导航 抽屉导航 list导航 九宫格导航 复合导航

  • cocos2d-js 游戏界面

    1. 按钮 (MenuItem) MenuItem 封装了按钮的基本功能,点击后的回调处理 MenuItemSpr...

  • App导航设计模式

    1.抽屉式导航 抽屉式导航就是当前比较流行的导航样式,是应用选择比较多的一种导航方式,这种导航的核心思想就是隐藏,...

  • 手机界面导航设计详解之抽屉式导航

    接下来,我将结合抽屉导航和具体的应用来进行实例分析。 1.抽屉式导航的特点 抽屉式导航将部分信息内容进行隐藏,突出...

  • DrawerLayout笔记

    一. 什么是DrawerLayout(抽屉式导航栏) 抽屉式导航栏是一个面板,它将应用的主要导航选项显示在屏幕左边...

  • Flutter的抽屉Drawer

    Drawer 抽屉分为左抽屉(drawer)和右侧抽屉(endDrawer) 缺省时可点击导航栏左侧按钮

  • NavigationView(导航抽屉)

    NavigationView(导航抽屉)做一个简单的侧滑菜单 1.activity_main.xml布局如下: ...

网友评论

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

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