web-dev-qa-db-ja.com

DrawerLayoutのNavigationViewで未読通知カウントを設定する方法は？

1つ作成しました NavigationView inside DrawerLayout using Android Design Support Library

 <Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
     xmlns:app="http://schemas.Android.com/apk/res-auto"
     Android:id="@+id/drawer_layout"
     Android:layout_width="match_parent"
     Android:layout_height="match_parent"
     Android:fitsSystemWindows="true">

     <!-- other views -->

     <Android.support.design.widget.NavigationView
         Android:id="@+id/navigation"
         Android:layout_width="wrap_content"
         Android:layout_height="match_parent"
         Android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
 </Android.support.v4.widget.DrawerLayout>

my_navigation_items.xml

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <group Android:checkableBehavior="single">
        <item
            Android:id="@+id/bookmarks_drawer"
            Android:icon="@drawable/ic_drawer_bookmarks"
            Android:title="@string/bookmarks" />
        <item
            Android:id="@+id/alerts_drawer"
            Android:icon="@drawable/ic_drawer_alerts"
            Android:title="@string/alerts" />
        <item
            Android:id="@+id/settings_drawer"
            Android:icon="@drawable/ic_drawer_settings"
            Android:title="@string/settings" />
    </group> 
</menu>

次に、次の画像のようにNavigationViewの各アイテムに未読通知カウンターを設定します。

unread notification counter

NavigationViewの項目に未読通知カウンターを設定する方法

androidandroid-support-librarydrawerlayoutandroid-design-librarynavigationview
26
Priyank Patel

回答の更新：

サポートライブラリ23.1.1以降で_app:actionLayout_を使用すると、次のようなカスタムレイアウトがサポートされます。

以下のようなカスタムカウンターレイアウトを作成します。

menu_counter.xml：

_<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:gravity="center_vertical"
    Android:textAppearance="@style/TextAppearance.AppCompat.Body2" />
_

Xmlのドロワーメニュー項目でそれを参照します。

menu/drawer.xml：

_<item
    Android:id="@+id/navigation_drawer_item_1"
    Android:icon="@drawable/ic_menu_1"
    Android:title="@string/navigation_drawer_item_1"
    app:actionLayout="@layout/menu_counter"
    />
_

app名前空間を使用する必要があることに注意してください。Androidは使用しないでください。

または、MenuItem.setActionView()メソッドを使用して手動でアクションビューを設定できます。

以下のコードのようにメニュー項目を見つけてカウンターを設定します。

_private void setMenuCounter(@IdRes int itemId, int count) {
    TextView view = (TextView) navigationView.getMenu().findItem(itemId).getActionView();
    view.setText(count > 0 ? String.valueOf(count) : null);
}
_

_Android 2.x_バージョンをサポートする必要がある場合は、MenuItemCompatを使用する必要があることに注意してください。

前の回答（古いバージョンの場合）：

以下のコードのようにListView内のNavigationViewで解決しました...

_<Android.support.design.widget.NavigationView
    Android:id="@+id/my_courses_nav_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header" >

    <FrameLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_marginTop="150dp" > <!-- Give layout margin top according to "headerLayout" height -->

        <ListView
            Android:id="@+id/left_drawer"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@Android:color/white"
            Android:cacheColorHint="@Android:color/transparent"
            Android:choiceMode="singleChoice"
            Android:divider="@Android:color/transparent"
            Android:dividerHeight="0dp" />

    </FrameLayout>
</Android.support.design.widget.NavigationView>
_

アクティビティセットのリストアイテムは次のとおりです...

_    private final String[] mMenuTitles = { getResources().getString(R.string.bookmarks), getResources().getString(R.string.alerts), getResources().getString(R.string.settings)  };
    private final int[] mMenuIconId = { R.drawable.ic_drawer_bookmarks, R.drawable.ic_drawer_alerts, R.drawable.ic_drawer_settings };


    ListView mDrawerList = (ListView) findViewById(R.id.left_drawer);
    mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

    private ArrayList<SlideMenuItem> drawerItemList = new ArrayList<SlideMenuItem>();           
    for( int i = 0; i < mMenuTitles.length; i++ ) {
        SlideMenuItem item = new SlideMenuItem();
        item.setTitle(mMenuTitles[i]);
        item.setIconID(mMenuIconId[i]);
        // item..setUnread(5) //set or update unread count & notify dataset changed to adapter
        drawerItemList.add(item);
    }

    MenuAdapter mMenuAdapter = new MenuAdapter( MyCoursesActivity.this, R.layout.drawer_list_item, drawerItemList);
    mDrawerList.setAdapter(mMenuAdapter);
_

ナビゲーションドロワーのListViewのクリックリスナー...

_private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        try {
            mDrawerLayout.closeDrawers();
            SlideMenuItem item =  (SlideMenuItem) parent.getItemAtPosition(position);
            switch (item.getIconId()) {

                case R.drawable.ic_drawer_bookmarks: {

                }
                break;
                case R.drawable.ic_drawer_alerts: {

                }
                break;
                case R.drawable.ic_drawer_settings: {

                }
                break;                  
                default: {
                }
                break;
            }
        } catch (Exception e) {             
        }

    }
}
_

MenuAdapter..Java

_public class MenuAdapter extends ArrayAdapter<SlideMenuItem> {

private Activity activity;
private List<SlideMenuItem> itemList;
private SlideMenuItem item;
private int row;

public MenuAdapter(Activity act, int resource, List<SlideMenuItem> arrayList) {
    super(act, resource, arrayList);
    this.activity = act;
    this.row = resource;
    this.itemList = arrayList;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    View view = convertView;
    ViewHolder holder;
    if (view == null) {
        LayoutInflater inflater = (LayoutInflater) activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = inflater.inflate(row, null);

        holder = new ViewHolder();
        holder.tvTitle = (TextView) view.findViewById(R.id.menu_title);
        holder.imgView = (ImageView) view.findViewById(R.id.menu_icon);
        holder.tvUnread = (TextView) view.findViewById(R.id.unread_count);
        view.setTag(holder);
    } else {
        holder = (ViewHolder) view.getTag();
    }

    if ((itemList == null) || ((position + 1) > itemList.size()))
        return view;

    item = itemList.get(position);

    holder.tvTitle.setText(item.getTitle());
    holder.imgView.setImageResource(item.getIconId());
    if( item.getUnreadCount() > 0 ) {
        holder.tvUnread.setVisibility(View.VISIBLE);
        holder.tvUnread.setText(item.getUnread());
        if( MyCoursesActivity.DRAWER_MENU_ALERTS_POSITION == position ) {
            holder.tvUnread.setBackgroundResource(R.drawable.round_unread_count_bg_red);    
        }
        else {
            holder.tvUnread.setBackgroundResource(R.drawable.round_unread_count_bg_green);
        }
    }
    else {
        holder.tvUnread.setVisibility(View.GONE);
    }
    return view;
}

public class ViewHolder {

    public TextView tvTitle;
    public ImageView imgView;
    public TextView tvUnread;
}

}
_

drawer_list_item.xml

_<LinearLayout 
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent" 
Android:layout_height="match_parent" 
Android:orientation="vertical">

<RelativeLayout
Android:id="@+id/drawar_list_view"
Android:layout_width="match_parent"
Android:layout_height="match_parent" >

<ImageView
    Android:id="@+id/menu_icon"
    Android:layout_width="20dp"
    Android:layout_height="20dp"
    Android:layout_alignParentLeft="true"
    Android:layout_centerVertical="true"
    Android:layout_marginLeft="16dp"
    Android:layout_marginRight="16dp"
    Android:gravity="center_vertical"
    Android:src="@drawable/ic_drawer" />

<TextView
    Android:id="@+id/menu_title"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_centerVertical="true"
    Android:layout_toLeftOf="@+id/unread_count"
    Android:layout_toRightOf="@+id/menu_icon"
    Android:minHeight="?attr/listPreferredItemHeightSmall"
    Android:paddingLeft="16dp"
    Android:paddingRight="16dp"
    Android:text="About Us"
    Android:gravity="center_vertical"
    Android:textAppearance="?android:attr/textAppearanceSmall"
    Android:textColor="@Android:color/black" />

<TextView
    Android:id="@+id/unread_count"
    Android:layout_width="20dp"
    Android:layout_height="20dp"
    Android:layout_alignParentRight="true"
    Android:layout_centerHorizontal="true"
    Android:layout_centerVertical="true"
    Android:layout_marginLeft="16dp"
    Android:layout_marginRight="16dp"
    Android:gravity="center" 
    Android:text="99+"
    Android:textColor="@Android:color/white"
    Android:textSize="10sp"
    Android:visibility="gone" />
_

SlideMenuItem.Java

_public class SlideMenuItem {

private Bitmap icon;
private String title;
private String unread;
private int iconID;

public String getTitle() {
    return title;
}

public void setTitle(String title) {
    this.title = title;
}

public Bitmap getIcon() {
    return icon;
}

public void setIcon(Bitmap icon) {
    this.icon = icon;
}

public int getIconId() {
    return iconID;
}

public void setIconID(int icon) {
    this.iconID = icon;
}

public String getUnread() {
    return unread;
}

public int getUnreadCount() {
    int count = Flinnt.INVALID;
    try {
        if( null != unread ) {
            count = Integer.parseInt(unread);
        }
    } catch (Exception e) {
    }
    return count;
}

public void setUnread(String unread) {
    this.unread = unread;
}

}
_
54
Priyank Patel

NavigationViewは、マテリアル設計ガイドラインに準拠した基本的なナビゲーションドロワーを簡単に実装できるように設計されています。

基本的なナビゲーションドロワー（つまり、テキストナビゲーションアイテムとオプションのヘッダーを備えたもの）以外のものが必要な場合は、ナビゲーションドロワー用に独自のレイアウトを作成する必要があります。

5
Tanis.7x

このウェブサイトでこの簡単な実装ソリューションを見つけました https://Android.jlelse.eu/Android-adding-badge-or-count-to-the-navigation-drawer-84c93af1f4d9 手順に従ってください未満

ステップ1：Android Studioプロジェクトを作成し、空のアクティビティを選択する代わりに[Navigation Drawer Activity]を選択します。

ステップ2：「actionViewClass」属性をナビゲーションドロワーメニューに追加します（例：menu/youractivityname_drawer.xml）

<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_camera"
        Android:icon="@drawable/ic_menu_camera"
        Android:title="Import" />
    <item
        Android:id="@+id/nav_gallery"
        app:actionViewClass="Android.widget.TextView"
        Android:icon="@drawable/ic_menu_gallery"
        Android:title="Gallery" />
    <item
        Android:id="@+id/nav_slideshow"
        app:actionViewClass="Android.widget.TextView"
        Android:icon="@drawable/ic_menu_slideshow"
        Android:title="Slideshow" />
    <item
        Android:id="@+id/nav_manage"
        Android:icon="@drawable/ic_menu_manage"
        Android:title="Tools" />
</group>

ステップ3：Navigation Drawerメニュー項目を宣言し、バッジ値で項目を初期化します。メインアクティビティで、ナビゲーションドロワーのメニュー項目を次のように宣言します

//Create these objects above OnCreate()of your main activity
TextView slideshow,gallery;

//These lines should be added in the OnCreate() of your main activity
 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
 navigationView.setNavigationItemSelectedListener(this);

gallery=(TextView) MenuItemCompat.getActionView(navigationView.getMenu().
        findItem(R.id.nav_gallery));

slideshow=(TextView) MenuItemCompat.getActionView(navigationView.getMenu().
        findItem(R.id.nav_slideshow));

//This method will initialize the count value
initializeCountDrawer();

ステップ5：必要に応じて、initializeCountDrawer（）を初期化します。また、ナビゲーションドロワーメニュー項目のカウントまたはバッジ値を更新するためにも使用できます。

private void initializeCountDrawer(){

   //Gravity property aligns the text
   gallery.setGravity(Gravity.CENTER_VERTICAL);
   gallery.setTypeface(null, Typeface.BOLD);
   gallery.setTextColor(getResources().getColor(R.color.colorAccent));
   gallery.setText("99+");
   slideshow.setGravity(Gravity.CENTER_VERTICAL);
   slideshow.setTypeface(null,Typeface.BOLD);                                                                                                                    slideshow.setTextColor(getResources().getColor(R.color.colorAccent));
  //count is added     
  slideshow.setText("7");
}

ソース： https://Android.jlelse.eu/Android-adding-badge-or-count-to-the-navigation-drawer-84c93af1f4d9

5
Seunope

NavigationViewを削除し、ナビゲーションドロワー要素をフラグメントとして、つまりDarawerLayoutファイルに追加することをお勧めします

<Android.support.v4.widget.DrawerLayout    xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context=".MainActivity">

<LinearLayout

<fragment
    Android:id = "@+id/fragment_navigation_drawer"
    Android:layout_width="280dp"
    Android:layout_height="match_parent"
    Android:layout_gravity = "start"
    Android:layout= "@layout/fragment_navigation_drawer"
    Android:name="com.your_package.NavigationDrawerFragment"
    tools:layout="@layout/fragment_navigation_drawer" />

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

次に、フラグメントのクラスを作成し、ドロワーの要素を含むクラスのリソースファイルを作成します。

public class NavigationDrawerFragment extends Fragment {
...

@Override
public View onCreateView(final LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View rootView = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
...

その後、このフラグメントをメインアクティビティに追加できます。

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    navigationDrawerFragment = (NavigationDrawerFragment)
            getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
    navigationDrawerFragment.setUp(R.id.fragment_navigation_drawer,mDrawerLayout, toolbar);

「セットアップ」メソッドはフラグメント内にあり、それを初期化する場所です。

public void setUp(int fragmentId, DrawerLayout drawerLayout, final Toolbar toolbar) {

    containerView = getActivity().findViewById(fragmentId);
    mDrawerLayout = drawerLayout;
    mActionBarDrawerToggle = new ActionBarDrawerToggle(
            getActivity(), mDrawerLayout, toolbar,
            R.string.navigation_drawer_open, R.string.navigation_drawer_close
    ) {
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);

            }
            getActivity().invalidateOptionsMenu();

        }

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);


        }

}

引き出しのレイアウトファイルで、未読通知を設定する要素を追加してから、向きを垂直に設定する相対レイアウトを追加します。

<RelativeLayout
    Android:layout_below="@+id/drawer_layout_unread_notif"
    Android:orientation="vertical"
    Android:layout_width="match_parent"
    Android:layout_height="fill_parent">

この垂直相対レイアウト内で、要素の別の相対レイアウトを追加します。これは、投稿した画像のように「アラート」セクションを追加する場所です。この相対的なレイアウトは水平、つまり.

<RelativeLayout
        Android:layout_below="@+id/drawer_items_1"
        Android:orientation="horizontal"
        Android:background="@drawable/drawer_selector"
        Android:clickable="true"
        Android:layout_width="match_parent"
        Android:id="@+id/drawer_items_2"
        Android:layout_height="48dp">

        <ImageView
            Android:src="@drawable/ic_notification"
            Android:padding="8dp"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_marginLeft="16dp"
            Android:layout_marginRight="16dp"
            Android:layout_centerVertical="true"
            Android:layout_gravity="center_vertical"/>

        <TextView
            Android:text="Notifications"
            Android:textColor="@color/primary_text"
            Android:layout_marginLeft="72dp"
            Android:layout_centerVertical="true"
            Android:layout_gravity="center_vertical"
            Android:padding="8dp"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" />

        <TextView
            Android:background="@color/red"
            Android:layout_marginRight="10dp"
            Android:id="@+id/drawer_notifications"
            Android:layout_alignParentRight="true"
            Android:padding="8dp"
            Android:layout_centerVertical="true"
            Android:textColor="@color/white"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" />


    </RelativeLayout>

このすぐ上のコードの最後のtextview要素には、未読通知用に追加するカウンターが含まれます。 xmlでは、色が赤に設定されています。ここから、（oncreateview内の）IDを使用してナビゲーションドロワーフラグメントクラスでその参照を取得し、カウンターを設定します。

お役に立てれば！

2
Gabriel Wamunyu

このサポートは、デザインライブラリの23で追加されたと思います。

メニューXMLファイルで、actionLayout XMLプレフィックスにappを設定します。

<menu 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"
tools:context="com.example.user.myapplication.MainActivity" >
    <item Android:id="@+id/menu_one"
        Android:checkable="true"
        Android:title="Unread items"
        app:actionLayout="@layout/unread_items"
        />
</menu>

次に、おそらくカスタムビューまたはフラグメントを使用してデータをフェッチし、レイアウトに含まれるメニューに未読アイテムを計算させます。

0
newfivefour