Как добавить индикатор меню рядом со значком приложения Action Bar?

По крайней мере, приложения Gmail и Youtube для Android используют боковое меню (панель навигации?), который открывается смахиванием или щелчком по значку приложения (кнопка домой):

введите описание изображения здесь

Является ли индикатор / значок меню на скриншоте выше готовой частью Android SDK? (Или пользовательский значок, который Google использует в своих приложениях?) В любом случае, как проще всего сделать так, чтобы кнопка дома выглядела так, то есть как будто она открывает меню?

(targetSdkVersion 18; minSdkVersion 14)

разрешение

Наконец, заработал. Мне не хватало 1) фактический значок и 2) отложенный вызов syncState() на ActionBarDrawerToggle.


comment
Вы собираетесь использовать NavigationDrawer или просто хотите, чтобы он выглядел как на картинке? Индикатор ящика - это настраиваемый значок, который не только Google использует, чтобы указать, что нажатие кнопки «Домой» из ActionBar откроет меню.   -  person hardartcore    schedule 01.11.2013
comment
Я уже использую NavigationDrawer и мне нужен такой же вид, как на картинке. :)   -  person Jonik    schedule 01.11.2013


Ответы (3)


Чтобы создать аналогичную реализацию / внешний вид в своем приложении, вы должны использовать ActionBarDrawerToggle и установить свой собственный значок в качестве индикатора рядом с кнопкой HomeBar. Например :

import android.app.ActionBar;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;

private void setUpDrawerToggle(){
    ActionBar actionBar = getActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeButtonEnabled(true);

    // ActionBarDrawerToggle ties together the the proper interactions
    // between the navigation drawer and the action bar app icon.
    mDrawerToggle = new ActionBarDrawerToggle(
            this,                             /* host Activity */
            mDrawerLayout,                    /* DrawerLayout object */
            R.drawable.ic_drawer,             /* nav drawer image to replace 'Up' caret */
            R.string.navigation_drawer_open,  /* "open drawer" description for accessibility */
            R.string.navigation_drawer_close  /* "close drawer" description for accessibility */
    ) {
        @Override
        public void onDrawerClosed(View drawerView) {
            invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
        }
    };

    // Defer code dependent on restoration of previous instance state.
    // NB: required for the drawer indicator to show up!
    mDrawerLayout.post(new Runnable() {
        @Override
        public void run() {
            mDrawerToggle.syncState();
        }
    });

    mDrawerLayout.setDrawerListener(mDrawerToggle);
}

Где R.drawable.ic_drawer - это значок для использования в качестве индикатора. Вы можете найти его в Android Asset Studio; см. Индикатор панели навигации.

использованная литература

  1. ActionBarDrawerToggle
  2. Создание панели навигации
person hardartcore    schedule 01.11.2013
comment
Хорошо, это полезно. У меня уже есть ActionBarDrawerToggle с похожим кодом; теперь я просто ищу нужный значок из пакета значков .. . - person Jonik; 01.11.2013
comment
Любая идея? В пакете нет файлов с названием «ящик» (find . -name "*drawer*.png" ничего не находит). - person Jonik; 01.11.2013
comment
Вы также можете получить их отсюда: android-ui-utils.googlecode.com/hg/asset-studio/dist/ - person hardartcore; 01.11.2013
comment
Большой! Вот что мне было нужно. Можете ли вы отредактировать эту информацию в самом ответе, и я ее приму. - person Jonik; 01.11.2013
comment
Таким образом, хотя это выглядит очень многообещающе, этого недостаточно для отображения индикатора, по крайней мере, на моих устройствах. : - / Я нашел способ заставить его работать с API 18+, но ниже это остается открытым вопросом ... - person Jonik; 01.11.2013
comment
Проверьте отредактированный ответ. Этот код протестирован на API LEVEL 14 и работает. Если вы используете Android Studio для разработки, вы можете создать новый проект с NavigationDrawer реализованным и проверить исходный код. - person hardartcore; 01.11.2013
comment
Спасибо за ваши усилия, наконец-то все заработало. Любопытно, что mDrawerLayout.post(... mDrawerToggle.syncState(); ... ) был ключевым моментом, которого не хватало в моем коде! (Я вырезаю из вашего ответа некоторые не относящиеся к делу фрагменты, чтобы он был чище.) - person Jonik; 01.11.2013
comment
@ Android-Developer: у меня аналогичная проблема, 3-строчные значки не анимируются при открытии ящика: stackoverflow.com/questions/19829455/ - person rahstame; 07.11.2013
comment
вы должны звонить setUpDrawerToggle() из занятий onCreate? должны mDrawerLayout и mDrawerToggle быть просто переменными класса указанного действия? (я обновлю код, если так) - person wal; 02.10.2015

Android-Developer и HpTerm помог мне в правильном рирекции,

  1. Указывая на то, что это действительно специфично для NavigationDrawer (которым я уже был используя как в примере Google)
  2. Сообщаем, где найти значок ic_drawer.png (Android Asset Studio)

К сожалению, создания ActionBarDrawerToggle, как показано ниже, недостаточно. По крайней мере, на моем тестовом устройстве Nexus 7 (API 18).

drawerToggle = new ActionBarDrawerToggle(this, 
                       drawerLayout, 
                       R.drawable.ic_navigation_drawer, 
                       R.string.side_menu_open, 
                       R.string.side_menu_closed) {
    // ...
};

Частичное решение (уровень API 18+)

Я нашел один способ заставить индикатор отображаться: _ 3_. Обратная сторона: этот метод был добавлен в API уровня 18.

@Override
protected void onCreate(Bundle savedInstanceState) {
    // ...
    getActionBar().setDisplayHomeAsUpEnabled(true); // also required
    if (Build.VERSION.SDK_INT >= 18) {
        getActionBar().setHomeAsUpIndicator(
            getResources().getDrawable(R.drawable.ic_navigation_drawer));
    }
}

Итак, остается вопрос: как заставить это работать (в моем случае) для уровней API с 14 по 17?

Я проверил на устройстве 4.1.2 (API 16), что значок ic_drawer не отображается. С setDisplayHomeAsUpEnabled(true) я получаю обычный значок «домой» (маленькая стрелка, указывающая влево), а без него место, оставшееся до значка моего приложения, остается пустым.

Окончательное решение

Получил работу, используя отредактированную версию ответа разработчика Android.

Как ни странно, в моем коде инициализации ActionBarDrawerToggle не хватало следующего:

   // Defer code dependent on restoration of previous instance state.
   drawerLayout.post(new Runnable() {
        @Override
        public void run() {
            mDrawerToggle.syncState();
        }
    });

С учетом этого звонка setHomeAsUpIndicator() не требуется.

person Jonik    schedule 01.11.2013

Ключевое слово здесь: NavigationDrawer; на сайте разработчика Android есть полный пример рабочего кода.

ПРОЧИТАЙТЕ КОНЕЦ ДАННОЙ ССЫЛКИ: открывайте и закрывайте с помощью значка приложения

Следующий код скопирован оттуда

public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    ...

    public void onCreate(Bundle savedInstanceState) {
        ...

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer icon to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description */
                R.string.drawer_close  /* "close drawer" description */
                ) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Pass the event to ActionBarDrawerToggle, if it returns
        // true, then it has handled the app icon touch event
        if (mDrawerToggle.onOptionsItemSelected(item)) {
          return true;
        }
        // Handle your other action bar items...

        return super.onOptionsItemSelected(item);
    }

    ...
}

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

Вы должны скопировать эти файлы в соответствующую папку drawable. В зависимости от используемой темы, темной или светлой, у вас есть разный набор значков.

В моем случае я просто скопировал drawer_shadow.9.png и ic_drawer.png в папку с возможностью переноса и последовал примеру, и все работает нормально.

Значки доступны по ссылке, которую я предоставил, но они НЕ в «Пакете значков панели действий», они есть в образце приложения в соответствующем разрешении / вытяжные папки.

person HpTerm    schedule 01.11.2013
comment
Я уже использую NavigationDrawer. Я ищу конкретные инструкции по простейшему способу добавления этого значка / индикатора меню. - person Jonik; 01.11.2013
comment
Как я уже сказал, пример, приведенный по ссылке, дает все подробности. Просто скопируйте и вставьте пример, и он работает. Вы видели пример, приведенный разработчиком Android? Я могу скопировать и вставить сюда, но все в загружаемом примере. - person HpTerm; 01.11.2013
comment
Где именно вы нашли файлы drawer_shadow.9.png / ic_drawer.png? Кажется, что пакет значков панели действий, связанный с документом «Панель навигации», не работает содержат такие файлы. - person Jonik; 01.11.2013
comment
моя ошибка, они находятся в образце приложения, а не в пакете значков панели действий. Если вы загружаете образец приложения, перейдите в папки res / drawable. Вы найдете там значки - person HpTerm; 01.11.2013
comment
Спасибо! Я действительно нашел их в образце приложения. (Хотя я не уверен, что drawer_shadow.9.png уместен в моем случае.) Индикатор также можно найти здесь: android-ui-utils.googlecode.com/hg/asset-studio/dist / - person Jonik; 01.11.2013
comment
Спасибо за ответ. Я долго изо всех сил пытался найти значки и нашел их только в образце приложения в то время, когда я их искал. Таким образом, ссылка, предоставленная @ Android-Developer, полезна. - person HpTerm; 01.11.2013