Начало работы с редактором движения в Android Studio 4.0

Android Studio Редактор движения

Android Studio 4.0 представляет собой довольно большое обновление для IDE и предлагает много возможностей для разработчиков. Возможно, самая захватывающая новая функция — «Редактор движения». Эта функция призвана помочь разработчикам создавать более привлекательные анимированные макеты. Это может значительно улучшить пользовательский интерфейс любого приложения, и теперь это значительно проще!

Также прочитайте: Введение в Jetpack Compose для быстрой разработки пользовательского интерфейса Android

Основы

Ранее для того, чтобы анимировать макет, вы должны были вручную изменить XML. Этот новый редактор значительно облегчает процесс, генерируя этот код для вас и позволяя вам обрабатывать фактический дизайн с помощью визуального редактора. По крайней мере, в теории!

Это Google, реализация не совсем интуитивно понятна

По сути, вы будете создавать разные версии макетов, просто перетаскивая элементы, которые вы определили в «базовом» макете. Затем вы создадите переходы, которые будут перемещать эти версии из первого расположения во второе и т. Д.

Также прочитайте: Все последние новости Android-разработчиков и функции, о которых вы должны знать!

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

Настройка

Для начала вам необходимо убедиться, что у вас есть Android Studio 4.0, который теперь доступен на стабильном канале. Вам также необходимо убедиться, что вы используете следующую зависимость ConstraintLayout, поскольку MotionLayout является частью бета-версии макета ограничения.

implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'

Или:

com.android.support.constraint:constraint-layout:2.0.0-beta1

Затем вам нужно настроить новый файл ресурсов макета. Убедитесь, что для элемента Root установлено значение: androidx.constraintlayout.motion.widget.MotionLayout.

Также прочитайте: Android Studio учебник для начинающих

Как только это будет сделано, вы попадете прямо в новый редактор Motion Editor!

В настоящий момент вы увидите сообщение о том, что Motion Editor не может быть использован и у вас есть ошибка синтаксиса MotionScene. Отличное начало!

Создание вашей первой MotionScene

Сначала нам нужно создать сцену движения.

Объект MotionScene описывает, как элементы будут анимироваться в MotionLayout. Чтобы определить этот объект, нам нужно создать еще один XML-файл в папке XML. Затем будут перечислены состояния макета, которые можно использовать, и способы их перемещения.

Вот редактор движения

Кстати, некоторые другие IDE сделали бы это автоматически, когда вы впервые создали новый MotionLayout. Но я отвлекся!

К счастью, Android Studio делает это немного проще для нас. Просто щелкните красный восклицательный знак рядом с тем, где написано «MotionLayout» в дереве компонентов, и вам будет предложено создать новый файл MotionScene. Нажмите «Исправить», и он сгенерирует это от вашего имени и поместит в нужное место!

Автоматически сгенерированному файлу будет присвоено имя вашего файла макета с добавлением «_scene.xml». Мой файл макета называется «motionlayoutexample», а моя сцена называется «motionlayoutexample_scene.xml».

Ваша сцена должна содержать следующий XML:












На данный момент виджет, к которому это относится, не существует, но мы исправим это позже.

Вернитесь к макету движения и выберите представление кода. Я собираюсь бросить Собственный пример Google здесь:





Обратите внимание, что я изменил файл MotionScene на свой собственный motionlayoutexample_scene. Этот макет просто показывает кнопку на экране с идентификатором «кнопка».

Досадно, что мне нужно было перезапустить Android Studio, прежде чем он подтвердит, что я правильно добавил layoutDescription. Попробуйте, если у вас есть проблемы!

Готовый макет движения

Как только это будет сделано, вы сможете переключиться в режим проектирования и увидеть кучу новых элементов управления, с которыми вы можете поиграть. Вы также заметите, что в левом верхнем углу экрана есть кнопка!

Как оживить

Элементы управления справа позволяют увидеть два состояния, которые может принять макет: состояние «начало» и состояние «конец». Вы также увидите «базовое состояние», которое вы сейчас видите, именно так, как оно определено в папке макета.

Android Studio фактически называет их «ConstraintSets». Значок в левом верхнем углу этого окна (который выглядит как два узла с небольшим зеленым плюсом внизу) позволит вам создать новое состояние. Следующий инструмент (стрелка) определяет новый переход между этими состояниями. Значок третьего пальца позволяет определить действия, которые запускают переходы и изменения состояния. Это называется обработчиком щелчка или пролистывания.

Переместить конечное состояние кнопки

Проверьте XML-файл motionlayoutexample_scene, и вы увидите теги ограничений «Start» и «End», которые определяют эти два макета. Вы также найдете тег перехода, который сообщает Android, что между ними есть какой-то переход.

Вы можете выбрать любое из состояний, чтобы просмотреть их в редакторе слева.

Давайте попробуем перейти в «конечное» состояние. С этим выбранным, вы собираетесь редактировать ограничения, чтобы разместить его в нижней части экрана.

Переключитесь назад и кнопка должна волшебным образом появиться сверху! Опять же, прошло немного времени, прежде чем Android Studio сыграла в мяч для меня. Но вы также можете достичь того же эффекта, отредактировав XML в вашей сцене с начальной позицией, установленной в первом ограничении, и конечной позицией во второй.

Вот как Google это сделал:







Чтобы увидеть анимацию в действии, просто нажмите на сам переход (стрелка над двумя состояниями), затем нажмите кнопку воспроизведения. Теперь вы должны увидеть кнопку несколько раз скользить вниз по экрану! Вы также можете установить ключевые кадры таким образом для более продвинутой анимации.

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

Куда пойти отсюда

Несмотря на то, что инструмент сейчас немного сложен и глючит, он, безусловно, имеет большой потенциал. И это еще не все!

Конечно, вы можете добавлять новые виды так же, как обычно, через редактор (убедитесь, что выбран Motion Layout по умолчанию). Вы также можете добавлять новые состояния и переходы между ними. Если вы хотите добавить пользовательские элементы в анимацию (например, изменение цвета), вы можете сделать это с помощью пользовательских атрибутов. Надеемся, что это будет встроено в собственно редактор в будущем.

Обработчик кликов

Проверьте официальная документация от Google Больше подробностей. Надеемся, что это введение познакомило вас с основами, и теперь у вас есть хорошее представление о том, что можно сделать с помощью нового редактора движения и как начать работу. Дайте нам знать, как вы ладите в комментариях ниже!

Счастливого оживления!

Похожие записи

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

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