Action Bar. Добавляем иконки-действия

| 22.07.2014

ActionBar сегодня — это повсеместно используемый design-паттерн, который позволяет значительно упростить навигацию и улучшить юзабилити вашего приложения. В этом уроке мы рассмотрим, как можно добавить в Action Bar «иконки-действия». По сути, речь идет о том, как вынести из меню опций некоторые пункты, чтобы они отображались открыто как иконки в Action Bar. Кликая по ним, происходит отработка определенного действия точно также, как при обработке событий для меню опций.

Создадим приложение с двумя пунктами в options-меню. Один пункт — refresh вынесем как иконку в Action Bar, а второй — settings будет отображаться только в меню.

Нам понадобятся:

1. MainActivity.java — класс Активити
2. activity_main.xml — layout для Активити
3. main.xml — ресурс с описанием пунктов меню
4. strings.xml — строковые ресурсы
5. Иконка для действия refresh

Прежде всего, давайте скачаем нужную иконку. Взять ее можно здесь. Скачайте the Action Bar Icon Pack и скопируйте по нужным папкам ресурсов (drawable) иконку ic_action_refresh.png. Обратите внимание, что иконка доступна в нескольких цветовых вариантах.

Добавим строковые ресурсы res/values/strings.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <string name="app_name">BarIcons</string>
    <string name="refresh">refresh</string>
    <string name="settings">settings</string>
</resources>

Добавим описание меню res/menu/main.xml

1
2
3
4
5
6
7
8
9
10
11
12
<menu xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/refresh"
        app:showAsAction="ifRoom"
        android:icon="@drawable/ic_action_refresh"
        android:title="@string/refresh"/>
 
    <item android:id="@+id/settings"
        app:showAsAction="never"
        android:title="@string/settings"/>          
</menu>

Здесь, думаю, вы уже заметили разницу в описании пунктов меню. Для первого пункта мы добавили значение ifRoom для свойства app:showAsAction, что означает — показывать этот пункт как иконку-действие, если имеется свободное место в ActionBar-е. Также можно использовать значение always. Приставка app соответствует namespace:

1
xmlns:app="http://schemas.android.com/apk/res-auto"

Также мы добавили ссылку на ресурс-иконку для первого пункта меню.

Файл layout — res/layout/activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name" />
 
 
</LinearLayout>

Здесь простой LinearLayout с одним TextView внутри (TextView можно было бы совсем исключить).

Класс Активити — MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package ru.androiddocs.baraction;
 
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
 
public class MainActivity extends ActionBarActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {        
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
 
        switch (item.getItemId()) {
            case R.id.refresh:
                Toast.makeText(this, "refresh", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.settings:                
                Toast.makeText(this, "settings", Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

В классе Активити — обычный для options-меню код. При нажатии на один из пунктов меню выводим всплывающее сообщение Toast.

Запускаем и получаем следующую картинку:

Action Bar. Добавляем иконки-действия

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*