Занятие № 2. Экраны мобильного приложения. Проектирование интерфейса пользователя
Задачи
- Изучить свойства компонентов Надпись, Кнопка, Изображение и научиться их модифицировать.
- Применить компоненты ТабличноеРасположение и ГоризонтальноеРасположение для размещения компонентов.
- Научиться программно производить переход между экранами приложения.
- Научиться считывать введённые значения и применять их для выполнения вычислений.
Перед началом работы, скачайте по ссылке архив с необходимыми изображениями и звуками.
Задание № 1. Кубик
Создадим приложение для моделирования броска шестигранного кубика.
Видео-инструкция
Откройте среду разработки App Inventor. Нажмите кнопку New project, чтобы создать новый проект. В появившемся окне задайте название проекта - Cubic, затем нажмите кнопку Ok:
Откроется окно для редактирования интерфейса первого экрана приложения Screen1.
Интерфейс приложения
В списке Медиа должен появится загруженный вами файл:
Повторите процедуру загрузки и для остальных файлов с изображениями граней кубика (2.png - 6.png). Также загрузите файл dice_roll.ogg со звуком броска кубика.
Раздел Медиа должен выглядеть следующим образом:
Настроим параметры экрана. В списке компонентов выберите Screen1 и настройте его свойства следующим образом:
Свойство | Значение |
---|---|
ВыровнятьПоВертикали | центр |
ВыровнятьПоГоризонтали | центр |
Заголовок | Кубик |
Название компонента лучше делать по такому шаблону: Тип_компонентаНазначение. Например КнопкаБросок. Так будет проще понять, какие действия может выполнять компонент и для чего он предназначен.
Список компонентов будет выглядеть следующим образом:
Настройте компонент ЗвукБроска следующим образом:
Свойство | Значение |
---|---|
МинимальныйИнтервал | 1000 |
Источник | dice_roll.ogg |
После того, как интерфейс приложения готов, можно переходить к программированию поведения компонентов.
Программирование компонентов
Скрипт генерирует случайное число от 1 до 6. Затем число соединяется со строкой “.png”, образуя имена файлов с изображением грани (1.png, 2.png …).
Протестируйте работу приложения. Запустите на своём телефоне приложение MIT AI2 Companion. В среде разработки App Inventor выберите пункт меню Подключиться - Помощник AI. Отсканируйте QR-код с помощью приложения AI2Companion. Через некоторое время вы увидите на экране своего мобильного телефона готовое приложение.
Нажмите несколько раз на кнопку Бросить кубик. Меняются ли изображения на экране? Сообщает ли приложение об ошибках?
- Каждое нажатие на кнопку будет поворачивать картинку на случайны угол между 0 и 45. Это поможет отличать ситуации, когда подряд выпадает одно и то же число.
- Блок проиграть воспроизведёт звук броска кубика.
Если приложение-компаньон ещё не закрыто, то попробуйте нажать на кнопку Бросить кубик ещё несколько раз. Пока приложение запущено и связь не потеряна, все изменения в проекте показываются на устройстве в реальном времени
Проект готов.
Задание № 2. Геометрический калькулятор
Создадим приложение, с помощью которого можно рассчитать объём цилиндра по радиусу основания и высоте.
Приложение будет состоять из двух экранов - приветствия и экрана для выполнения расчётов.
Видео-инструкция
Откройте среду разработки App Inventor. Нажмите кнопку New project, чтобы создать новый проект. В появившемся окне задайте название проекта - GeoCalc, затем нажмите кнопку Ok:
Откроется окно для редактирования интерфейса первого экрана приложения Screen1.
Интерфейс экрана Screen1
В списке Медиа должен появится загруженный вами файл:
В списке компонентов выберите Screen1 и настройте его свойства следующим образом:
Свойство | Значение |
---|---|
ВыровнятьПоГоризонтали | Центр |
ВыровнятьПоВертикали | Центр |
Заголовок | GeoCalc |
В разделе Интерфейс пользователя палитры компонентов найдите компонент Надпись и перетащите его на экран. Настройте свойства компонента под именем Надпись1 следующим образом:
Свойство | Значение |
---|---|
ЖирныйШрифт | + |
РазмерШрифта | 18 |
Ширина | Наполнить родительский |
Текст | Расчёт объема |
Перетащите на экран компонент Кнопка и расположите его после надписи. Клик по кнопке будет переводить пользователя на второй экран с формой для расчётов.
В списке компонентов выберите кнопку, нажмите кнопку Переименовать, укажите для компонента имя КнопкаЦилиндр и нажмите Ok.
Настройте свойства компонента под именем КнопкаЦилиндр следующим образом:
Свойство | Значение |
---|---|
Изображение | cylinder.png |
Текст | Пустая строка |
Первый экран приложения должен выглядеть следующим образом:
Интерфейс экрана ScreenCylinder
Настройте свойства экрана ScreenCylinder следующим образом:
Свойство | Значение |
---|---|
ОриентацияЭкрана | Альбомный режим |
Заголовок | Цилиндр |
Расположим необходимые компоненты интерфейса.
Для создания формы ввода радиуса и высоты цилиндра, используем компоненты ТабличноеРасположение. С его помощью компоненты приложения могут быть расположены в ячейках таблицы с заданным количеством строк и столбцов.
В палитре компонентов перейдите в раздел Расположение и перетащите на экран компонент ТабличноеРасположение. Настройте компонент следующим образом:
Свойство | Значение |
---|---|
Стобцы | 2 |
Ширина | Наполнить родительский |
Строки | 2 |
Для ввода числовых значений воспользуемся компонентом Текст. Перетащите два таких компонента на экран таким образом, чтобы поместить их в следующих ячейках компонента ТабличноеРасположение:
В первом столбце каждой строки расположите компоненты Надпись. Экран приложения должен выглядеть следующим образом:
Выберите компонент с именем ТекстРадиус и настройте его свойства:
Свойство | Значение |
---|---|
Ширина | 100 percent |
Подсказка | Введите радиус |
ТолькоЦифры | + |
Выберите компонент с именем ТекстВысота и настройте его свойства:
Свойство | Значение |
---|---|
Подсказка | Введите высоту |
ТолькоЦифры | + |
Для вывода ответа используем компонент Надпись. Разместите компонент под таблицей и переименуйте его в НадписьОбъем.
Настройте свойства компонента НадписьОбъем:
Свойство | Значение |
---|---|
Ширина | Наполнить родительский |
Текст | Объем |
ВыравниваниеТекста | центр |
Добавим на экран две кнопки - для выполнения расчётов и возврата на главный экран приложения Screen1. Кнопки разместим горизонтально. Для этого поместите под компонентом НадписьОбъем компонент ГоризонтальноеРасположение. Поменяйте свойство Ширина на значение Наполнить родительский.
Перетащите два компонента Кнопка таким образом, чтобы они разместились внутри компонента ГоризонтальноеРасположение:
Переименуйте Кнопка1 в КнопкаРассчет, а Кнопка2 - в КнопкаНазад. Для обоих кнопок установите значение свойства Ширина равным Наполнить родительский. Измените значение свойства Текст для кнопок согласно их назначению.
Интерфейс экрана ScreenCylinder должен выглядеть так:
Программирование компонентов
Добавим поведение для компонентов приложения. В первую очередь сделаем возможным переход между экранами приложения.
Перейдите в раздел Блоки.
В списке блоков выберите компонент КнопкаНазад и перетащите в рабочую область блок когда КнопкаНазад.Щелчок. Действия внутри этого блока выполняться, когда пользователь нажмёт кнопку.
В разделе Управление найдите блок открыть другой экран и поместите его в блок обработчик события. Готовый скрипт выглядит следующим образом:
Аргумент блока (обозначен стрелкой) указывает, какой экран должен открыться.
Протестируйте работу приложения. Проверьте, работает ли переход между экранами. Продолжайте работу только после того, как убедитесь в работе скриптов.
Добавим скрипты для расчета объема. Значения радиуса и высоты будем хранить в двух глобальных переменных с соответствующими именами.
Вернитесь к экрану ScreenCylinder. Разместите блок инициализировать глобальную из раздела Переменные. Зададим начальное значение переменной равное нулю. Из раздела Математика возьмите блок с нулём и соедините с блоком создания переменной. Задайте имя переменной:
Аналогично добавьте глобальную переменную высота:
Если нужно создать набор блоков, который похож на уже существующие, лучше использовать функцию копирования. Нажмите правой кнопкой мыши по набору блоков, которые нужно продублировать и выберите вариант Создать копию:
В рабочей области появится копия выбранных блоков, которую затем можно отредактировать.
- Получаем числа из текстовых полей ввода и сохраняем в переменных.
- Результат будем выводить в надписи. Для этого меняем свойство Текст этого компонента.
- Выражение составляем из блоков раздела Математика.
Чтобы увеличить количество множителей в блоке умножения, нужно нажать на шестерёнку и добавить блоки:
Чтобы быстро получить блоки для работы с нужной переменной, подведите курсор к её имени в блоке инициализировать глобальную:
Запустите приложение и проверьте правильность вычислений. Что произойдёт, если оставить текстовые поля для ввода пустыми?
Проект готов.
Задание № 3. Калькулятор мелочи
Разработаем приложение, которое поможет найти сумму номиналов монет. Интерфейс приложения содержит изображения монет четырёх номиналов: 5, 10, 20 и 50 копеек. Нажатие на картинку добавит к общей сумме номинал монеты.
Создайте новый проект под именем monetki.
Загрузка медиа-ресурсов
Загрузите в проект изображения монеток1:
Проектирование интерфейса
Настройте свойства компонентов согласно следующей таблице:
Компонент | Свойства |
---|---|
Screen1 | ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр Заголовок=Калькулятор мелочи |
ТабличноеРасположение | Столбцы=2 Высота=Автоматический Ширина=Автоматический Строки=2 |
Кнопка5Копеек | Текст=пусто Изображение=m5.gif |
Кнопка10Копеек | Текст=пусто Изображение=m10.gif |
Кнопка20Копеек | Текст=пусто Изображение=m20.gif |
Кнопка50Копеек | Текст=пусто Изображение=m50.gif |
ТекстРезультат | Включено=нет галочки ЖирныйШрифт=есть галочка РазмерШрифта=20 Текст=0.0 ВыравниваниеТекста=центр |
Программирование компонентов
- Каждое нажатие на кнопку добавляет к переменная сумма число 0.05.
- Выводим значение переменной сумма в компонент ТекстРезультат. Значение суммы округляем до двух цифр после запятой.
Протестируйте работу приложения. Нажмите на изображение пяти копеек. Проверьте, появляется ли сумма в текстовом поле, добавляется ли к ней значение после каждого нажатия кнопки.
Протестируйте работу приложения. После нажатия кнопок к итоговой сумме должны добавляться корректные номиналы монет.
Дополнительное задание
Самостоятельно добавьте кнопку КнопкаОчистить после нажатия на которую значение переменной сумма обнулиться и в текстовом поле ТекстРезультат появится значение 0.0.
Задание № 4. ИМТ
Разработаем приложение для расчёта Индекса массы тела. ИМТ – это величина, которая позволяет оценить степень соответствия массы человека и его роста и рассчитывается по формуле \[ I=\frac{m}{h^2} \] где m – масса тела в килограммах, h – рост в метрах. Нормой считается значение индекса в диапазоне от 18 до 25.
Приложение будет состоять из двух экранов:
- Экран с формой для ввода данных и расчёта индекса; значение индекса отправляется на второй экран;
- Экран для вывода результата вычислений; цвет фона зависит от значения индекса.
Взаимодействие между экранами показано на диаграмме:
Создайте новый проект под названием IMT.
Проектирование интерфейса
Настройте свойства компонентов согласно следующей таблице:
Компонент | Свойства |
---|---|
Screen1 | ВыравниваниеПоГоризонтали=Центр ВыравниваниеПоВертикали=Центр Заголовок=ИМТ |
ТекстРост | Подсказка=Рост (м) ТолькоЦифры=есть галочка |
ТекстВес | Подсказка=Вес (кг) ТолькоЦифры=есть галочка |
КнопкаСтарт | Текст=Старт |
Добавьте в приложение второй экран под названием ScreenResult. Для этого нажмите кнопку .
Настройте свойства компонентов согласно следующей таблице:
Компонент | Свойства |
---|---|
ScreenResult | ВыравниваниеПоГоризонтали=Центр ВыравниваниеПоВертикали=Центр Заголовок=Результат |
НадписьЗначение | РазмерШрифта=20 Текст=0 Выравнивание текста=центр |
НадписьРезультат | ЖирныйШрифт=есть галочка РазмерШрифта=32 Текст=Результат ВыравниваниеТекста=центр |
КнопкаНазад | Текст=Назад |
Программирование компонентов
Результат вычислений индекса нужно присвоить переменной имт. Порядок соединения блоков показан на рисунке:
Действия, которые выполняются последними, добавляются первыми.
После инициализации экрана ScreenResult покажем значение полученного индекса.
Протестируем приложение. Введите значения для роста и веса и нажмите кнопку Старт. Должен открыться новый экран с вычисленным значением. Например, для роста 1.86 м и веса 100 кг, значение индекса равно 28.9. Нажмите кнопку Назад, чтобы проверить переход к первому экрану приложения.
Используем вложенные условные операторы. Фрагмент блок-схемы показан на рисунке:
Проверки одного условия недостаточно. Нажмите на шестерёнку в блоке если…то, чтобы добавить блоки иначе если и иначе:
Блоки в разделе иначе будут выполняться, если \(18 \le ИМТ \le 25\).
Запустите приложение и проверьте появление разных сообщений и смену цвета фона.
Проект готов.
Задание № 5. Банковский вклад
Приложение поможет рассчитать сумму вклада после указанного количества месяцев. Начальная сумма и продолжительность вклада вводится пользователем. Ежемесячно вклад увеличивается на 0.5 %.
Создайте новый проект под именем Balans.
Проектирование интерфейса
Настройте свойства компонентов согласно следующей таблице:
Компонент | Свойства |
---|---|
Screen1 | ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр Заголовок=Баланс |
ТекстБаланс | Ширина=80% Подсказка=Начальный баланс ТолькоЦифры=есть галочка |
ТекстМесяцы | Ширина=80% Подсказка=Продолжительность ТолькоЦифры=есть галочка |
ГоризонтальноеРасположение | Ширина=80% |
Надпись1 | Текст=Конечный баланс: |
ТекстКонечныйБаланс | Ширина=Наполнить родительский Подсказка=Пустая строка Включено=нет галочки |
КнопкаРассчитать | Текст=Рассчитать |
Программирование компонентов
Добавим ещё три переменные:
- месяцы - продолжительность вклада;
- шаг - счётчик месяцев для цикла (0);
- процент - под какой процент помещается вклад (0.005).
Чтобы добавить переменные необходимо:
- Нажмите на шестерёнку в блоке инициализировать локальную;
- Схватите блок имя X
- и присоедините его к уже существующему списку переменных.
Скрипт с инициализированными переменными должен выглядеть следующим образом:
Расчёт баланса выполним по следующему алгоритму:
пока шаг < месяцы выполнить
баланс = баланс + 0.005 * баланс
шаг = шаг + 1
Выражение для расчёта баланса составьте в следующем порядке:
Значение переменной баланс форматируем до двух знаков после запятой и присваиваем свойству Текст компонента ТекстКонечныйБаланс.
Протестируйте приложение. Для начального баланса равного 1000 и количества месяцев равного 48, итоговый баланс равен 1270,49.
Проект готов.
Сноски
Источник изображений: http://fingramota.by/ru/guide/money/coins↩︎