Android'de Gezinme Çekmecesi için bir bölüm ayırıcı nasıl eklenir?


91

Bu resim gibi bir gezinme çekmecem var. Bir bölüm ayırıcı eklemek istiyorum (Neptün'ü ayıran çizgi gibi). Basit görünüyor, ancak web'de durumum için yararlı olabilecek hiçbir şey bulamıyorum.

İşte benim Ana Aktivitem:

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

Bunun basit olmasını istiyorum ama internette iyi bir şey bulamıyorum. Neptün'ü izole edip bunun için bir bölüm oluşturmanın bir yolu var mı? Herhangi bir önerisi olan var mı? Teşekkürler.

görüntü açıklamasını buraya girin


bunu standart bir reklamcıyla böyle yapamazsınız. ayırıcıyı gizlemek veya göstermek için özel bir adaptör oluşturmanız ve getView'da basit bir oturum açmanız gerekecek
Tomer Shemesh

@TomerShemesh Bunu nasıl yapabileceğime dair bir örnek var mı?
Redson

github'da aynı şeyi başarmanıza yardımcı olacak kütüphaneler var. Mikepenz'in sunduğu MaterialDrawer iyi ve bakımı iyi. github.com/mikepenz/MaterialDrawer . Ayrıca github'da google io program uygulamasını takip edebilirsiniz. Ayırıcı, yüksekliği 1px ve genişliği match_parent olan bir görünümdür
Raghunandan

@Raghunandan Ayırıcının bir olduğunu biliyorum Viewama bir şekilde onu sadece Neptün için çağırmanın bir yolunu bulmam gerekiyor
Redson

@ Alias ​​google io program uygulamasını takip edin veya bağlantıyı az önce yayınladığım kitaplığı kullanın. İkisi de çalışmalı
Raghunandan

Yanıtlar:


328

Her grubu benzersiz bir kimlikle tanımladığınızdan emin olun , ayırıcı kimlik olmadan görünmez.

Örneğin, bu benim 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>

Örnek çekmece

Gabriel, yorumlarda, grubun bir kimliği yoksa ayırıcının görünmeyeceğini ekliyor.


142
Grubun bir kimliği yoksa ayırıcının görünmeyeceğini söylemek önemlidir!
Gabriel Gómez

1
Şimdiye kadar gerçekten iyi görünüyor, ama nasıl düzeltilir android:checkableBehavior? Grup2'deki son öğeyi seçer ve daha sonra grup1'in bir öğesine tıklarsam, her iki öğe de vurgulanır. @espinchi cevabınıza bunun için bir çözüm ekleyebilir misiniz?
Tomblarom

3
Bu menüyü NavigationDrawer'a nasıl uygulayabilirim?
Yar

@ GabrielGómez bu çok çirkin. Bir ayırıcı göstermek için neden id gerekli, bu çok kötü ...
kullanıcı25

Bunu bulduğuma sevindim, daha önce sahip olduğum hack işini kullanmak zorunda değilim.
lasec0203

8

Menü öğelerini bir ayırıcı satırla ayırmak için yalnızca aşağıdaki örnekte olduğu gibi benzersiz bir kimliğe sahip öğeleri gruplayın :

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>

Görsel Sonuç:

görüntü açıklamasını buraya girin


2

Hacky yöntemim Mostrapotski'ninkine benzer.

Özel adaptörümün Düzeninde, her öğenin başına yatay bir ayırıcı ekliyorum ve görünürlüğünü gitti olarak ayarlıyorum.

Yeni bir grubun başlangıcını işaretleyen elemanların görünürlüğünü görünür olarak ayarlıyorum, böylelikle ayırıcı üstte görünecek.


1

İki seçeneğin var

  1. Öğeleriniz ayrılabilir (üstte bir liste ve altta klasik görünümler). Ardından, ana düzeninizdeki liste görünümü yerine (android: id = "@ + id / left_drawer"), bu 3 öğeyi (liste, ayırıcı ve alt görünümler) içeren oldukça karmaşık bir LinearLayout'a sahip olabilirsiniz.
  2. Öğeleriniz tam olarak örneğinizdeki gibi olmalı, sonra listedeki ayırıcıya ihtiyacınız var, ayırıcıya ihtiyaç duyduğunuz liste öğesinin üstüne bir görünüm çizmek için adaptörünüzde biraz mantık kullanabilirsiniz. (yani liste öğeniz artık tek bir metin görünümü olmayacak, ancak ayrılan bir Doğrusal Yerleşim olacaktır (ve bazen bağdaştırıcınızın mantığına göre görünür).

Bazı örnek kodlarda size yardımcı olmak için, ihtiyacınız olan tüm öğeleri menünüze gönderebilir misiniz? Tam olarak neyin statik olacağını ve neyin kaydırılabilir olacağını bilmemiz gerekir.

Düzenleme : Örnekle çalışmasını istiyorsanız, satırdan kurtulun

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

Bunun gibi ev yapımı bir adaptör sağlamanız gerekir: https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView

2'de söylediğim gibi bağdaştırıcınızda mantığınız olacak ve böylece getView () yönteminde diyebilirsiniz.

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

Bu, kullandığım kodun ana parçası. Geri kalanlar string.xml gibi tüm xml dosyaları ...
Redson

Evet ama bu çekmece düzeni için android örneği, SİZ neye sahip olmak istiyorsunuz?
Mostrapotski
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.