Skocz do zawartości
Coders Lab

Jak dodać Hamburger menu (DrawerLayout)

    Rekomendowane odpowiedzi

    Napisano (edytowane)

    Instrukcja dla Android Studio 3.4.1

    Jeżeli wiemy że naszej aplikacji przyda się menu wysuwane z boku, możemy od razu wygenerować projekt z zaimplementowanym DrawerLayout. W tym celu w Android Studio wybieramy:
    File -> New Project. W oknie, które się pojawi zaznaczamy: Navigation Drawer Activity
    image.png.db4d66b08b9d05a51bd06526b32f221b.png

    Następnie standardowo wpisujemy nazwę naszej nowej aplikacji, ustalamy nazwę pakietu, lokalizacje projektu na dysku, język (Java lub Kotlin) oraz Minimum API level etc. Klikamy finish i mamy wygenerowaną aplikacje z Hamburger menu.

    Przyjrzyjmy się jej bliżej.

    Aplikacja posiada jedną aktywność: MainActivity, która implementuje NavigationView.OnNavigationItemSelectedListener.

    class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
      ...
        
    }


    W metodzie onCreate ustawiany jest FloatingActionButton, NavigationView oraz DwawerLayout

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            // ustawienie layoutu -  plik activity_main
            setContentView(R.layout.activity_main)
            
            // belka górna, na której umieścimy przycisk wysuwający menu
            val toolbar: Toolbar = findViewById(R.id.toolbar)
            setSupportActionBar(toolbar)
    
            val fab: FloatingActionButton = findViewById(R.id.fab)
            fab.setOnClickListener { view ->
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show()
            }
          //Hamburger menu wysuwane z boku, którego definicja znajduje się w activity_main.xml, drawer_layout to jego android:id
            val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
              
          //pozycje menu w draver_layout 
            val navView: NavigationView = findViewById(R.id.nav_view)
              
            // obsługa przycisku wysuwającego menu  
            val toggle = ActionBarDrawerToggle(
                this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close
            )
            drawerLayout.addDrawerListener(toggle)
            toggle.syncState()
    
            // ustawiamy listenera do obłsugi zdarzeń po kliknięciu w element listy
            navView.setNavigationItemSelectedListener(this)
        }

    Następnie nadpisujemy metody:

       //ta metoda nadpisuje zachowanie przycisku wstecz, 
        override fun onBackPressed() {
          //kiedy naciśniemy przycisk wstecz i menu boczne jest widoczne to zostanie ono zamknięte 
            val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
            if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
                drawerLayout.closeDrawer(GravityCompat.START)
            } else {
              // w przeciwnym wypadku przycisk zachowa się normalnie - w tym przypadku wyjdziemy z aplikacji
                super.onBackPressed()
            }
        }
    
      // w tej metodzie określamy co ma sie wydarzyć po kliknięciu w poszczególną pozycję menu
        override fun onNavigationItemSelected(item: MenuItem): Boolean {
            // Handle navigation view item clicks here.
            when (item.itemId) {
                R.id.nav_home -> {
                    // Handle the camera action
                }
                R.id.nav_gallery -> {
    
                }
                R.id.nav_slideshow -> {
    
                }
                R.id.nav_tools -> {
    
                }
                R.id.nav_share -> {
    
                }
                R.id.nav_send -> {
    
                }
            }
            val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
            drawerLayout.closeDrawer(GravityCompat.START)
            return true
        }

    Struktura plików z layoutem:
    activity_main.xml - znajduje się w nim app_bar_main,  DrawerLayout oraz NavigationView, który zbudowany jest z nav_header_main oraz activity_main_draver. 

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            tools:openDrawer="start">
    
        <include
                layout="@layout/app_bar_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
    
        <android.support.design.widget.NavigationView
                android:id="@+id/nav_view"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:fitsSystemWindows="true"
                app:headerLayout="@layout/nav_header_main"
                app:menu="@menu/activity_main_drawer"/>
    
    </android.support.v4.widget.DrawerLayout>

    nav_header_main.xml - nagłówek hamburger menu.

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="@dimen/nav_header_height"
            android:background="@drawable/side_nav_bar"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            android:orientation="vertical"
            android:gravity="bottom">
    
        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="@dimen/nav_header_vertical_spacing"
                app:srcCompat="@mipmap/ic_launcher_round"
                android:contentDescription="@string/nav_header_desc"
                android:id="@+id/imageView"/>
    
        <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="@dimen/nav_header_vertical_spacing"
                android:text="@string/nav_header_title"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
    
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/nav_header_subtitle"
                android:id="@+id/textView"/>
    
    </LinearLayout>

    activity_main_draver .xml -  pozycje menu
     

    <?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">
    
        <group android:checkableBehavior="single">
            <item
                    android:id="@+id/nav_home"
                    android:icon="@drawable/ic_menu_camera"
                    android:title="@string/menu_home"/>
            <item
                    android:id="@+id/nav_gallery"
                    android:icon="@drawable/ic_menu_gallery"
                    android:title="@string/menu_gallery"/>
            <item
                    android:id="@+id/nav_slideshow"
                    android:icon="@drawable/ic_menu_slideshow"
                    android:title="@string/menu_slideshow"/>
            <item
                    android:id="@+id/nav_tools"
                    android:icon="@drawable/ic_menu_manage"
                    android:title="@string/menu_tools"/>
        </group>
    
        <item android:title="Communicate">
            <menu>
                <item
                        android:id="@+id/nav_share"
                        android:icon="@drawable/ic_menu_share"
                        android:title="@string/menu_share"/>
                <item
                        android:id="@+id/nav_send"
                        android:icon="@drawable/ic_menu_send"
                        android:title="@string/menu_send"/>
            </menu>
        </item>
    
    </menu>


    app_bar_main.xml - główny widok aplikacji, zawiera toolbar, floatingActionButton oraz content_main.xml z wyśrodkowanym napisem Hello World!

    Menu boczne w aplikacji prezentuje się następująco:
    image.png.2df6e55435feeb57f42f06f79e1ea5f3.png

    Edytowane przez Coders Lab

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach

    Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

    Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

    Zarejestruj nowe konto

    Załóż nowe konto. To bardzo proste!

    Zarejestruj się

    Zaloguj się

    Posiadasz już konto? Zaloguj się poniżej.

    Zaloguj się

    • Ostatnio przeglądający   0 użytkowników

      Brak zarejestrowanych użytkowników przeglądających tę stronę.

    x