Первое приложение в App Inventor. Верстаем дизайн.

Первый блин - всегда комомТеперь, вкратце познакомившись с интерфейсом App Inventor, можно приступить и к созданию первого приложения для вашего андроидного устройства.

Да, чем и хорош App Inventor, так это возможностью начать разработку сразу — нет необходимости изучать, например, JAVA.

Разумеется, это будет какое-то простое приложение, но написанное своими руками.

Традиционно, при изучении программирования, первым пишут программу «Hello, World!». Все, что оно делает — пишет на экране «Hello, World!».  Думаю, что можно отступить от традиций и создать простенькие часы — все же полезней, чем просто вывод надписи на экран.

Начнем, однако.

На странице проектов нажимаем кнопку «Start new project» и нам предлагают задать имя для нового проекта. Не мудрствуя лукаво, обзовем его «Clock»  — часы.

Создание нового проекта App Inventor

И, вот, попадаем на рабочий стол «Designer» — стол разработки дизайна приложения.

В меню Palette/Layout «хватаем» мышкой элемент «User Interface»и перетаскиваем на наш экран. Важно: по умолчанию на экране элементы размещаются один под другим, а в Layout находятся инструменты, которые служат для позиционирования других элементов и по горизонтали. Эти инструменты представляют собой, по-сути, таблицы, в ячейках которых и можно размещать прочие необходимые элементы. Подробно об элементах меню Palette — в другой статье. А об «HorizontalArrangement» вкратце: это строка, в которой в ряд можно размещать различные элементы дизайна.

Дальше перетаскиваем на экран, прямо внутрь HorizontalArrangement,  из меню Palette/User Interface элемент «Label». И так — три  раза. То есть, нужно, чтобы получилось в ряд три «Label». Вообще, Label это компонент, который отображает некий текст на экране.

И еще, из Palette/Sensors перетаскиваем элемент «Clock» — необходимый нам таймер. Правда, он расположится не на самом экране, а под ним, так как это невидимый элемент.

Наконец, последний штрих — кнопка, при нажатии на которую будет показано системное время, то бишь время, установленное на вашем девайсе. Её получаем путем перетаскивания «Button» из Palette/User Interface.

Получаем следующую картину:Компоненты приложения Clock на экране App Inventor

А теперь немного оптимизируем дизайн.

В меню «Components»  находится список выбранных компонентов. Для начала, чтобы не путаться с компонентами в дальнейшем, обзовем каждый понятным именем: Выделяем мышью, например, «Label 1», кликаем «Rename» и обзываем компонент «Часы». Далее, «Label 1» — «Минуты», «Label 1» — «Секунды». Кнопку «Button» назовём «Время». Имейте ввиду, что названия компонентов могут писаться кириллицей, но оно должно быть без пробелов, иначе App Inventor ругаться будет. Компонент Clock можно оставить с тем же названием — он один и, в большинстве случаев,  в рамках одного экрана одного же и хватает. Так что не перепутаете.

Перейдем к настройке компонентов. Основные настройки компонентов находятся в меню справа — «Properties».

Для компонента «Часы» (изначально «Label 1»)   можно изменить следующие свойства:

Свойства компонента App Inventor

Предлагаю изменить «Text for Label1» на «Часы». Ну потому, что именно часы там и будут выводиться.

То же самое проделаем для минут и секунд, по тем же самым причинам.

Текст для кнопки «Время» — скажем, «Показать время».

Впрочем, все тексты — на ваше усмотрение. Ещё, по желанию, можете поиграть и с другими свойствами компонентов. Например, можете в качестве фона кнопки использовать какое-либо изображение (свойство «Image», далее «Upload file» — загружаем желаемую картинку) или изменить форму кнопки — «Shape».

Еще, давайте поместим в качестве фона на экран вот такую картинку (любую другую, по вашему вкусу)

time

Для этого в меню «Components» выбираем «Screen1» и в его свойствах в «BackgroundImage» загружаем нашу картинку.

Да, еще, для пущей красоты, давайте между часами, минутами и секундами вставим еще по двоеточию. То есть добавим еще по компоненту Label с двоеточием в качестве текста. Назвать компоненты можете как угодно, например, «двоеточие1» и «двоеточие2».

И получаем примерно следующее:

Дизайн первого приложения

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

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

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