Jak dodać jeden separator sekcji do szuflady nawigacji w systemie Android?


91

Mam szufladę nawigacji, taką jak ten obraz. Chcę dodać separator sekcji (jak linia oddzielająca Neptuna). Wydaje się to proste, ale nie mogę znaleźć w sieci niczego, co byłoby przydatne w moim przypadku.

Oto moja główna aktywność:

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

Chcę, żeby to było proste, ale nie mogę znaleźć nic dobrego w sieci. Czy istnieje sposób, żebym mógł odizolować Neptuna i utworzyć dla niego sekcję? Czy ktoś ma jakieś sugestie? Dzięki.

wprowadź opis obrazu tutaj


nie będziesz w stanie tego zrobić ze standardowym adapterem. aby ukryć lub pokazać separator, musisz utworzyć niestandardowy adapter i zalogować się w getView
Tomer Shemesh

@TomerShemesh Czy masz przykład, jak mogę to zrobić?
Redson

na githubie są biblioteki, które pomogą Ci to osiągnąć. MaterialDrawer firmy mikepenz jest dobry i jest dobrze utrzymany. github.com/mikepenz/MaterialDrawer . Możesz również śledzić aplikację harmonogramu google io na github. Separator to po prostu widok o wysokości 1px i szerokości match_parent
Raghunandan

@Raghunandan Wiem, że separator jest a, Viewale muszę jakoś znaleźć sposób, aby nazwać go tylko Neptunem
Redson

@Alias ​​śledź aplikację harmonogramu google io lub skorzystaj z biblioteki, którą właśnie opublikowałem link. Oba powinny działać
Raghunandan

Odpowiedzi:


328

Upewnij się, że każdą grupę definiujesz za pomocą unikalnego identyfikatora , separator nie pojawi się bez identyfikatora.

Na przykład to jest moje 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>

Szuflada na próbki

Gabriel dodaje poniżej w komentarzach, że jeśli grupa nie ma identyfikatora, separator się nie pojawi.


142
Ważne jest, aby powiedzieć, że jeśli grupa nie ma identyfikatora, separator się nie pojawi!
Gabriel Gómez,

1
Na razie wygląda naprawdę dobrze, ale jak to naprawić android:checkableBehavior? Jeśli wybiorę ostatnią pozycję w grupie 2 i kliknę na pozycji z grupy 1 od tyłu, oba elementy zostaną podświetlone. @espinchi czy mógłbyś dodać rozwiązanie tego problemu do swojej odpowiedzi?
Tomblarom

3
Jak zastosować to menu do NavigationDrawer?
Yar

@ GabrielGómez, to jest takie brzydkie. Dlaczego identyfikator jest wymagany do wyświetlania separatora, jest taki zły ...
user25

cieszę się, że to znalazłem, nie muszę używać tej roboty hakerskiej, którą miałem wcześniej.
lasec0203

8

Aby oddzielić pozycje menu linią oddzielającą, pogrupuj tylko elementy o unikalnym identyfikatorze, jak na poniższym przykładzie:

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>

Wynik wizualny:

wprowadź opis obrazu tutaj


2

Moja metoda hakerska jest podobna do metody Mostrapotskiego.

W moim układzie dla mojego niestandardowego adaptera dodaję poziomy separator na początku każdego elementu i ustawiam jego widoczność na zniknięcie.

W przypadku elementów, które oznaczają początek nowej grupy, ustawiłem ich widoczność na widoczną, aby separator był widoczny na górze.


1

Masz dwie możliwości

  1. Twoje elementy można rozdzielić (lista na górze i klasyczne widoki na dole). Wtedy zamiast widoku listy w głównym układzie (android: id = "@ + id / left_drawer") możesz mieć dość złożony układ liniowy zawierający te 3 elementy (lista, separator i widoki z dołu)
  2. Twoje elementy muszą być dokładnie takie, jak w przykładzie, wtedy potrzebujesz separatora na liście, możesz użyć logiki w swoim adapterze, aby narysować widok na górze elementu listy, w którym potrzebujesz separatora. (co oznacza, że ​​element listy nie będzie już pojedynczym widokiem tekstu, ale LinearLayout z utraconym separatorem (i czasami widocznym, zgodnie z logiką adaptera).

Aby pomóc Ci z przykładowym kodem, czy możesz zamieścić wszystkie potrzebne pozycje w swoim menu? Musimy dokładnie wiedzieć, co będzie statyczne, a co będzie przewijalne.

Edycja : Jeśli chcesz, aby działał z przykładem, pozbądź się linii

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

Musisz dostarczyć domowy adapter, taki jak ten: https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView

Jak powiedziałem w 2, w swoim adapterze będziesz mieć logikę, a więc możesz powiedzieć w metodzie getView ()

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

To jest główny fragment kodu, którego używam. Reszta to wszystkie pliki xml, takie jak string.xml ...
Redson

Tak, ale to jest przykład Androida dla układu szuflady, co TY chcesz mieć?
Mostrapotski
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.