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

Основными инструментами для этого являются компоненты HorizontalArrangement (Горизонтальное расположение) и VerticalArrangement (Вертикальное расположение). Как следует из названий, первый располагает элементы в ряд по горизонтали, а второй — в столбец по вертикали.

Представьте, что вам нужно создать карточку профиля пользователя. Слева должна быть фотография, а справа — имя и описание. Сделать это с помощью простого перетаскивания невозможно. Но если вы поместите HorizontalArrangement, а в него — компонент для изображения и VerticalArrangement, то задача становится простой. В вертикальный макет вы затем сможете добавить текстовые поля для имени и описания.

Помимо макетов, App Inventor предлагает набор компонентов для более сложного взаимодействия с пользователем, чем простые кнопки. Эти элементы позволяют пользователям делать выбор, настраивать параметры и вводить данные более интуитивно.

Использование этих компонентов делает интерфейс более современным и удобным. Например, вместо того чтобы просить пользователя ввести громкость числом от 0 до 100, гораздо лучше предоставить ему Slider. Это не только уменьшает вероятность ошибки, но и дает мгновенную визуальную обратную связь.

Иногда вам нужно прервать основной поток работы приложения, чтобы сообщить пользователю что-то важное, попросить подтверждение или запросить короткий ввод текста. Для этих целей служит невидимый компонент Notifier (Уведомитель).

Этот компонент может показывать несколько типов диалоговых окон:

• Простые оповещения (ShowAlert): Простое сообщение для информирования пользователя.
• Диалоги подтверждения (ShowChooseDialog): Задают вопрос и предоставляют две или три кнопки на выбор (например, «Да», «Нет», «Отмена»).
• Диалоги ввода текста (ShowTextDialog): Показывают окно с полем для ввода текста. Это удобно для запроса имени пользователя или пароля.

Ключевая особенность Notifier в том, что он работает асинхронно. Когда вы вызываете диалог, программа не останавливается. Вместо этого, после того как пользователь взаимодействует с окном (нажимает кнопку или вводит текст), срабатывает соответствующее событие, например Notifier.AfterChoosing или Notifier.AfterTextInput. В блоках этого события вы и должны обрабатывать выбор пользователя.

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

Основное правило — избегать фиксированных размеров в пикселях. Вместо того чтобы задавать ширину кнопки как 100 pixels, используйте относительные единицы. В App Inventor для этого есть два отличных варианта:

1. Проценты (Percent): Вы можете задать ширину или высоту компонента как процент от размера родительского контейнера (например, экрана).
2. Заполнение (Fill Parent): Этот параметр заставляет компонент растянуться, чтобы занять все доступное пространство по ширине или высоте внутри его контейнера.

Также обращайте внимание на свойство Screen.Sizing. Если установить его в значение Responsive, приложение будет лучше масштабировать текст и компоненты на экранах с разной плотностью пикселей.

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

Теперь вы знаете, как создавать сложные и адаптивные интерфейсы. Экспериментируйте с этими компонентами, чтобы сделать ваши приложения еще более мощными и удобными для пользователя.