Разработка пользовательского интерфейса

Пользовательский интерфейс является одним из важнейших этапов разработки любого мобильного приложения. Интерфейс должен быть простым и удобным.

Навигация по приложению Процесс навигации по нашему приложения будет осуществлять с помощью виджета NavigationDrawer. NavigationDrawer был разработан компанией Google и представляет собой выдвижную панель в которой находится список элементов, нажатием на которые мы можем осуществлять навигацию по приложению.

Мы будем использовать расширенную под Material Design версию NavigationDrawer взятую с GitHub.

Чтобы использовать библиотеки с GitHub первым делом потребуется интегрировать их в приложение. Для этого мы должны зайти в созданный средой разработки файл с расширением gradleb в dependencies {} вставить следующие строчки кода:

compile ('com.mikepenz:materialdrawer:5.2.0@aar') {transitive = true.

}.

В общем код выглядит так:

dependencies {.

compile fileTree (dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12'.

compile 'com.android.support:appcompat-v7:23.1.1' compile ('com.mikepenz.materialdrawer:library:0.9.5@aar') {.

transitive = true.

}.

Далее следует нажать кнопку «sync now». Среда разработки автоматически синхронизируется с GitHub, после чего мы сможем использовать необходимые для разработки библиотеки.

Следующим этапом будет создание разметки для основного Activity приложения. В нашем приложении будет лишь одно Activity, а отображение контента будет происходить в фрагментах.

Разметка основного Activity:

tools:context=". MainActivity">

android:transitionName= «actionBar"/>

Мы используем RelativeLayout в котором располагаются два объекта android.support.v7.widget. Toolbar и FrameLayout.

android.support.v7.widget. Toolbar.

Данная строка указывает на то, что в разметка будет присутствовать ToolBar. ToolBar был добавлен компанией Google для Android с API 21, однако может поддерживаться от API 19 с использование support библиотек, и представляет улучшенный аналог ActionBar. ToolBar представляет собой панель в верхней части приложения, на которой можно расположить иконки, текст, например, наименование текущего Activity или фрагмента и прочее.

FrameLayout. В данном layout в дальнейшем будут размещаться элементы fragment нашего приложения.

Код приложения для создания NavigationDrawer:

Toolbar toolbar = (Toolbar) findViewById (R.id.toolbar); setSupportActionBar (toolbar); getSupportActionBar ().setDisplayHomeAsUpEnabled (true); new Drawer ().

withActivity (this).

withToolbar (toolbar).

withActionBarDrawerToggle (true).

withHeader (R.layout.drawer_header).

addDrawerItems (new.

PrimaryDrawerItem ().withName (R.string.drawer_item_home).withIcon (FontAwes ome. Icon.faw_home), new PrimaryDrawerItem ().withName (R.string.drawer_item_base).withIcon (FontAwes ome. Icon.faw_cubes), new.

PrimaryDrawerItem ().withName (R.string.drawer_item_equipment).withIcon (Font Awesome. Icon.faw_fire).

).

.w ithOnDrawerItemClickListener (new Drawer. OnDrawerItemClickListener ().

{.

@Override.

public void onItemClick (AdapterView parent, View view, int position, long id, IDrawerItem drawerItem) {.

}.

}).

build ();

Рассмотрим код подробнее.

Сперва нам необходимо получить доступ к взаимодействию с ToolBar, который мы вставляли в разметку основного Activity нашего приложения. Для этого вернемся к разметке и найдем там строчку «android:id= „@+id/toolbar“». В ней указано, что id — это toolbar. Далее в коде прописываем строчку «Toolbar toolbar = (Toolbar) findViewById (R.id.toolbar);», которая означает, что мы создадим новую переменную с типом данных ToolBar, названием toolbar и присвоим ей значение, а именно элемент найденный по id «toolbar».

«setSupportActionBar (toolbar);» в данной строчке указывается, что теперь ActionBar приложения будет заменен на ToolBar, который мы указали в разметке.

Для создания NavigationDrawer «new Drawer ()». Далее мы можем настроить NavigationDrawer, вызывая его методы и передавая необходимые атрибуты.

withActivity (this) метод указывает в каком Activity будет располагаться NavigationDrawer и в него передается атрибут типа данных context.

withToolbar (toolbar) метод указывает, что будет использоваться ToolBar и в него передается атрибут типа данных ToolBar.

withActionBarDrawerToggle (true) метод указывает будет ли переключатель для вызова панели. Если указать false, то NavigationDrawer можно было вызвать только жестом пальца.

withHeader (R.layout.drawer_header) метод указывает, что будет использоваться изображение в NavigationDrawer. Атрибутом передаваемым в данный метод является идентификатор разметки для изображения.

В нашем приложении разметка для изображения выглядит следующим образом:

xml version= «1.0» encoding= «utf-8»?>

android:adjustViewBounds= «true» android: orientation= «vertical» android: scaleType= «fitCenter» android: src= «@drawable/header">

«addDrawerItems ()» данный метод создает список, в него передаются элементы списка.

Разберем подробнее элементы списка NavigationDrawer.

PrimaryDrawerItem ().withName (R.string.drawer_item_home).withIcon (Fon tAwesome. Icon.faw_home).

PrimaryDrawerItem () и SecondaryDrawerItem () данные методы служат для создания элементов списка. Между собой они отличаются используемыми атрибутами характеризующими их дизайн.

withName () метод указывает на текст отображаемом в списке, его можно написать туже или идентифицировать из документа String как это сделано в примере R.string.drawer_item_home.

В нашем приложения часть документа String с наименованием элементов NavigationDrawer выглядит так:

Основная База Оборудование Преимуществом использования данного документа заключается в возможности создания приложения на разных языках без лишних усилий. Для это потребуется создать несколько таких документов для разных языков. Они будут выбираться автоматически в зависимости от языковых настроек мобильного устройства.

withIcon () метод указывается что будет использовать иконка.

«FontAwesome. Icon.faw_home» идентифицирует иконку из библиотеки FontAwesome.

Для обработки нажатий в NavigationDrawer используется следующий метод в котором описываются действия происходящие при нажатия на элемент списка:

withOnDrawerItemClickListener (new Drawer. OnDrawerItemClickListener () {.

@Override.

public void onItemClick (AdapterView parent, View view, int position, long id, IDrawerItem drawerItem) {.

}.

}).

build ();

Важной частью любого программного продукта является его дизайн. NavigationDrawer, который мы используем был специально расширен для Material Design, мы можем изменять его цветовую палитру путем написания соответствующих атрибутов в color.xml.

Код разметки из color. xml для NavigationDrawer:

#F44336.

#D32F2 °F.

#FFCDD2.

#4CAF50.

#F9F9F9.

#212 121.

#FFFFFF.

#727 272.

#42 000 000.

#B6B6B6.

#E8E8E8.

#F44336.

#FFF.

#303 030.

#DEFFFFFF.

#8AFFFFFF.

#8AFFFFFF.

#42FFFFFF.

#1FFFFFFF.

#202 020.

@color/material_drawer_primary.

#FFF.