Bagaimana cara menambahkan satu pemisah bagian untuk Laci Navigasi di Android?

91

Saya memiliki panel navigasi seperti gambar ini. Saya ingin menambahkan pemisah bagian (seperti garis yang memisahkan Neptunus). Tampaknya sederhana tetapi saya tidak dapat menemukan apa pun di web yang berguna untuk kasus saya.

Inilah MainActivity saya:

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

Saya ingin ini sederhana tetapi saya tidak dapat menemukan sesuatu yang bagus di web. Adakah cara agar saya dapat mengisolasi Neptunus dan membuat bagian untuknya? Apakah ada yang punya saran? Terima kasih.

masukkan deskripsi gambar di sini

Redson
sumber
Anda tidak akan bisa melakukannya seperti itu dengan adatper standar. Anda perlu membuat adaptor khusus dan memiliki beberapa login sederhana di getView untuk menyembunyikan atau menampilkan pemisah
Tomer Shemesh
@TomerShemesh Apakah Anda memiliki contoh bagaimana saya dapat melakukan ini?
Redson
ada pustaka di github yang akan membantu Anda mencapai hal yang sama. MaterialDrawer buatan mikepenz bagus dan terawat dengan baik. github.com/mikepenz/MaterialDrawer . Anda juga dapat mengikuti aplikasi jadwal google io di github. Pemisah hanya tampilan dengan tinggi 1px dan lebar match_parent
Raghunandan
@Raghunandan Saya tahu bahwa pemisahnya adalah Viewtetapi saya harus menemukan cara untuk hanya menyebutnya untuk Neptunus
Redson
@Alias ​​ikuti aplikasi jadwal google io atau gunakan perpustakaan yang baru saja saya posting tautannya. Keduanya harus bekerja
Raghunandan

Jawaban:

328

Pastikan Anda menentukan setiap grup dengan ID unik , pemisah tidak akan muncul tanpa ID.

Misalnya, ini saya 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>

Laci sampel

Gabriel menambahkan di bawah di komentar bahwa jika grup tidak memiliki id, pemisah tidak akan muncul.

espinchi
sumber
142
Penting untuk dikatakan bahwa jika grup tidak memiliki id, pemisah tidak akan muncul!
Gabriel Gómez
1
Terlihat sangat bagus sejauh ini, tapi bagaimana cara memperbaikinya android:checkableBehavior? Jika saya memilih item terakhir di grup2 dan mengklik item dari grup1 setelahnya, kedua item disorot. @espinchi dapatkah Anda menambahkan solusi untuk ini ke jawaban Anda?
Tomblarom
3
Bagaimana cara menerapkan menu ini ke NavigationDrawer?
Yar
@ GabrielGómez ini sangat jelek. Mengapa id diperlukan untuk menunjukkan pemisah, itu sangat buruk ...
pengguna25
senang saya menemukan ini, tidak harus menggunakan pekerjaan hack yang saya miliki sebelumnya.
lasec0203
8

Untuk memisahkan item menu dengan garis pemisah, hanya kelompokkan item dengan id unik seperti contoh berikut:

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>

Hasil Visual:

masukkan deskripsi gambar di sini

aminografi
sumber
2

Metode hacky saya mirip dengan Mostrapotski.

Di Layout saya untuk adaptor kustom saya, saya menambahkan pemisah horizontal di awal setiap item dan mengatur visibilitasnya menjadi hilang.

Untuk elemen yang menandai awal grup baru, saya mengatur visibilitasnya menjadi terlihat sehingga pemisah muncul di atasnya.

Leye Eltee Taiwo
sumber
1

Anda punya dua pilihan

  1. Item Anda dapat dipisahkan (daftar di bagian atas, dan tampilan klasik di bagian bawah). Kemudian, alih-alih tampilan daftar di tata letak utama Anda (android: id = "@ + id / left_drawer"), Anda dapat memiliki LinearLayout yang agak rumit termasuk 3 item tersebut (tampilan daftar, pemisah, dan bawah)
  2. Item Anda harus persis seperti dalam contoh Anda, maka Anda memerlukan pemisah dalam daftar, Anda dapat menggunakan beberapa logika di adaptor Anda untuk menggambar tampilan di atas item daftar di mana Anda memerlukan pemisah. (artinya item daftar Anda tidak akan menjadi satu tampilan teks lagi, tetapi LinearLayout dengan pemisah yang hilang (dan terkadang terlihat, menurut logika adaptor Anda).

Untuk membantu Anda dengan beberapa kode contoh, dapatkah Anda memposting semua item yang Anda butuhkan di menu Anda? Kita perlu tahu persis apa yang statis dan apa yang bisa digulir.

Sunting : Jika Anda ingin yang bekerja dengan contoh, singkirkan garis

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

Anda perlu menyediakan adaptor buatan sendiri seperti ini: https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView

Seperti yang saya katakan di 2, di adaptor Anda, Anda akan memiliki logika, dan dengan demikian Anda dapat mengatakan dalam metode getView ()

if(myPlanet.isNeptune()) 
    holder.mSepatator.setVisibility(View.VISIBLE);
else 
    holder.mSepatator.setVisibility(View.GONE);
Mostrapotski
sumber
Ini adalah bagian utama dari kode yang saya gunakan. Sisanya adalah semua file xml seperti string.xml ...
Redson
Ya, tapi ini contoh android untuk tata letak laci, apa yang ingin ANDA miliki?
Mostrapotski