Action bar functionality and possiblbities

1. Action Bar
Олег Годовых

2. Action Bar
Навигационная панель в верхней части приложения
1. Иконка + кнопка Up — навигация по приложению.
2. View control — переключение между View (вкладки,
выпадающий список) или заголовок.
3. Action buttons — наиболее важные функции.
4. Action overflow — все остальные функции, не попавшие в
Action buttons.
2 Action Bar

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

4. Back
Навигация в обратном хронологическом порядке через
историю экранов.
Может закрыть приложение.
Может вернуть пользователя в другое приложение
4 Action Bar

5. Up
Навигация на основе иерархических отношений между
экранами.
Отсутствует на самом верхнем экране.
Даёт гарантию, что пользователь останется внутри
приложения.
5 Action Bar

6. Up vs. Back
Передвижение между
разными беседами
происходит в рамках
одного экрана.
Поведение Up и Back будет
одинаковым.
6 Action Bar

7. Up vs. Back
Back проводит
пользователя через все
посещённые экраны (Book
1 и Book 2 на одном
уровне иерархии).
Up выводит сразу уровнем
выше, к списку книг.
7 Action Bar

8. Up vs. Back
Back снова проводит
пользователя через все
посещённые экраны.
Up переводит к ранее
непосещённому экрану,
который является
родителем в иерархии у
текущего.
8 Action Bar

9. Подключаем 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

10. Подключаем 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

11. Отображение Action Bar
Заголовок
actionBar.setTitle("TestApp");
Кнопка «Up»
actionBar.setDisplayHomeAsUpEnabled(true);
Своя View
actionBar.setCustomView(R.layout.custom_view);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
11 Action Bar

12. Action Buttons
Переопределяем методы в activity:
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>
onOptionsItemSelected(MenuItem item);
title нужно задавать всегда (может отображаться в меню)
12 Action Bar

13. 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

14. Action Buttons
android:showAsAction
never — элемент никогда не присутствует на ActionBar.
ifRoom — элемент показывается на ActionBar, если ему
хватает там места.
always — всегда показывать элемент на ActionBar,
использовать лишь для самых важных.
withText — показывать элемент вместе с текстом.
14 Action Bar

15. Навигация списком
Задаём Adapter
String[] 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);
Реализуем интерфейс, чтобы отслежить
нажатие на элементы списка:
... implements ActionBar.OnNavigationListener
...
@Override
public boolean onNavigationItemSelected(
int itemPosition, long itemId) {
return false;
}
15 Action Bar

16. Навигация вкладками
Создаём вкладки:
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TAB);
ActionBar.Tab tab1 = actionBar.newTab();
tab1.setText("tab1");
tab1.setTabListener(this);
actionBar.addTab(tab1);
...
Реализуем интерфейс для отслеживания нажатий:
... 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

17. Split Action Bar
<manifest ...>
<activity uiOptions="splitActionBarWhenNarrow" ... >
<meta-data android:name="android.support.UI_OPTIONS"
android:value="splitActionBarWhenNarrow" />
</activity>
</manifest>
17 Action Bar

18. 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

19. Action View
@Override
public 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() {
@Override
public boolean onMenuItemActionCollapse(MenuItem item) {
return true; // сворачивается
}
@Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true; // и разворачивается
}
});
return super.onCreateOptionsMenu(menu);
}
19 Action Bar

20. Кастомизация
Чтобы поменять стиль 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

21. Полезные ссылки
http://developer.android.com/design/
patterns/navigation.html
http://developer.android.com/guide/topics/
ui/actionbar.html
http://developer.android.com/design/
patterns/actionbar.html
http://developer.android.com/training/
basics/actionbar/index.html
http://www.androiduipatterns.com
21 Action Bar