Action Bar

Олег Годовых

Action Bar

Навигационная панель в верхней части приложения

1. Иконка + кнопка Up — навигация по приложению.2. View control — переключение между View (вкладки,выпадающий список) или заголовок.

3. Action buttons — наиболее важные функции.4. Action overflow — все остальные функции, не попавшие вAction buttons.

2 Action Bar

Навигация

I Всё должно быть предсказуемо.I До Android 3.0 был толькозаголовок и вся навигацияосуществлялась с помощьюкнопки «back».

I В Android 3.0 появились Actionbar и кнопка «up».

3 Action Bar

Back

I Навигация в обратном хронологическом порядке черезисторию экранов.

I Может закрыть приложение.I Может вернуть пользователя в другое приложение

4 Action Bar

Up

I Навигация на основе иерархических отношений междуэкранами.

I Отсутствует на самом верхнем экране.I Даёт гарантию, что пользователь останется внутриприложения.

5 Action Bar

Up vs. Back

I Передвижение междуразными беседамипроисходит в рамкаходного экрана.

I Поведение Up и Back будетодинаковым.

6 Action Bar

Up vs. Back

I Back проводитпользователя через всепосещённые экраны (Book1 и Book 2 на одномуровне иерархии).

I Up выводит сразу уровнемвыше, к списку книг.

7 Action Bar

Up vs. Back

I Back снова проводитпользователя через всепосещённые экраны.

I Up переводит к ранеенепосещённому экрану,который являетсяродителем в иерархии утекущего.

8 Action Bar

Подключаем Action Bar в Android 3.0 и выше

В AndroidManifest.xml<activity android:theme= "@android:style/Theme.Holo"...>

В коде наследуемся от ActionBarActivity.Получить Action Bar:import android.app.ActionBar;...ActionBar actionBar = getActionBar();

Скрыть Action Bar:Из ресурсов:<activity android:theme="@android:style/Theme.Holo.NoActionBar" ... >

Из кода:ActionBar actionBar = getActionBar();actionBar.hide();

9 Action Bar

Подключаем Action Bar в Android 2.1 с Support Library

В AndroidManifest.xml<activity android:theme= "@android:style/Theme.AppCompat.Light"...>

В коде наследуемся от ActionBarActivity.Получить Action Bar:import android.support.v7.app.ActionBar;...ActionBar actionBar = getSupportActionBar();

Скрыть Action Bar:Из ресурсов:<activity android:theme="@android:style/Theme.AppCompat.Light.NoActionBar" ... >

Из кода:ActionBar actionBar = getSupportActionBar();actionBar.hide();

10 Action Bar

Отображение Action Bar

I ЗаголовокactionBar.setTitle("TestApp");

I Кнопка «Up»actionBar.setDisplayHomeAsUpEnabled(true);

I Своя ViewactionBar.setCustomView(R.layout.custom_view);actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

11 Action Bar

Action Buttons

Переопределяем методы в activity:I onCreateOptionsMenu(Menu menu);

<menu xmlns:android="http://schemas.android.com/apk/res/android><item android:id="@+id/action_search"

android:icon="@drawable/search_icon"android:title="@string/action_search"android:showAsAction="ifRoom|withText"/>

</menu>

I onOptionsItemSelected(MenuItem item);

title нужно задавать всегда (может отображаться в меню)

12 Action Bar

Action Buttons

Для Android 2.1 надо будет прописать namespace.<menu xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:yourapp="http://schemas.android.com/apk/res-auto">

<item android:id="@+id/action_search"android:icon="@drawable/ic_action_search"android:title="@string/action_search"yourapp:showAsAction="ifRoom" />

...</menu>

13 Action Bar

Action Buttons

android:showAsActionI never — элемент никогда не присутствует на ActionBar.I ifRoom — элемент показывается на ActionBar, если емухватает там места.

I always — всегда показывать элемент на ActionBar,использовать лишь для самых важных.

I withText — показывать элемент вместе с текстом.

14 Action Bar

Навигация списком

I Задаём AdapterString[] data = new String[] { "one", "two", "three" };actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);ArrayAdapter<String> adapter = new ArrayAdapter<String>

(this, android.R.layout.simple_spinner_item, data);adapter.setDropDownViewResource(

android.R.layout.simple_spinner_dropdown_item);actionBar.setListNavigationCallbacks(adapter, this);

I Реализуем интерфейс, чтобы отслежитьнажатие на элементы списка:... implements ActionBar.OnNavigationListener...@Overridepublic boolean onNavigationItemSelected(

int itemPosition, long itemId) {

return false;}

15 Action Bar

Навигация вкладками

I Создаём вкладки:actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TAB);

ActionBar.Tab tab1 = actionBar.newTab();tab1.setText("tab1");tab1.setTabListener(this);actionBar.addTab(tab1);...

I Реализуем интерфейс для отслеживания нажатий:... implements ActionBar.TabListener...public void onTabSelected(ActionBar.Tab tab, FragmentTransaction

fragmentTransaction) { // вкладка выбрана в первый раз}public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction

fragmentTransaction) { // вкладка перестаёт быть выбранной}public void onTabReselected(ActionBar.Tab tab, FragmentTransaction

fragmentTransaction) { // повторное нажатие на выбранную вкладку}

16 Action Bar

Split Action Bar

<manifest ...><activity uiOptions="splitActionBarWhenNarrow" ... >

<meta-data android:name="android.support.UI_OPTIONS"android:value="splitActionBarWhenNarrow" />

</activity></manifest>

17 Action Bar

Action View

Виджет, заменяющий кнопкупри нажатии

Объявление в файле меню:<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:yourapp="http://schemas.android.com/apk/res-auto" ><item android:id="@+id/action_search"

android:title="@string/action_search"android:icon="@drawable/ic_action_search"yourapp:showAsAction="ifRoom|collapseActionView"yourapp:actionViewClass="android.support.v7.widget.SearchView" />

</menu>

18 Action Bar

Action View

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main_activity_actions, menu);MenuItem searchItem = menu.findItem(R.id.action_search);SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);// API 11+// SearchView searchView = menu.findItem(R.id.action_search).getActionView();

MenuItemCompat.setOnActionExpandListener(menuItem, new OnActionExpandListener() {@Overridepublic boolean onMenuItemActionCollapse(MenuItem item) {

return true; // сворачивается}

@Overridepublic boolean onMenuItemActionExpand(MenuItem item) {

return true; // и разворачивается}

});

return super.onCreateOptionsMenu(menu);}

19 Action Bar

Кастомизация

Чтобы поменять стиль ActionBar, задаем приложению свойстиль:<style name="Theme.CustomActionBar" parent="android:style/Theme.Holo.Light">...</style>

<activity android:theme="@style/Theme.CustomActionBar" ... >

http://jgilfelt.github.io/android-actionbarstylegenerator/

20 Action Bar

Полезные ссылки

I http://developer.android.com/design/patterns/navigation.html

I http://developer.android.com/guide/topics/ui/actionbar.html

I http://developer.android.com/design/patterns/actionbar.html

I http://developer.android.com/training/basics/actionbar/index.html

I http://www.androiduipatterns.com

21 Action Bar