wake-up-neo.com

Wie erstelle ich einen einfachen Trenner in der neuen Navigationsansicht?

Google hat die Variable NavigationView in die Design Support Library Version 22.2.0 eingeführt, mit der Sie sehr einfach mithilfe einer Menüressource eine Schublade erstellen können.

Wie kann ich eine einfache Trennlinie zwischen zwei Elementen erstellen? Das Gruppieren der Elemente funktionierte nicht. Das Erstellen eines Unterelementabschnitts erstellt zwar eine Trennlinie, erfordert jedoch einen Titel, den ich nicht möchte.

Jede Hilfe wäre dankbar.

130
Longi

Alles, was Sie tun müssen, ist eine group mit einer eindeutigen ID zu definieren . Ich habe die Implementierung überprüft, ob die Gruppe andere IDs hat.

Beispielmenü zum Erstellen des Trennzeichens:

<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=".MainActivity">

    <group Android:id="@+id/grp1" Android:checkableBehavior="single" >
        <item
            Android:id="@+id/navigation_item_1"
            Android:checked="true"
            Android:icon="@drawable/ic_home"
            Android:title="@string/navigation_item_1" />
    </group>

    <group Android:id="@+id/grp2" Android:checkableBehavior="single" >
        <item
            Android:id="@+id/navigation_item_2"
            Android:icon="@drawable/ic_home"
            Android:title="@string/navigation_item_2" />
    </group>
</menu>
285
N J

erstellen Sie ein zeichnbares drawer_item_bg.xml wie folgt: 

    <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item>
        <shape Android:shape="rectangle" >
            <solid Android:color="#F4F4F4" />
        </shape>
    </item>

    <item Android:top="-2dp" Android:right="-2dp" Android:left="-2dp">
        <shape>
            <solid Android:color="@Android:color/transparent" />
            <stroke
                Android:width="1dp"
                Android:color="#EAEAEA" />
        </shape>
        <!--
        Android:dashGap="10px"
                Android:dashWidth="10px"
                -->
    </item>

</layer-list>

und fügen Sie es zu NavigationView als app: itemBackground = "@ drawable/drawer_item_bg" hinzu.

<Android.support.design.widget.NavigationView
        Android:id="@+id/nav_view"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:background="#F4F4F4"
        Android:layout_gravity="start"
        Android:fitsSystemWindows="false"
        app:menu="@menu/activity_main_drawer"
        app:itemBackground="@drawable/drawer_item_bg"/>

und los geht's ... screenshot

42
vbp

Einfach hinzufügen DeviderItemDecoration:

NavigationView navigationView = (NavigationView) findViewById(R.id.navigation);
NavigationMenuView navMenuView = (NavigationMenuView) navigationView.getChildAt(0);
navMenuView.addItemDecoration(new DividerItemDecoration(MainActivity.this,DividerItemDecoration.VERTICAL));

Es sieht so aus:

 enter image description here

16
SANAT

Ich denke, ich habe eine noch bessere Lösung für das Problem mehrerer geprüfter Elemente. Auf meine Art und Weise müssen Sie sich keine Gedanken über das Ändern des Codes machen, wenn Sie Ihrem Menü neue Abschnitte hinzufügen .. __ Mein Menü sieht aus wie die von Jared akzeptierte akzeptierte Lösung, mit dem Unterschied zwischen andoid: checkableBehavior = " all "zu den Gruppen:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <group Android:id="@+id/first_section" Android:checkableBehavior="all">
        <item
            Android:id="@+id/frontpage"
            Android:icon="@drawable/ic_action_home_24dp_light_blue"
            Android:title="@string/drawer_frontpage" />
        <item
            Android:id="@+id/search"
            Android:icon="@drawable/ic_search"
            Android:title="@string/drawer_search" />
    </group>
    <group Android:id="@+id/second_section" Android:checkableBehavior="all">
        <item
            Android:id="@+id/events"
            Android:icon="@drawable/ic_maps_local_movies_24dp_light_blue"
            Android:title="@string/drawer_events" />
    </group>
</menu>

Das checkableBehavior von 'all' ermöglicht es, einzelne Elemente nach Belieben zu aktivieren/deaktivieren, unabhängig von der Gruppe, zu der sie gehören. Sie müssen nur das letzte überprüfte Menü speichern. Der Java-Code sieht folgendermaßen aus:

private MenuItem activeMenuItem;

@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
    // Update selected/deselected MenuItems
    if (activeMenuItem != null)
        activeMenuItem.setChecked(false);
    activeMenuItem = menuItem;
    menuItem.setChecked(true);

    drawerLayout.closeDrawers();
    return true;
}
11
plexus

Sie können Trennwände einfach hinzufügen, indem Sie den Menüpunkt Hintergrund über XML mit app:itemBackground einstellen

<Android.support.design.widget.NavigationView
    Android:id="@id/drawer_navigation_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:fitsSystemWindows="true"
    app:menu="@menu/all_navigation_menu"
    app:itemIconTint="@color/colorPrimary"
    app:itemBackground="@drawable/bg_drawer_item"
    Android:background="@color/default_background"/>

Und verwenden Sie LayerDrawable als Hintergrund. Es bewahrt die Überlappung des Materialdesigns für Klicks auf.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="@color/white"/>
        </shape>
    </item>
    <item Android:left="@dimen/activity_horizontal_margin">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/divider"/>
        </shape>
    </item>
    <item Android:bottom="1dp">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

Das Ergebnis:

 enter image description here

9

Wenn Sie verschiedene Gruppen wie Nileshs Antwort erstellen, wird ein Trenner dazwischen.

Ein einfacher Weg, wie ich damit umgegangen bin, war: 

    public boolean onNavigationItemSelected(final MenuItem menuItem) {

    //if an item from extras group is clicked,refresh NAV_ITEMS_MAIN to remove previously checked item
    if (menuItem.getGroupId() == NAV_ITEMS_EXTRA) {


        navigationView.getMenu().setGroupCheckable(NAV_ITEMS_MAIN, false, true);
        navigationView.getMenu().setGroupCheckable(NAV_ITEMS_EXTRA, true, true);
       }else{

        navigationView.getMenu().setGroupCheckable(NAV_ITEMS_MAIN, true, true);
        navigationView.getMenu().setGroupCheckable(NAV_ITEMS_EXTRA, false, true);


    }
    //Update highlighted item in the navigation menu
    menuItem.setChecked(true);
}
8
Zorawar Sachdev

Ich bin nicht sicher, ob dies in API 26 (Android 8) behoben ist oder immer möglich war. Ich bin immer noch ein Idiot in der Android-Programmierung. Ich habe jedoch wie folgt Elterngruppen hinzugefügt. Testen auf einem physischen Android 6-Telefon 

  1. Ich habe den Teiler 
  2. Durch Auswahl eines Elements aus nav_g1 oder nav_g2 werden andere Elemente abgewählt.
  3. Kein zusätzliches Auffüllen aufgrund verschachtelter Gruppen.
  4. Ich habe den Listenern keinen Java-Code hinzugefügt

Menücode

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <group Android:checkableBehavior="single">
        <group
            Android:id="@+id/nav_g1"
            Android:checkableBehavior="single">
            <item
                Android:id="@+id/nav_1"
                Android:icon="@drawable/ic_menu_share"
                Android:title="@string/nav_1"/>
            <item
                Android:id="@+id/nav_2"
                Android:icon="@drawable/ic_menu_share"
                Android:title="@string/nav_2"/>
        </group>
        <group
            Android:id="@+id/nav_g2"
            Android:checkableBehavior="single">
            <item
                Android:id="@+id/nav_3"
                Android:icon="@drawable/ic_menu_share"
                Android:title="@string/nav_3"/>
            <item
                Android:id="@+id/nav_4"
                Android:icon="@drawable/ic_menu_share"
                Android:title="@string/nav_4"/>
        </group>
    </group>
    <item Android:title="Actions">
        <menu>
            <item
                Android:id="@+id/nav_7"
                Android:icon="@drawable/ic_menu_share"
                Android:title="@string/nav_7"/>
            <item
                Android:id="@+id/nav_8"
                Android:icon="@drawable/ic_menu_share"
                Android:title="@string/nav_8"/>
        </menu>
    </item>
</menu>

Anmerkungen

  1. Wie in this answer erwähnt, muss jede Gruppe eine eindeutige ID haben, um den Teiler anzuzeigen.
  2. Wie diese Antworträume entsprechen den Google-Materialdesignspezifikationen.
  3. Android:checkableBehavior="single" für die übergeordnete Gruppe ist erforderlich, damit das Problem mehrerer ausgewählter Menüelemente in this answer (in Kommentaren von hungryghost erwähnt) nicht auftritt

Und hier ist der Screenshot

 Screenshot of the device screen

6
AaA

Ich wollte Trenner über dem ersten Artikel und nach dem letzten Artikel. Bei Verwendung der @Nilesh-Lösung musste ich Dummy-Menüelemente hinzufügen und für "false" festlegen, was sich wirklich schmutzig anfühlte. Und was ist, wenn ich andere coole Sachen in meinem Menü machen möchte?

Mir ist aufgefallen, dass die Navigationsansicht FrameLayout erweitert, sodass Sie Ihre eigenen Inhalte so einfügen können, wie Sie es für ein FrameLayout tun würden. Ich setze dann eine leere Menü-XML, damit nur mein benutzerdefiniertes Layout angezeigt wird. Ich verstehe, dass dies wahrscheinlich gegen den von Google gewünschten Weg geht, aber wenn Sie ein wirklich benutzerdefiniertes Menü wünschen, ist dies ein einfacher Weg.

<!--Note: NavigationView extends FrameLayout so we can put whatever we want in it.-->
<!--I don't set headerLayout since we can now put that in our custom content view-->
<Android.support.design.widget.NavigationView
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:fitsSystemWindows="true"
    app:menu="@menu/empty_menu">

    <!--CUSTOM CONTENT-->
    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <!-- CUSTOM HEADER -->
        <include
            Android:id="@+id/vNavigationViewHeader"
            layout="@layout/navigation_view_header"/>

        <!--CUSTOM MENU-->
        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:orientation="vertical"
            Android:layout_below="@+id/vNavigationViewHeader">

            <View style="@style/NavigationViewLineSeperator"/>

            <Button Android:text="Option 1"/>

            <View style="@style/NavigationViewLineSeperator"/>

            <Button Android:text="Option 2"/>

            <View style="@style/NavigationViewLineSeperator"/>

        </LinearLayout>
    </RelativeLayout>
</Android.support.design.widget.NavigationView>

Hier ist der Stil

<style name="NavigationViewLineSeperator">
        <item name="Android:background">@drawable/line_seperator</item>
        <item name="Android:layout_width">match_parent</item>
        <item name="Android:layout_height">1dp</item>
</style>

Und zeichnend

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

    <solid Android:color="@color/white"/>
    <size Android:width="100sp"
          Android:height="1sp" />
</shape>

Und das Menü

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

bearbeiten:

Anstelle von Buttons können Sie TextView mit drawable verwenden, das die ursprünglichen Menüelemente nachahmt:

 <TextView
     Android:layout_width="match_parent"
     Android:layout_height="match_parent"
     Android:text="@string/menu_support"
     Android:drawableLeft="@drawable/menu_icon_support"
     style="@style/MainMenuText" />

// style.xml
<style name="MainMenuText">
    <item name="Android:drawablePadding">12dp</item>
    <item name="Android:padding">10dp</item>
    <item name="Android:gravity">center_vertical</item>
    <item name="Android:textColor">#fff</item>
</style>
5
Justin Fiedler

Die Gutschrift sollte an Zorawar für die Lösung gehen. Tut mir leid für das Duplizieren der Antwort, konnte jedoch nicht so viel formatierten Text in einen Kommentar einfügen.

Zorawars Lösung funktioniert, der Code könnte als solcher verbessert werden:

public void onNavigationItemSelected(int groupId) {

    //if an item from extras group is clicked,refresh NAV_ITEMS_MAIN to remove previously checked item
    navigationView.getMenu().setGroupCheckable(NAV_ITEMS_MAIN, (groupId == NAV_ITEMS_MAIN), true);
    navigationView.getMenu().setGroupCheckable(NAV_ITEMS_EXTRA, (groupId == NAV_ITEMS_EXTRA), true);


    //Update highlighted item in the navigation menu
    menuItem.setChecked(true);
}
1
Mushtaq Jameel

Wenn Sie den Divider dynamisch hinzufügen möchten, fügen Sie einfach ein leeres SubMenu wie folgt hinzu:

Menu menu = navigationView.getMenu();
menu.addSubMenu(" ").add(" ");

dies wird einen Teiler hinzufügen.

stellen Sie sicher, dass Sie den richtigen Index übergeben, wenn Sie menu.getItem(int index) verwenden. 

0

Nilehs Antwort ist richtig, außer dass sie einen Fehler der doppelten Überprüfung hat.

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

    <group Android:checkableBehavior="single" Android:id="@+id/grp1">
        <item
            Android:id="@+id/nav_register_customer"
            Android:icon="@drawable/ic_menu_camera"
            Android:checkableBehavior="none"
            Android:title="Register Customer" />
    </group>
    <group  Android:id="@+id/grp2"
        Android:checkableBehavior="single"  >
        <item
            Android:id="@+id/nav_slideshow"
            Android:icon="@drawable/ic_menu_slideshow"
            Android:checkableBehavior="none"
            Android:title="Slideshow" />
    </group>
</menu>

Also verwenden 

Android: checkableBehavior = "single"

mit eindeutiger id soll das problem lösen

0
Ajji

Wenn die ausgewählte Antwort für Sie nicht funktioniert, können Sie versuchen, diese zu onCreateOptionsMenu hinzuzufügen, um die eindeutige Gruppen-ID anzugeben:

if (Build.VERSION.SDK_INT >= 28) {
    menu.setGroupDividerEnabled(true)
}
0
user806696

Wenn Sie zusätzlich zu den vorherigen Antworten dekorative Trennzeichen wünschen, aber aufgrund von Problemen mit "überprüfbarem Verhalten" nicht mehrere Gruppen erstellen möchten, können Sie allen Ihren Gruppen dieselbe Gruppen-ID zuweisen.

Beispiel:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
<group
    Android:id="@+id/group_nav_common" <!-- New group id-->
    Android:checkableBehavior="single">

    <item
        Android:id="@+id/menu_item_nav_home"
        Android:icon="@drawable/ic_home_black_24dp"
        Android:title="@string/nav_menu_main" />
    <item
        Android:id="@+id/menu_item_nav_articles"
        Android:icon="@drawable/ic_art_track_black_24dp"
        Android:title="@string/latest_news" />

    <item
        Android:id="@+id/menu_item_nav_group_categories"
        Android:title="@string/nav_menu_sections">
        <menu>
            <group
                Android:id="@id/group_nav_common" <!-- Existing group id -->
                Android:checkableBehavior="single">
                <!-- Programmatically populated section -->
            </group>
        </menu>
    </item>

    <item
        Android:id="@+id/menu_item_nav_group_sites"
        Android:title="@string/nav_menu_sites">
        <menu>
            <group
                Android:id="@id/group_nav_common" <!-- Existing group id -->
                Android:checkableBehavior="single">
                <item
                    Android:id="@+id/menu_item_nav_select_site"
                    Android:icon="@drawable/ic_account_balance_black_24dp"
                    Android:title="@string/nav_menu_select_site" />
            </group>
        </menu>
    </item>
</group>

0
ievgen