android - 右側にカウンターがある NavigationView メニュー項目

Question

新しいDesign Support Libraryの新しいNavigationViewは、非常にうまく機能します。

オプションを表示するために「menu-items」を使用します。

しかし、メニュー項目の右側にカウンターを表示するにはどうすればよいでしょうか?

この写真のように:

または、GMailアプリのように。

Answer 1

appcompat-v7 のバージョン 23 以降でNavigationViewはアクション ビューがサポートされているため、カウンターを自分で実装するのは非常に簡単です。

1. カウンター レイアウトを作成します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" />
   

2. ドロワー メニュー xml で参照します。つまり、次のようになりますmenu/drawer.xml。

   <item
       ...
       app:actionLayout="@layout/menu_counter" />
   

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

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

3. メニュー項目を見つけてカウンターを設定します。

   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を使用する必要があることに注意してください。

Answer 2

ステップ 1 : グループ アイテムを特定し、以下のように「app:actionViewClass=android.widget.TextView」を追加します。

<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_recorder"
        app:actionViewClass="android.widget.TextView"
        android:icon="@drawable/ic_menu_gallery"
        android:title="Gallery" />
    <item
        android:id="@+id/nav_night_section"
        app:actionViewClass="android.widget.TextView"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="Slideshow" />
</group>

ステップ 2: Navigation Drawer メニュー項目を宣言し、バッジ値で項目を初期化する

//Create these objects above OnCreate()of your main activity
TextView recorder,nightSection;

//These lines should be added in the OnCreate() of your main activity
recorder =(TextView) MenuItemCompat.getActionView(navigationView.getMenu().
        findItem(R.id.nav_recorder));

recordSection=(TextView) MenuItemCompat.getActionView(navigationView.getMenu().
        findItem(R.id.nav_night_section));

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

ステップ 3: initializeCountDrawer() は、必要に応じていつでも呼び出すことができます。また、ナビゲーション ドロワー メニュー項目のカウントまたはバッジの値を更新するためにも使用できます。

private void initializeCountDrawer(){

    //Gravity property aligns the text
    recorder.setGravity(Gravity.CENTER_VERTICAL);
    recorder.setTypeface(null, Typeface.BOLD);
    recorder.setTextColor(getResources().getColor(R.color.colorAccent));                
    recorder.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");
}