Wie füge ich ein Abschnittstrennzeichen für die Navigationsleiste in Android hinzu?

Lesezeit: 9 Minuten

Benutzer-Avatar
Redson

Ich habe eine Navigationsleiste wie dieses Bild. Ich möchte ein Abschnittstrennzeichen hinzufügen (wie die Linie, die Neptun trennt). Es scheint einfach zu sein, aber ich kann im Internet nichts finden, was für meinen Fall nützlich wäre.

Hier ist meine MainActivity:

public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;

    private CharSequence mDrawerTitle;
    private CharSequence mTitle;
    private String[] mPlanetTitles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTitle = mDrawerTitle = getTitle();
        mPlanetTitles = getResources().getStringArray(R.array.planets_array);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        // set a custom shadow that overlays the main content when the drawer opens
        mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
        // set up the drawer's list view with items and click listener
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mPlanetTitles));
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

        // enable ActionBar app icon to behave as action to toggle nav drawer
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);

        // ActionBarDrawerToggle ties together the the proper interactions
        // between the sliding drawer and the action bar app icon
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description for accessibility */
                R.string.drawer_close  /* "close drawer" description for accessibility */
                ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        if (savedInstanceState == null) {
            selectItem(0);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    /* Called whenever we call invalidateOptionsMenu() */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the nav drawer is open, hide action items related to the content view
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
         // The action bar home/up action should open or close the drawer.
         // ActionBarDrawerToggle will take care of this.
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle action buttons
        switch(item.getItemId()) {
        case R.id.action_websearch:
            // create intent to perform web search for this planet
            Intent intent = new Intent(Intent.ACTION_WEB_SEARCH);
            intent.putExtra(SearchManager.QUERY, getActionBar().getTitle());
            // catch event that there's no activity to handle intent
            if (intent.resolveActivity(getPackageManager()) != null) {
                startActivity(intent);
            } else {
                Toast.makeText(this, R.string.app_not_available, Toast.LENGTH_LONG).show();
            }
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }

    /* The click listner for ListView in the navigation drawer */
    private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    }

    private void selectItem(int position) {
        // update the main content by replacing fragments
        Fragment fragment = new PlanetFragment();
        Bundle args = new Bundle();
        args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
        fragment.setArguments(args);

        FragmentManager fragmentManager = getFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

        // update selected item and title, then close the drawer
        mDrawerList.setItemChecked(position, true);
        setTitle(mPlanetTitles[position]);
        mDrawerLayout.closeDrawer(mDrawerList);
    }

    @Override
    public void setTitle(CharSequence title) {
        mTitle = title;
        getActionBar().setTitle(mTitle);
    }

    /**
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
     */

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggls
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

    /**
     * Fragment that appears in the "content_frame", shows a planet
     */
    public static class PlanetFragment extends Fragment {
        public static final String ARG_PLANET_NUMBER = "planet_number";

        public PlanetFragment() {
            // Empty constructor required for fragment subclasses
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_planet, container, false);
            int i = getArguments().getInt(ARG_PLANET_NUMBER);
            String planet = getResources().getStringArray(R.array.planets_array)[i];

            int imageId = getResources().getIdentifier(planet.toLowerCase(Locale.getDefault()),
                            "drawable", getActivity().getPackageName());
            ((ImageView) rootView.findViewById(R.id.image)).setImageResource(imageId);
            getActivity().setTitle(planet);
            return rootView;
        }
    }
}

activity_main.xml:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

Schubladenliste_Element.xml:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textColor="#fff"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"/>

Ich möchte, dass dies einfach ist, aber ich kann nichts Gutes im Internet finden. Gibt es eine Möglichkeit, Neptun zu isolieren und einen Abschnitt dafür zu erstellen? Hat jemand irgendwelche Vorschläge? Vielen Dank.

Geben Sie hier die Bildbeschreibung ein

  • Mit einem normalen Adapter geht das nicht. Sie müssen einen benutzerdefinierten Adapter erstellen und sich einfach bei getView anmelden, um das Trennzeichen auszublenden oder anzuzeigen

    – Tomer Shemesh

    14. Mai 2015 um 17:22 Uhr

  • @TomerShemesh Hast du ein Beispiel dafür, wie ich das machen kann?

    – Redson

    14. Mai 2015 um 17:23 Uhr

  • Es gibt Bibliotheken auf Github, die Ihnen dabei helfen, dasselbe zu erreichen. MaterialDrawer von Mikepenz ist gut und wird gut gepflegt. github.com/mikepenz/MaterialDrawer. Sie können auch der Google io-Schedule-App auf GitHub folgen. Das Trennzeichen ist nur eine Ansicht mit einer Höhe von 1 Pixel und einer Breite von match_parent

    – Raghunandan

    14. Mai 2015 um 17:23 Uhr


  • @Raghunandan Ich weiß, dass das Trennzeichen a ist View aber ich muss irgendwie einen Weg finden, es nur für Neptun zu nennen

    – Redson

    14. Mai 2015 um 17:28 Uhr

  • @Alias ​​folgen Sie der Google io-Zeitplan-App oder verwenden Sie die Bibliothek, von der ich gerade den Link gepostet habe. Beides sollte funktionieren

    – Raghunandan

    14. Mai 2015 um 17:29 Uhr

Benutzer-Avatar
Espinchi

Stellen Sie sicher, dass Sie jede Gruppe mit a definieren Eindeutige IDTrennzeichen wird ohne die ID nicht angezeigt.

Das ist zum Beispiel mein drawer_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/menu_top"
        android:checkableBehavior="single">
        <item
            android:checked="true"
            android:id="@+id/drawer_item_timeline"
            android:icon="@drawable/ic_timer_grey600_24dp"
            android:title="@string/drawer_timeline"/>
        <item
            android:id="@+id/drawer_item_reports"
            android:icon="@drawable/ic_timetable_grey600_24dp"
            android:title="@string/drawer_reports"/>
    </group>

    <group
        android:id="@+id/menu_bottom"
        android:checkableBehavior="none">

        <item
            android:id="@+id/drawer_item_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="@string/drawer_settings" >
        </item>
    </group>
</menu>

Probenschublade

Gabriel fügt unten in den Kommentaren hinzu, dass das Trennzeichen nicht angezeigt wird, wenn die Gruppe keine ID hat.

  • Wichtig zu sagen, dass das Trennzeichen nicht angezeigt wird, wenn die Gruppe keine ID hat!

    – Gabriel Gomez

    3. Januar 2016 um 16:28 Uhr

  • Sieht soweit ganz gut aus, aber wie kann man das beheben android:checkableBehavior? Wenn ich das letzte Element in Gruppe2 auswähle und anschließend auf ein Element von Gruppe1 klicke, werden beide Elemente hervorgehoben. @espinchi könnten Sie Ihrer Antwort eine Lösung dafür hinzufügen?

    – Tomblarom

    24. März 2016 um 15:31 Uhr

  • Wie wendet man dieses Menü auf NavigationDrawer an?

    – Yar

    30. März 2016 um 8:47 Uhr

  • @GabrielGómez das ist so hässlich. Warum muss die ID ein Trennzeichen anzeigen, es ist so schlimm …

    – Benutzer25

    2. Februar 2019 um 21:08 Uhr


  • Ich bin froh, dass ich das gefunden habe, ich muss diesen Hack-Job, den ich vorher hatte, nicht verwenden.

    – lasec0203

    23. September 2019 um 6:59 Uhr

Benutzer-Avatar
Aminographie

Um Menüelemente durch eine Trennlinie zu trennen, gruppieren Sie Elemente nur mit a Eindeutige ID wie folgendes Beispiel:

activity_main_drawer.xml:

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

    <item
        android:id="@+id/nav_apps_and_games"
        android:icon="@drawable/ic_apps_black_24dp"
        android:title="@string/my_apps_and_games" />

    <item
        android:id="@+id/nav_bookmarked_apps"
        android:icon="@drawable/ic_add_bookmark_black_24dp"
        android:title="@string/bookmarked_apps" />

    <item
        android:id="@+id/nav_manage_downloads"
        android:icon="@drawable/ic_downloading_file_black_24dp"
        android:title="@string/manage_downloads" />

    <!-- SET A UNIQUE ID TO THE BELOW GROUP -->
    <group android:id="@+id/group1">

        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="@string/settings" />

        <item
            android:id="@+id/nav_sign_up"
            android:icon="@drawable/ic_card_membership_black_24dp"
            android:title="@string/sign_up_login" />

    </group>

</menu>

Visuelles Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Meine Hacky-Methode ähnelt der von Mostrapotski.

In meinem Layout für meinen benutzerdefinierten Adapter füge ich am Anfang jedes Elements ein horizontales Trennzeichen hinzu und setze seine Sichtbarkeit auf weg.

Für die Elemente, die den Beginn einer neuen Gruppe markieren, setze ich ihre Sichtbarkeit auf sichtbar, sodass das Trennzeichen darüber angezeigt wird.

Benutzer-Avatar
Mostrapotski

Sie haben zwei Möglichkeiten

  1. Ihre Artikel können getrennt werden (eine Liste oben und klassische Ansichten unten). Dann können Sie anstelle der Listenansicht in Ihrem Hauptlayout (android:id=”@+id/left_drawer”) ein ziemlich komplexes LinearLayout haben, das diese 3 Elemente enthält (Liste, Trennzeichen und Unteransicht).
  2. Ihre Elemente müssen genau wie in Ihrem Beispiel sein, dann benötigen Sie das Trennzeichen in der Liste. Sie können in Ihrem Adapter eine Logik verwenden, um eine Ansicht über dem Listenelement zu zeichnen, an der Sie das Trennzeichen benötigen. (Das bedeutet, dass Ihr Listenelement keine einzelne Textansicht mehr ist, sondern ein LinearLayout mit einem gegangenen Trennzeichen (und manchmal sichtbar, gemäß der Logik Ihres Adapters).

Um Ihnen mit einem Beispielcode zu helfen, können Sie bitte alle Elemente, die Sie benötigen, in Ihrem Menü posten? Wir müssen genau wissen, was statisch und was scrollbar sein wird.

Bearbeiten: Wenn Sie möchten, dass das mit dem Beispiel funktioniert, entfernen Sie die Zeile

mDrawerList.setAdapter(new ArrayAdapter<String>(this, ...)

Sie müssen einen hausgemachten Adapter wie diesen bereitstellen:
https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView

Wie ich in 2 sagte, haben Sie in Ihrem Adapter Logik, und daher können Sie in der Methode getView () sagen

if(myPlanet.isNeptune()) 
    holder.mSepatator.setVisibility(View.VISIBLE);
else 
    holder.mSepatator.setVisibility(View.GONE);

Gruppe in Menüdatei hinzufügen, um Teiler hinzuzufügen
Geben Sie hier die Bildbeschreibung ein

    </item>
</group>

Benutzer-Avatar
Manpreet Chahal

Gruppe hinzufügen, um eine Trennlinie in der Navigationsleiste hinzuzufügen

    </item>
</group>

1319410cookie-checkWie füge ich ein Abschnittstrennzeichen für die Navigationsleiste in Android hinzu?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy