如何在NavigationView中设置徽章?

时间:2016-07-10 15:25:19

标签: java android xml android-navigationview

我使用desin lib中的NavigationDrawer

compile 'com.android.support:design:24.0.0'

XML

....

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main_second"
    app:menu="@menu/activity_third_drawer" />

....

我正在设置菜单

app:menu="@menu/activity_third_drawer"

菜单有XML

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

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_inbox"
        android:icon="@drawable/ic_mail_outline_white"
        android:title="@string/inbox" />
    <item
        android:id="@+id/nav_gallery"
        android:icon="@drawable/ic_close_24dp"
        android:title="@string/gallery" />
    <item
        android:id="@+id/nav_slideshow"
        android:icon="@drawable/ic_close_24dp"
        android:title="@string/slideshow" />
    <item
        android:id="@+id/nav_manage"
        android:icon="@drawable/ic_close_24dp"
        android:title="@string/tools" />
</group>

<item android:title="@string/about_app">
    <menu>
        <item
            android:id="@+id/nav_about"
            android:icon="@drawable/ic_close_24dp"
            android:title="@string/about1" />
    </menu>
</item>
</menu>

最终它看起来像这样

введите сюда описание изображения

但我需要在邮件发送到收件箱时将其标记为NavigationDrawer

喜欢这个

введите сюда описание изображения

有很多deffirent libs可以帮助解决这个问题,我选择了this one

此lib可以在任何地方附加徽章,但没有一个样本锄头可以将其附加到<item>。最接近的示例是如何附加到XML

<com.readystatesoftware.viewbadger.BadgeView
            android:id="@+id/badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="OK" />

但我仍然无法想出如何将其附加到<item>

也许有另一种解决方案如何制作呢?

我试过这种方式

View menuItemView = MenuItemCompat.getActionView(navigationView.getMenu().findItem(R.id.nav_inbox));
    BadgeView badge = new BadgeView(context, menuItemView);
    badge.setText("1");
    badge.show();

但每次我得到menuItemView = null

然后我尝试过这种方式:

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    View menuItemView = MenuItemCompat.getActionView(menu.findItem(R.id.nav_inbox));
    BadgeView badge = new BadgeView(context, menuItemView);
    badge.setText("1");
    badge.show();

    return super.onPrepareOptionsMenu(menu);
}

但它是相同的menuItemView = null

Debag

введите сюда описание изображения

我做错了什么?

修改

我的NavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main_second"
    app:menu="@menu/activity_third_drawer" />

我的menu

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

<group android:checkableBehavior="single">

    <item
        android:id="@+id/nav_inbox"
        android:icon="@drawable/ic_inbox_checked"
        android:title="Inbox"
        app:actionLayout="@layout/badge" />

</group>

<item android:title="@string/about_app">
    <menu>
        <item
            android:id="@+id/nav_about"
            android:icon="@drawable/ic_close_24dp"
            android:title="@string/about1" />
    </menu>
</item>
</menu>

我的badge

<?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">

<TextView
    android:id="@+id/textMenuItemCount"
    android:layout_width="wrap_content"
    android:text="rrrr"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:textColor="@android:color/holo_blue_light"
    android:textStyle="bold"
    android:textSize="16sp"
    android:alpha="0.6"/>
</RelativeLayout>

这是我的代码

@Override
protected void onResume() {
    super.onResume();
    NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
    MenuItem item = navView.getMenu().findItem(R.id.nav_inbox);
    MenuItemCompat.setActionView(item, R.layout.badge);
    RelativeLayout notifCount = (RelativeLayout) MenuItemCompat.getActionView(item);
    TextView tv = (TextView) notifCount.findViewById(R.id.textMenuItemCount);

    String count = "4";
    if (count != null) {
        tv.setText(count);
    }else{
        tv.setText("");
        item.setEnabled(false);
    }
}

这是截图debag

enter image description here

这是我最后得到的

enter image description here

它没什么,但根据调试模式一切正常,没有任何错误,但我看不到任何徽章。

我做错了什么?

1 个答案:

答案 0 :(得分:3)

使用菜单项的自定义布局。

activity_layout.xml

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/myCoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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


        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                />
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="true"
            android:focusableInTouchMode="true">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="top">

                <android.support.v7.widget.RecyclerView
                    android:layout_height="match_parent"
                    android:layout_width="match_parent"
                    android:id="@+id/rv_venues"
                    android:layout_below="@+id/linearLayout" />

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/linearLayout"
                    android:gravity="right|end"
                    android:padding="0dp"
                    android:visibility="visible"
                    android:layout_alignParentRight="false">

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:id="@+id/btnSearchVenues"
                        android:background="@drawable/custom_btn_overlay"
                        android:src="@drawable/ic_action_search"
                        android:layout_weight="1"
                        android:paddingRight="10dp"
                        android:paddingLeft="10dp" />

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:id="@+id/btnSort"
                        android:background="@drawable/custom_btn_overlay"
                        android:src="@drawable/ic_action_filter"
                        android:layout_weight="1"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp" />

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:id="@+id/btnMap"
                        android:background="@drawable/custom_btn_overlay"
                        android:src="@drawable/ic_dialog_map"
                        android:layout_weight="1"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp" />

                </LinearLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/poweredBy"
                    android:id="@+id/textView9"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:textSize="8sp"
                    android:padding="2dp"
                    android:textStyle="bold"
                    android:textColor="#793f6edc" />

            </RelativeLayout>

            <android.support.design.widget.NavigationView
                android:id="@+id/navView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:background="@android:color/white"
                app:headerLayout="@layout/nav_header"
                app:menu="@menu/menu_drawer" >
        </android.support.design.widget.NavigationView>


        </android.support.v4.widget.DrawerLayout>

    </LinearLayout>


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/action_search"
            android:layout_gravity="bottom|right|end"
            android:layout_marginBottom="16dp"
            android:layout_marginRight="16dp"
            android:src="@drawable/pin_map"
            app:elevation="6dp"
            app:borderWidth="0dp"
            app:pressedTranslationZ="12dp"
            app:backgroundTint="@android:color/holo_green_light"
            app:rippleColor="@android:color/holo_green_dark"
            app:fabSize="normal"/>


    </android.support.design.widget.CoordinatorLayout>

menu_drawer.xml

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

        <group android:id="@+id/group_settings_id0">
        <item android:title="@string/btnFriends"
            android:id="@+id/nav_item_friends"
            android:actionLayout="@layout/navlist"
            android:icon="@drawable/ic_action_circles"/>

        <item android:title="@string/btnPhotos"
            android:id="@+id/nav_item_photos"
            android:actionLayout="@layout/navlist"
            android:icon="@drawable/ic_action_camera"/>

        <item android:title="@string/btnCheckins"
            android:id="@+id/nav_item_checkins"
            android:actionLayout="@layout/navlist"
            android:icon="@drawable/ic_action_location"/>
        </group>

        <group android:id="@+id/group_settings_id1">
            <item android:id="@+id/nav_item_find_people"
                android:title="@string/action_find_people"
                android:icon="@drawable/ic_action_search"/>
        </group>

        <group android:id="@+id/group_settings_id2">
            <item android:id="@+id/nav_item_about"
                android:title="@string/action_about"
                android:icon="@drawable/ic_action_info"/>
            <item android:id="@+id/nav_item_help"
                android:title="@string/action_help"
                android:icon="@android:drawable/ic_menu_help"/>
            <item android:id="@+id/nav_item_logout"
                android:title="@string/action_logout"
                android:icon="@drawable/ic_action_exit"/>
        </group>
   </menu>

badge.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:layout_gravity="end"
    android:gravity="center">


    <TextView
        android:id="@+id/textMenuItemCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:textSize="16sp"
        android:alpha="0.6"/>

</RelativeLayout>

在您的活动中:

onCreate方法中的

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mNavigationView = (NavigationView) findViewById(R.id.navView);


mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.app_name,
        R.string.app_name) {

    /**
     * Called when a drawer has settled in a completely closed state.
     */
    public void onDrawerClosed(View view) {
        super.onDrawerClosed(view);
        fab.show();
    }

    /**
     * Called when a drawer has settled in a completely open state.
     */
    public void onDrawerOpened(View drawerView) {
        super.onDrawerOpened(drawerView);
        fab.hide();
    }
};

mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();

//每当您想要更新徽章时都会调用

public void updateNavView(NavigationView navView, int resId, String count){
    MenuItem item = navView.getMenu().findItem(resId); //ex. R.id.nav_item_friends
        //MenuItemCompat.setActionView(item, R.layout.badge);
        RelativeLayout notifCount = (RelativeLayout) MenuItemCompat.getActionView(item);
        TextView tv = (TextView) notifCount.findViewById(R.id.textMenuItemCount);

        if (count != null) {
            tv.setText(count);
        }else{
            tv.setText("");
            item.setEnabled(false);
        }
}

结果是 enter image description here