Comment ajouter un séparateur de section pour le tiroir de navigation dans Android?

90

J'ai un tiroir de navigation comme cette image. Je veux ajouter un séparateur de section (comme la ligne séparant Neptune). Cela semble simple mais je ne trouve rien sur le Web qui ait été utile pour mon cas.

Voici ma 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>

tiroir_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"/>

Je veux que ce soit simple mais je ne trouve rien de bon sur le Web. Est-il possible d'isoler Neptune et de créer une section pour cela? Est-ce que quelqu'un a des suggestions? Merci.

entrez la description de l'image ici

Redson
la source
vous ne pourrez pas le faire comme ça avec un adaptateur standard. vous devrez créer un adaptateur personnalisé et avoir une connexion simple sur getView pour masquer ou afficher le séparateur
Tomer Shemesh
@TomerShemesh Avez-vous un exemple de la façon dont je peux faire cela?
Redson
il existe des bibliothèques sur github qui vous aideront à réaliser la même chose. MaterialDrawer de mikepenz est bon et bien entretenu. github.com/mikepenz/MaterialDrawer . Vous pouvez également suivre l'application de calendrier google io sur github. Le séparateur est juste une vue avec une hauteur de 1px et une largeur match_parent
Raghunandan
@Raghunandan Je sais que le séparateur est un Viewmais je dois en quelque sorte trouver un moyen de l'appeler uniquement pour Neptune
Redson
@Alias ​​suivez l'application de calendrier google io ou utilisez la bibliothèque que je viens de publier le lien. Les deux devraient fonctionner
Raghunandan

Réponses:

325

Assurez-vous de définir chaque groupe avec un identifiant unique , le séparateur n'apparaîtra pas sans l'identifiant.

Par exemple, voici mon 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>

Tiroir d'échantillons

Gabriel ajoute ci-dessous dans les commentaires que si le groupe n'a pas d'identifiant, le séparateur n'apparaîtra pas.

espinchi
la source
142
Important de dire que si le groupe n'a pas d'identifiant, le séparateur n'apparaîtra pas!
Gabriel Gómez
1
Ça a l'air vraiment bien jusqu'à présent, mais comment résoudre le problème android:checkableBehavior? Si je sélectionne le dernier élément du groupe2 et clique sur un élément du groupe1 vers l'arrière, les deux éléments sont mis en surbrillance. @espinchi pourriez-vous ajouter une solution pour cela à votre réponse?
Tomblarom
3
Comment appliquer ce menu à NavigationDrawer?
Yar
@ GabrielGómez c'est tellement moche. Pourquoi l'ID est nécessaire pour afficher un séparateur, c'est si mauvais ...
user25
heureux d'avoir trouvé cela, je n'ai pas à utiliser ce travail de piratage que j'avais auparavant.
lasec0203
7

Pour séparer les éléments de menu par une ligne de séparation, regroupez uniquement les éléments avec un identifiant unique, comme dans l'exemple suivant:

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>

Résultat visuel:

entrez la description de l'image ici

aminographie
la source
2

Ma méthode hacky est similaire à celle de Mostrapotski.

Dans ma mise en page pour mon adaptateur personnalisé, j'ajoute un séparateur horizontal au début de chaque élément et je règle sa visibilité sur disparu.

Pour les éléments qui marquent le début d'un nouveau groupe, j'ai défini leur visibilité sur visible afin que le séparateur apparaisse au-dessus.

Leye Eltee Taiwo
la source
1

Vous avez deux choix

  1. Vos éléments peuvent être séparés (une liste en haut et des vues classiques en bas). Ensuite, au lieu de la liste dans votre mise en page principale (android: id = "@ + id / left_drawer"), vous pouvez avoir un LinearLayout plutôt complexe comprenant ces 3 éléments (liste, séparateur et vues de dessous)
  2. Vos éléments doivent être exactement comme dans votre exemple, alors vous avez besoin du séparateur dans la liste, vous pouvez utiliser une logique dans votre adaptateur pour dessiner une vue en haut de l'élément de liste où vous avez besoin du séparateur. (ce qui signifie que votre élément de liste ne sera plus une seule vue de texte, mais un LinearLayout avec un séparateur disparu (et parfois visible, selon la logique de votre adaptateur).

Pour vous aider avec un exemple de code, pouvez-vous publier tous les éléments dont vous avez besoin dans votre menu? Nous devons savoir exactement ce qui sera statique et ce qui sera scrollable.

Edit : Si vous voulez que cela fonctionne avec l'exemple, supprimez la ligne

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

Vous devez fournir un adaptateur fait maison comme celui-ci: https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView

Comme je l'ai dit en 2, dans votre adaptateur, vous aurez une logique, et vous pourrez donc dire dans la méthode getView ()

if(myPlanet.isNeptune()) 
    holder.mSepatator.setVisibility(View.VISIBLE);
else 
    holder.mSepatator.setVisibility(View.GONE);
Mostrapotski
la source
C'est le morceau principal de code que j'utilise. Le reste sont tous des fichiers xml comme string.xml ...
Redson
Oui, mais c'est l'exemple Android pour la disposition des tiroirs, qu'est-ce que VOUS êtes prêt à avoir?
Mostrapotski