Используем в приложении Navigation Drawer
Используем в приложении Navigation Drawer
Главная » Используем в приложении Navigation Drawer

Во многих приложениях используется выдвижная панелька под названием Navigation Drawer. Все ее видели, но не все знают, что она именно так называется. Использование Navigation Drawer дает приложению большую удобность в использовании, расширяет функционал, а также придает Android приложению более современный вид и стиль. Но не взирая на массовое распространенное использование этой штуки, толковых уроков по ее использованию не так много, а само использование Navigation Drawer не такое уж и простое и требует определенной работы. Этот урок я делаю на базе толкового урока с Хабра, имея желание его как то обобщить, упростить и представить в более доступной и ясной форме (не гарантирую, что так и будет).

Пример Navigation Drawer в приложении QuickMemo:

Navigation drawer quick memory

Итак, в этом уроке мы сделаем приложение, оборудованное выдвижным боковым меню Navigation Drawer с тремя пунктами для выбора, при нажатии на которые будет выполняться переход на разные экраны приложения. Эти экраны будут задаваться с помощью фрагментов, по умолчанию при запуске приложения будет запускаться первый экран.

Создаем новый проект, выбираем Blank Activity, минимальную версия Android я выберу 4+.

Сразу скачайте и поместите в соответствующие папки в drawable необходимые изображения для панели.

Начнем с работы над файлом activity_main.xml. В нем нам нужно создать специальный DrawerLayout и в нем поместить область FrameLayout для отображения выдвижной панели, а также список ListView, из которого и будет состоять Navigation Drawer. Для этого добавляем в файл следующий код:

<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/frame_for_drawer"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

 <ListView android:id="@+id/drawer_list"
 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>

Все строковые элементы мы создадим под конец.

Для определения вида каждого отдельного пункта списка панели, создадим отдельный файл в папке layout под названием nav_draw.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:background="@drawable/activated_background"
 android:gravity="center_vertical"
 android:minHeight="?attr/listPreferredItemHeightSmall"
 android:paddingLeft="16dp"
 android:paddingRight="16dp"
 android:textAppearance="?android:attr/textAppearanceMedium"
 android:textColor="#fff" />

В качестве фона для созданного выше элемента TextView мы используем xml файл из папки drawable. Давайте его создадим. В папке drawable создаем файл под названием activated_background.xml и добавим в него следующий код:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@color/blue" android:state_activated="true"/>
 <item android:drawable="@color/blue" android:state_selected="true"/>
 <item android:drawable="@color/blue" android:state_pressed="true"/>
 <item android:drawable="@color/blue" android:state_checked="true"/>
 <item android:drawable="@android:color/transparent"/>
</selector>

Здесь мы активно используем ссылку на синий цвет, пока еще не существующий в приложении. Чтобы его создать, в папке values создаем файл по имени color.xml и добавляем в него код:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <item name="blue" type="color">#FF33B5E5</item>
</resources>

Изменим меню приложения, изменив код в файле menu_main.xml в папке menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:sabd="http://schemas.android.com/apk/res-auto" >

 <item
 android:id="@+id/action_search"
 android:icon="@android:drawable/ic_menu_search"
 android:orderInCategory="100"
 android:title="@string/action_search"
 sabd:showAsAction="ifRoom"/>

</menu>

Что касается кода приложения, то в нем необходимо реализовать такие основные моменты:

- инициализировать все используемые объекты и переменные;

- задать поведение переключателю панели Navigation Drawer;

- настроить переход на необходимый фрагмент при выборе соответствующего пункта списка панели;

Код файла java класса должен выглядеть вот так (кликаем ссылку) MainActivity.java.

Чтобы приложение заработало, осталось доработать в нем фрагменты для перехода на них с Navigation Drawer и добавить все используемые строки. Чтобы реализовать фрагменты, создаем в проекте новый пакет под названием fragments и в нем создаем 3 класса по имени ScreenOneScreenTwoScreenThree:

Код во всех троих классах одинаков, за исключением xml файла интерфейса. Код для ScreenOne.java:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import home.study.R;

public class ScreenOne extends Fragment {

 public ScreenOne() {
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
 Bundle savedInstanceState) {

 View rootView = inflater.inflate(R.layout.screen_first, container,
 false);

 return rootView;
 }
}

Для настройки интерфейса этого класса мы ссылаемся на файл под названием screen_first, давайте его создадим. В папке layout создаем файл под названием screen_first.xml и добавим в него код:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
 
 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:text="@string/screen_one"
 android:textAppearance="?android:attr/textAppearanceMedium" />
 
</RelativeLayout>

Классы (кликаем ссылку) ScreenTwoScreenThree аналогичны первому ScreenOne, единственное отличие в строке ссылки на файл интерфейса:

inflater.inflate(R.layout.screen_first

Для второго и третьего фрагментов в папке layout нужно создать интерфейса файлы screen_second.xml и screen_third.xml, которые выглядят аналогично к тому же screen_first.xml с единственным отличием в ссылке на текстовый ресурс:

Второй экран:
android:text="@string/screen_two"

Третий экран:
android:text="@string/screen_three"

Остается только внести все используемые в проекте строковые ресурсы в файл strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">Study</string>
 <string name="action_search">Поиск</string>

 <string-array name="screen_array">
 <item>Вкладка 1</item>
 <item>Вкладка 2</item>
 <item>Вкладка 3</item>
 </string-array>

 <string name="drawer_open">Открыть navigation drawer</string>
 <string name="drawer_close">Закрыть navigation drawer</string>

 <string name="screen_one">Экран №1</string>
 <string name="screen_two">Экран №2</string>
 <string name="screen_three">Экран №3</string>

</resources>

Теперь можем рискнуть протестировать приложение. Запускаем проект и смотрим на результат:

Работает панель выдвижная

Все работает исправно, а мы научились создавать красивую и полезную выдвижную панель Navigation Drawer.

Категория: Уроки программирования | Просмотров: 1564 | Добавил: Oleg | Теги: выдвижная панель, Navigation Drawer, Android приложение с Navigation Dra | Рейтинг: 2.0/4
Всего комментариев: 1
avatar
Подскажите, как мне добавить свои иконки, к списку меню, и у меня почему то не отображаеться гамбургер
avatar