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
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 nimapp_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: