Панель навигации в стиле материального дизайна Android 5.0 для KitKat

Я вижу, что Android представил новые значки ящика навигации, значок ящика и значок стрелки назад. Как мы можем использовать это в приложениях, поддерживаемых Kitkat. См. Последнюю версию приложения Google Newsstand, в которой есть последние значки и анимация панели навигации. Как мы можем это реализовать?

Я попытался установить minSDK на 19 и compileSDK на 21, но он использует значки старого стиля. Это реализовано самостоятельно?


person nomongo    schedule 20.10.2014    source источник
comment
Какую тему использует ваша деятельность?   -  person alanv    schedule 21.10.2014
comment
прямо сейчас, холо. Хотите переключиться на стиль материала и при этом быть совместимым с kitkat   -  person nomongo    schedule 21.10.2014
comment
Используйте тему Appcompat и проверьте ответ ниже   -  person Gabriele Mariotti    schedule 21.10.2014
comment
Google продолжает изменять дизайн ящика в каждом приложении, простой способ, которым они сделали в Google IO, прост и шаблон наложения mobilewebwizard.in/2015/01/   -  person Tarun Chaudhary    schedule 14.02.2015


Ответы (4)


Вам необходимо использовать новую панель инструментов в appcompat v21, а также новый ActionBarDrawerToggle, который есть в этой библиотеке.

Добавьте зависимость Gradle в свой файл Gradle:

compile 'com.android.support:appcompat-v7:21.0.0'

Ваш activity_main.xml макет будет выглядеть примерно так:

<!--I use android:fitsSystemWindows because I am changing the color of the statusbar as well-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true">

    <include layout="@layout/toolbar"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Main layout -->
        <FrameLayout
            android:id="@+id/main_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- Nav drawer -->
        <fragment
            android:id="@+id/fragment_drawer"
            android:name="com.example.packagename.DrawerFragment"
            android:layout_width="@dimen/drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="left|start" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

Макет вашей панели инструментов будет выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"/>

Ваша деятельность должна распространяться на:

ActionBarActivity

Когда вы найдете свои представления (ящик и панель инструментов) в действии, установите панель инструментов в качестве панели действий поддержки и установите setDrawerListener:

setSupportActionBar(mToolbar);
mDrawerToggle= new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar, R.string.app_name, R.string.app_name);
mDrawerLayout.setDrawerListener(mDrawerToggle);

После этого вам просто нужно позаботиться о пунктах меню и состоянии drawerToogle:

 @Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = new MenuInflater(this);
    inflater.inflate(R.menu.menu_main,menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

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

@Override
public void onBackPressed() {
    if(mDrawerLayout.isDrawerOpen(Gravity.START|Gravity.LEFT)){
        mDrawerLayout.closeDrawers();
        return;
    }
    super.onBackPressed();
}

Реализация такая же, как и до панели инструментов, и вы получаете анимацию стрелки бесплатно. Никаких головных болей. Для получения дополнительной информации следуйте:

Если вы хотите отобразить ящик над панелью инструментов и под строкой состояния, обратитесь к этот вопрос.

РЕДАКТИРОВАТЬ: используйте NavigationView из библиотеки дизайна поддержки. Руководство по использованию здесь: http://antonioleiva.com/navigation-view/

person jpardogo    schedule 24.10.2014
comment
У меня вопрос ... какова цель этого удивительного ArrowDrawable, когда Google рекомендует в спецификации материалов, что Drawer должен быть над панелью действий / панелью инструментов? - person Michał Z.; 24.10.2014
comment
Если честно, не знаю. Но вы можете найти хорошее обсуждение этого в этом сообщении google +: plus.google.com/102272971619910906878/ posts / CQW5Wejx44g - person jpardogo; 26.10.2014
comment
@ MichałZ. На самом деле этому есть довольно простое объяснение: чернила на бумаге не переносятся между листами бумаги. цитата Адама Пауэлла (нажмите). И, как вы, возможно, знаете: скользящие друг по другу листы бумаги - одна из основных концепций материального дизайна. - person reVerse; 31.10.2014
comment
В приложениях Google есть разные панели навигации: в магазине Play есть эта причудливая стрелка, которую можно рисовать, а в газетном киоске - материальный дизайн, который перемещает панель действий. androidpolice.com / 2014/10/30 / - person Dory; 03.11.2014
comment
Я следил за вашим ответом, но он не показывает никаких значков с анимацией или без нее - person Ravi; 05.11.2014
comment
Спасибо - отлично работает! Но есть ли способ избавиться от анимации стрелки? Я следую новейшим рекомендациям, и теперь я вижу, как гамбургер-меню превращается в стрелку под моим навигационным ящиком ... :( - person Zordid; 10.11.2014
comment
Отметьте этот ответ: stackoverflow.com/questions/26439572/. С помощью ‹item name = spinBars› false ‹/item› вы можете, по крайней мере, отключить вращение. - person jpardogo; 18.11.2014
comment
Можем ли мы иметь настраиваемый вид для панели инструментов, скажем, я хочу, чтобы значок ящика выровнялся по правому краю. Используя панель действий, мы можем установить любое пользовательское представление, которое захотим. Как это можно сделать на панели инструментов, если на панели инструментов нет setCustomView()? - person Dory; 10.12.2014
comment
Этот ответ сработал для исходного плаката, но не для меня. Может кто поможет? stackoverflow.com/q/27761660/3038563 - person wasimsandhu; 04.01.2015
comment
@jpardogo работает как шарм, но это не панель навигации, которая должна перекрывать панель действий / панель инструментов. что-то вроде этого google.com/design/spec/patterns/navigation-drawer .html - person T_C; 15.02.2015
comment
могу я сделать это с затмением? - person Lahiru Prasanna; 10.04.2015
comment
Действительно хороший ответ! Но ActionBarActivity следует изменить на AppCompatActivity. - person Jesson Atherton; 20.06.2015
comment
Я редактировал ответ время назад, пожалуйста, прочтите ответ до конца. NavigationView - person jpardogo; 06.08.2015

Ответ больше бесполезен. Оставим его здесь только с исторической целью, поскольку на момент публикации Android реализации не было :)


Сейчас существует множество библиотек, которые могут этого добиться.

Вариант 1 - https://github.com/neokree/MaterialNavigationDrawer

Другие

person appbootup    schedule 27.12.2014
comment
Я бы очень посоветовал в первую очередь проект Реймера, а не неокрея. Первый правильно помещает панель навигации за панелью задач, включает в себя все необходимые источники и может построить проект, а второй не работает на всех учетных записях. Хотя Reimer's в настоящее время не работает над 5.1 и все еще содержит ошибки. - person RedGlyph; 24.04.2015
comment
Отметьте это, код Реймера недостаточно зрел и, вероятно, хочет заняться слишком многими вещами, которые все еще нуждаются в отладке, что не делает его дидактическим примером. github.com/kanytu/android-material-drawer-template лучше пример, но он больше не поддерживается в пользу его последней версии (github.com/kanytu/ Android-studio-material-template), который на самом деле является шаблоном для Android Studio! Намного лучше начать с этого ИМХО. - person RedGlyph; 24.04.2015
comment
первый выбор сомнительный - необходимость расширения класса, отличного от ActionBarActivity, - это PITA, потому что тогда у вас не может быть общего базового класса для действий - person Display Name; 16.05.2015

Если вам нужна настоящая панель навигации со стилем материального дизайна (определенная здесь)
Я реализовал специальную библиотеку, которая делает именно это.
Вы можете найти его здесь

person NeoKree    schedule 18.11.2014
comment
Могу я сделать это затмение, а не студию Android ..? потому что мне нужен этот навигационный ящик - person GvSharma; 21.01.2015
comment
Конечно, но вам придется вручную импортировать все зависимости и коды. - person NeoKree; 22.01.2015
comment
Кажется, у него довольно много проблем, вы тестировали сборку на свежем клоне? С моей точки зрения, каталоги проектов находятся на нескольких уровнях, вам нужно как минимум добавить это в свой пример settings.gradle: project(':MaterialNavigationDrawerModule').projectDir = new File('../MaterialNavigationDrawerModule'). Затем он пытается импортировать import it.neokree.example.backpattern.BackPatternCustom;, которого не существует. Еще 93 открытых вопроса. Приятно предоставить библиотеку ... если она прочная. - person RedGlyph; 24.04.2015

Поддержка верхнего комментария вместе с новым сгенерированным макетом main_content. Я просто заменяю включенный макет содержимого с помощью DrawerLayout. Имейте в виду, что ваш drawerlayout должен иметь следующее layout_behavior: appbar_scrolling_view_behavior

макет верхнего контейнера https://github.com/juanmendez/jm_android_dev/blob/master/01.fragments/06.fragments_with_rx/app/src/main/res/layout/activity_recycler.xml#L17

включенный макет содержимого https://github.com/juanmendez/jm_android_dev/blob/master/01.fragments/06.fragments_with_rx/app/src/main/res/layout/content_recycler.xml#L9

см. панель навигации !!

person Juan Mendez    schedule 26.10.2015