Come aggiungere un separatore di sezione per il cassetto di navigazione in Android?


90

Ho un cassetto di navigazione come questa immagine. Voglio aggiungere un separatore di sezione (come la linea che separa Nettuno). Sembra semplice ma non riesco a trovare nulla sul web che sia stato utile per il mio caso.

Ecco la mia 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>

drawer_list_item.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"/>

Voglio che sia semplice ma non riesco a trovare nulla di buono sul web. C'è un modo per isolare Nettuno e creare una sezione per esso? Qualcuno ha qualche suggerimento? Grazie.

inserisci qui la descrizione dell'immagine


non sarai in grado di farlo in quel modo con un adatper standard. dovrai creare un adattatore personalizzato e avere un semplice accesso su getView per nascondere o mostrare il separatore
Tomer Shemesh

@TomerShemesh Hai un esempio di come posso farlo?
Redson

ci sono librerie su GitHub che ti aiuteranno a ottenere lo stesso risultato. MaterialDrawer di mikepenz è buono ed è ben mantenuto. github.com/mikepenz/MaterialDrawer . Puoi anche seguire l'app di pianificazione di google io su github. Il separatore è solo una vista con altezza 1px e larghezza match_parent
Raghunandan

@Raghunandan So che il separatore è un Viewma devo in qualche modo trovare un modo per chiamarlo solo per Nettuno
Redson

@Alias ​​segui l'app di pianificazione google io o usa la libreria che ho appena pubblicato il link. Entrambi dovrebbero funzionare
Raghunandan

Risposte:


325

Assicurati di definire ogni gruppo con un ID univoco , il separatore non apparirà senza l'ID.

Ad esempio, questo è il mio 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>

Cassetto campioni

Gabriel aggiunge di seguito nei commenti che se il gruppo non ha un ID, il separatore non verrà visualizzato.


142
Importante dire che se il gruppo non ha un id, il separatore non apparirà!
Gabriel Gómez

1
Finora sembra davvero buono, ma come risolvere il problema android:checkableBehavior? Se seleziono l'ultimo elemento nel gruppo2 e faccio clic su un elemento del gruppo1 in avanti, entrambi gli elementi vengono evidenziati. @espinchi potresti aggiungere una soluzione per questo alla tua risposta?
Tomblarom

3
Come applicare questo menu a NavigationDrawer?
Yar

@ GabrielGómez questo è così brutto. Perché l'id è necessario per mostrare un separatore, è così brutto ...
user25

sono contento di averlo trovato, non devo usare quel lavoro di hacking che avevo prima.
lasec0203

7

Per separare le voci di menu da una linea di divisione, raggruppa solo le voci con un ID univoco come nel seguente esempio:

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>

Risultato visivo:

inserisci qui la descrizione dell'immagine


2

Il mio metodo hacky è simile a quello di Mostrapotski.

Nel mio layout per il mio adattatore personalizzato, sto aggiungendo un separatore orizzontale all'inizio di ogni elemento e impostando la sua visibilità su andato.

Per gli elementi che segnano l'inizio di un nuovo gruppo, ho impostato la loro visibilità su visibile in modo che il separatore appaia sopra di esso.


1

Hai due scelte

  1. I tuoi articoli possono essere separati (un elenco in alto e viste classiche in basso). Quindi invece della visualizzazione elenco nel layout principale (android: id = "@ + id / left_drawer") puoi avere un LinearLayout piuttosto complesso che include questi 3 elementi (elenco, separatore e viste dal basso)
  2. I tuoi articoli devono essere esattamente come nel tuo esempio, quindi hai bisogno del separatore nell'elenco, puoi usare un po 'di logica nel tuo adattatore per disegnare una vista sopra l'elemento dell'elenco in cui hai bisogno del separatore. (il che significa che l'elemento dell'elenco non sarà più un singolo textview, ma un LinearLayout con un separatore scomparso (e visibile a volte, secondo la logica dell'adattatore).

Per aiutarti con un codice di esempio, puoi inserire tutti gli elementi di cui hai bisogno nel tuo menu? Dobbiamo sapere esattamente cosa sarà statico e cosa sarà scorrevole.

Modifica : se vuoi che funzioni con l'esempio, elimina la linea

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

È necessario fornire un adattatore fatto in casa come questo: https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView

Come ho detto in 2, nel tuo adattatore, avrai la logica, e quindi puoi dire nel metodo getView ()

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

Questa è la parte principale del codice che sto usando. Il resto sono tutti file xml come string.xml ...
Redson

Sì, ma questo è l'esempio di Android per il layout del cassetto, cosa sei disposto ad avere?
Mostrapotski
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.