Панель навигации в Android
Панель навигации - это наиболее распространенная функция, предлагаемая Android, а панель навигации - это панель пользовательского интерфейса, которая отображает главное меню навигации вашего приложения. Это также один из важных элементов пользовательского интерфейса, который обеспечивает действия, предпочтительные для пользователей, такие как пример изменения профиля пользователя, изменение настроек приложения и т. Д. В этой статье пошагово обсуждалась реализация панели навигации в Android.
The navigation drawer slides in from the left and contains the navigation destinations for the app.
Пользователь может просматривать панель навигации, когда пользователь проводит пальцем от левого края действия. Они также могут найти его из домашнего занятия, нажав значок приложения на панели действий. Значок ящика отображается во всех местах назначения верхнего уровня, которые используют DrawerLayout. Взгляните на следующее изображение, чтобы получить представление о панели навигации.
Шаги по реализации навигационного ящика в Android
Шаг 1. Создайте проект Android Studio
- Создайте пустой проект студии Android Activity.
- Обратитесь к Android | Как создать / запустить новый проект в Android Studio? о том, как создать пустой проект студии Android Activity. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.
Шаг 2: Добавление зависимости к проекту
- В этом обсуждении мы собираемся использовать панель навигации по дизайну материалов.
- Поэтому добавьте следующую зависимость дизайна материала в файл Gradle уровня приложения.
implementation ‘com.google.android.material:material:1.3.0-alpha03’
- Обратитесь к следующему изображению, если не удается найти файл Gradle уровня приложения, вызывающий зависимость (в представлении иерархии проекта).
- После вызова зависимости нажмите кнопку « Синхронизировать сейчас » . Убедитесь, что система подключена к сети, чтобы Android Studio загрузила необходимые файлы.
Шаг 3: Создание меню в папке меню
- Создайте папку меню в папке res. Реализовать меню.
- Обратитесь к следующему видео, чтобы создать макет для реализации меню.
- Вызовите следующий код в navigation_menu.xml
XML
<? xml version = "1.0" encoding = "utf-8" ?> tools:ignore = "HardcodedText" > < item android:id = "@+id/nav_account" android:title = "My Account" /> < item android:id = "@+id/nav_settings" android:title = "Settings" /> < item android:id = "@+id/nav_logout" android:title = "Logout" /></ menu > |
Шаг 4. Работа с файлом activity_main.xml
- Вызовите следующий код в activity_main.xml, чтобы настроить основные вещи, необходимые для панели навигации.
XML
<? xml version = "1.0" encoding = "utf-8" ?><!--the root view must be the DrawerLayout-->< androidx.drawerlayout.widget.DrawerLayout android:id = "@+id/my_drawer_layout" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" tools:ignore = "HardcodedText" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" > < TextView android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginTop = "128dp" android:gravity = "center" android:text = "GeeksforGeeks" android:textSize = "18sp" /> </ LinearLayout > <!--this the navigation view which draws and shows the navigation drawer--> <!--include the menu created in the menu folder--> < com.google.android.material.navigation.NavigationView android:layout_width = "wrap_content" android:layout_height = "match_parent" android:layout_gravity = "start" app:menu = "@menu/navigation_menu" /></ androidx.drawerlayout.widget.DrawerLayout > |
Выходной интерфейс:
- Следует отметить, что значок ящика меню по-прежнему не отображается на панели действий. Нам нужно программно установить значок и его функцию открытия-закрытия.
Шаг 5. Включите строки Open Close в string.xml
- Вызовите следующий код в файле styles.xml.
XML
< resources > < string name = "app_name" >Navigation Drawer</ string > <!--to toggle the open close button of the navigation drawer--> < string name = "nav_open" >Open</ string > < string name = "nav_close" >Close</ string ></ resources > |
Шаг 6: Работа с файлом MainActivity.java
- Вызовите следующий код в файле MainActivity.java, чтобы отобразить значок меню на панели действий и реализовать функцию открытия-закрытия панели навигации.
- Комментарии добавляются внутри кода для лучшего понимания.
Ява
import androidx.annotation.NonNull;import androidx.appcompat.app.ActionBarDrawerToggle;import androidx.appcompat.app.AppCompatActivity;import androidx.drawerlayout.widget.DrawerLayout;import android.os.Bundle;import android.view.MenuItem;public class MainActivity extends AppCompatActivity { public DrawerLayout drawerLayout; public ActionBarDrawerToggle actionBarDrawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // drawer layout instance to toggle the menu icon to open // drawer and back button to close drawer drawerLayout = findViewById(R.id.my_drawer_layout); actionBarDrawerToggle = new ActionBarDrawerToggle( this , drawerLayout, R.string.nav_open, R.string.nav_close); // pass the Open and Close toggle for the drawer layout listener // to toggle the button drawerLayout.addDrawerListener(actionBarDrawerToggle); actionBarDrawerToggle.syncState(); // to make the Navigation drawer icon always appear on the action bar getSupportActionBar().setDisplayHomeAsUpEnabled( true ); } // override the onOptionsItemSelected() // function to implement // the item click listener callback // to open and close the navigation // drawer when the icon is clicked @Override public boolean onOptionsItemSelected( @NonNull MenuItem item) { if (actionBarDrawerToggle.onOptionsItemSelected(item)) { return true ; } return super .onOptionsItemSelected(item); }} |