QML: анимированная иконка-«бутерброд» в стиле Material Design за 20 минут

У неё два действия: первое — вызов меню, а второе, когда меню уже вызвано, — стрелочкой «назад» закрыть это меню (как бы вернуться «назад» к тому, что было до открытия меню.

Один пример уже привели в комментарии выше. Кстати, хотел написать сразу в посте, но решил не засорять его лишней информацией — этим примером Google слегка нарушает собственные гайдлайны. Если судить по ним, боковая панель в приложениях с Material Design (в отличие от Holo) должна перекрывать и AppBar с иконкой, и даже заходить на область статусной строки (это поддерживается в Android 5.0).

Второй пример — сделать переход вглубь стека приложения без замены AppBar, только с заполнением области данных приложения новым контентом. Пример есть в том же руководстве по Material Design (см. третье видео).

с этим похоже google play не справляется, у меня получается получить состояние с полуоткрытым меню и полу-повернутой кнопкой. Интересно будет попробовать QML версию, по идее анимация должна всегда завершатся корректно.

Да ничего особенного не произойдёт. Интерпретатор QML проследит, чтобы Item перешёл в то состояние, которое было последним, и все его свойства установились соответствующим образом. В случае с данным переходом, вращение иконки будет завершено, а вот анимация верхнего и нижнего прямоугольников в «бутерброде» не будет завершена и они просто направятся обратно в исходное положение. Я попробовал (предварительно уменьшив скорость анимации), выглядит вполне прилично.

А ещё можно у каждого из экземпляров Animation установить свойство alwaysRunToEnd в true, тогда анимация свойства будет всегда завершаться полностью перед началом следующей анимации. Но в данном случае это не имеет смысла.

Размеры контейнера жёстко задаются в соответствии с гайдлайном. Конкретно в его случае будет более правильным для корректного масштабирования просто умножать все хардкодные значения на размер dp на данном устройстве (3 для xxhdpi и так далее).

Вообще, тема масштабирования QML-интерфейсов — это большая и отдельная история ещё как минимум на несколько постов. В случае с Android-приложениями и строгим следованием guidelines в целом более выгодной стратегией с моей точки зрения является как раз таки использование коэффициента масштабирования для всех элементов интерфейса. Благо, на Android это делается очень просто, если будет интересно, могу написать отдельный пост о том, как именно.

Если эта тема интересует, рекомендую ознакомиться с серией постов о масштабировании интерфейсов от Nuno Pinheiro, создателя темы Oxygen из KDE и сотрудника KDAB.

Нет, исключительно для статьи на Хабре я бы этот компонент точно писать не стал — мне лениво :)

На самом деле, я сейчас в свободное время разрабатываю Android-приложение на C++/QML и пытаюсь сделать максимально нативный интерфейс. Плюс некоторые компоненты используются в проектах, создаваемых по работе. Сейчас у нас накопился целый набор визуальных компонентов на QML в стиле Material Design, но он сыроват, да и сделан в рабочее время. Если удастся договориться с руководством, выложим на Github под какой-нибудь свободной лицензией.