App Inventor 2 — псевдо-экраны

https://alashed-media.s3.eu-north-1.amazonaws.com/wiki/martyncurrey/app-inventor-2-pseudo-screens-1.png

Как вы могли заметить из других моих публикаций, я использую App Inventor 2 для создания Android-приложений. У меня нет времени изучать программирование на Java, и я обнаружил, что App Inventor — это простой способ войти в мир Android-приложений. AI2 не идеален. Он разработан как учебное пособие, а не как полнофункциональный язык программирования для Android, и поэтому в нём многого не хватает. Тем не менее, с его помощью можно создавать удивительно продвинутые приложения. Приложения Arduino Bluetooth Control и dropController были созданы в AI2, как и новое приложение Bluetooth Control Panel.

Используя AI2, довольно просто создавать приложения с несколькими экранами, но это имеет недостаток. AI2 не может делить Bluetooth-соединение между разными экранами. Это значит, что нам нужен обходной путь. Мой способ — использование псевдо-экранов. Они выглядят и действуют как обычные экраны, но на самом деле являются контейнерами внутри одного экрана. Я обычно использую вертикальные компоновки (Vertical Arrangement) в качестве контейнеров содержимого, но можно использовать и другие типы элементов.

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

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

https://alashed-media.s3.eu-north-1.amazonaws.com/wiki/martyncurrey/app-inventor-2-pseudo-screens-2.jpg

Блоки для этого довольно простые.

https://alashed-media.s3.eu-north-1.amazonaws.com/wiki/martyncurrey/app-inventor-2-pseudo-screens-3.jpg

Чтобы немного облегчить жизнь при работе с AI2, я оставляю некоторые настройки Designer View по умолчанию и устанавливаю контейнеры содержимого в размер, помещающийся в поле зрения. Затем я изменяю настройки в блоках. Это означает, что мне не нужно помнить об их изменении перед запуском приложения или сборкой apk.

Я изменяю настройки в блоке Screen1.Initialize, который всегда выполняется первым при запуске приложения. Здесь я делаю экран без прокрутки и изменяю размер контейнеров PAGE1_VA и PAGE2_VA. Затем я отключаю PAGE2_VA.

https://alashed-media.s3.eu-north-1.amazonaws.com/wiki/martyncurrey/app-inventor-2-pseudo-screens-4.jpg

После инициализации приложения оно ожидает нажатия пользователем кнопок страниц. Следует отметить, что кнопка текущей страницы неактивна. Это означает, что на Странице 1 можно нажать только кнопку Страницы 2, и наоборот.

https://alashed-media.s3.eu-north-1.amazonaws.com/wiki/martyncurrey/app-inventor-2-pseudo-screens-5.jpg

При нажатии кнопки функция нажатой кнопки передаёт значение страницы в функцию tabs. Функция tabs сначала вызывает функцию TABS_OFF, которая отключает все вкладки и контейнеры содержимого, а затем включает вкладку и содержимое для текущей страницы. Отключение всего может показаться расточительным, но это упрощает логику и делает систему вкладок легко масштабируемой. Добавление третьей и четвёртой страницы очень простое.

https://alashed-media.s3.eu-north-1.amazonaws.com/wiki/martyncurrey/app-inventor-2-pseudo-screens-6.jpg

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

https://alashed-media.s3.eu-north-1.amazonaws.com/wiki/martyncurrey/app-inventor-2-pseudo-screens-7.jpg

Скачать

Скачать AI2 Pseudo Screens (3.51 KB)