web-dev-qa-db-ja.com

NavigationViewメニュー項目の右側にカウンターがあります

新しいNavigationViewの新しいDesign Support Libraryは非常に優れた機能を発揮します。

「menu-items」を使用してオプションを表示します。

しかし、メニュー項目のcounterをrightに表示するにはどうすればよいですか？

この写真のように：

enter image description here

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

androidnavigation-drawermaterial-designandroiddesignsupportnavigationview
63
chrisonline

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()メソッドでアクションビューを手動で設定できます。

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

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

125
Alex Vasilkov

私の回避策は、MenuItemの新しいタイトルとして異なる背景を持つSpannableStringを渡すことでした。

私は最善の解決策ではなく、右揃えではないことを知っていましたが、カウンターとしてはうまく機能します。このようなもの：

NavigationView navigation = (NavigationView)findViewById(R.id.navigation);
Menu menuNav = navigation.getMenu();
MenuItem element = menuNav.findItem(R.id.item5);
String before = element.getTitle().toString();

String counter = Integer.toString(5);
String s = before + "   "+counter+" ";
SpannableString sColored = new SpannableString( s );

sColored.setSpan(new BackgroundColorSpan( Color.GRAY ), s.length()-(counter.length()+2), s.length(), 0);
sColored.setSpan(new ForegroundColorSpan( Color.WHITE ), s.length()-(counter.length()+2), s.length(), 0);


element.setTitle(sColored);

カウンターを改善するには、 here 角を丸くする良い答えを見つけることができます

例：

enter image description here

9
marco

NavigationViewのソースを見ると、メニュー項目のカスタムレンダリングは現在サポートされていません（NavigationMenuPresenterおよびNavigationMenuAdapterを参照）。メニュー項目にカスタムフォントを設定したいが、リフレクションを使用しないとできないので、すぐにより多くの機能が公開されることを願っています。

5
Jin

ステップ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");
}
2
Dharma Sai Seerapu

それを行うことができる素晴らしいライブラリがあります- https://github.com/mikepenz/MaterialDrawer 。

1
Loša