Delphi 10.1 Разработка приложения «Я математик» для Android. Макет приложения

Прошло уже несколько лет с тех пор, как я последний раз более менее серьезно разбирался с FMX (aka FireMonkey). Впервые разработчики массово узнали о FMX ещё пять лет назад, в 2011 году, когда на рынок вышла Delphi XE2 в составе которой и появилась библиотека Firemonkey. С одной стороны, появление в составе Delphi библиотеки, с помощью которой можно разрабатывать приложения под Mac OS (тогда поддерживалась только эта платформа) вызвало восторг, желание изучить новые компоненты, поделиться с другими впечатлениями об использовании «огненной обезьяны». Видимо, в тот момент виртуалки с Mac OS побили все рекорды по скачиванию. С другой же стороны, что скрывать, новая библиотека вызывала, если и не тихий ужас, то, по крайней мере, удивление — багов и недоработок там хватало. Однако, уже в Delphi XE3 библиотека была значительно переработана и получила новое название FMX². Не могу сказать, что всё восприняли обновление «на ура», так как библиотека была переписана чуть более, чем наполовину и собранные в Delphi XE2 проекты пришлось практически переписывать заново. Затем вышла Delphi XE4 с поддержкой iOS, а после — Delphi XE5, в которой наконец-то появилась поддержка Android. И, надо сказать, что мои попытки «проникнутся духом FMX» закончились ровно там, где и начинались —  в Delphi XE5. Причина была скорее в нехватке свободного времени, а не в том, что я как-то предвзято относился к FMX.

И вот сейчас на рынке во всю пиарится Delphi 10.1 Berlin, а я решил снова залезть в дебри FMX и, наконец-то, сделать то, что планировал уже давным-давно — переписать приложение «Я математик» под Android. Надо сказать, что сейчас я, как и 5 лет назад, стою в самом начале изучения библиотеки FMX, так как поменялась она значительно. Надеюсь, что на этот раз получится сделать что-нибудь более менее работающее под Android, а не только китайский календарь.

Инструментарий для работы у меня следующий:

1. HTC One M7 с Android 5.0.2
2. Delphi 10.1 Berlin
3. Android SDK 24.3.3 (32 bit) — устанавливался отдельно от Delphi (вот по этой инструкции), так как изначально я не планировал в ближайшее время возвращаться к разработке под Android
4. LiteDAC 2.7.24 (если потребуется разработка базы данных)

На протяжении нескольких статей я постараюсь подробно описать всё, что я делал и поделиться своими впечатлениями об использовании новой версии Delphi для разработки под Android, захватив при этом как можно больше возможностей платформы FMX (на сколько это позволит разрабатываемое приложение). В итоге должен получиться некий отчёт по работе с FMX с нуля от человека, который про FMX слышал и, даже, вроде бы немного с FMX работал, но так до конца и не разобрался. Ни в коем случае не стоит рассматривать статьи, посвященные работе над приложением, как уроки по Firemonkey (FMX) и разработке приложений в Delphi для Android. Это, скорее, полевой журнал разработчика, в котором может быть всё, что угодно, включая и спорные моменты и не решенные вопросы и решение проблем. Итак, начнем.

Идея приложения

Идея приложения «Я математик» сводится к тому, чтобы научить пользователя быстро решать в уме различные задачки, например, быстро умножать любое число от 0 до 99 на 5, или вычислять квадратные корни и так далее. После выхода первой версии программы появился ряд идей по доработке приложения, которые я и попытаюсь реализовать в версии для Android. Так же, специально для самых маленьких пользователей я планирую добавить в программу небольшой блок задач на знание таблицы умножения (этой функцией, я думаю, будет пользоваться, как минимум один, но самый важный для меня человек — моя дочь).

Первый макет приложения.

Открываем Delphi 10.1 и в главном меню выбираем File — New — Multi-Device Application.

Delphi услужливо нам предложит выбрать тип будущего приложения: пустое приложения, приложения с табами, 3-D Application и так далее

 С одной стороны, выбор первоначального макета приложения позволяет пусть немного, но сократить время на то, чтобы накидать на главную форму необходимые компоненты и создать минимальный набор методов, например, для навигации в приложении, а с другой стороны — в случае необходимости довольно быстро разобраться с основами управления всё тех же компонентов на форме. Например, выбрав последний вариант приложения (Tabbed with Navigation) вы можете тут же его собрать, посмотреть, как Delphi-приложение работает в Android и, если потребуется, то быстро понять как управляться с TTabControl, переключаться с таба на таб, выходить из приложения при нажатии кнопки return и так далее. В общем, если вы только начинаете разбираться с FMX — не поленитесь попробовать все типы приложений из предложенного набора (само собой, исключая первое — Blank Application, так как там смотреть нечего).

Итак, я выбрал из предложенного набора третий вариант, который называется «Header/Footer». В Header я разместил две кнопки TButton и установил у них следующие свойства:

• Первая кнопка:
  • Align = Left;
  • StyleLookup = «escapetoolbutton»;
  • Text = «Выход»
• Вторая кнопка:
  • Align = Right;
  • StyleLookup = «playtoolbutton»;
  • Text = «Играть»

Так как будущее приложение подразумевает, как минимум три стадии работы: выбор видов задач, решение задач и просмотр результатов, то я положил на главную форму компонент TTabControl, в котором создал три таба и установил свойство Align в значение Client, то есть растянул компонент по всему доступному месту на форме. После этого, не долго думая (а стоило бы) я накидал на таб «Задачи» несколько чек-боксов у которых установил следующие свойства (одинаковые для всех):

• Align = Top
• Margins.Left = 20
• Margins.Top = 20

Также я положил на форму компонент TSpibBox для выбора количества задач в тесте и, в конечном итоге, получил вот такой вид формы в режиме просмотра «Master»:

Чтобы представить, как будет выглядеть приложение, например, на телефоне с экраном в 4″ достаточно выбрать в редакторе формы в списке View необходимый режим просмотра:

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

Для каждого вида формы вы можете установить свое расположение компонентов. Например, ниже представлен вид приложения для Android c 4-х и 5-ти дюймовыми экранами:

Если, находясь в режиме просмотра, например, Android 4» Вы попытаетесь удалить любой компонент с формы, то получите вот такую ошибку:

Для удаления компонентов с форм достаточно перейти в режим просмотра «Master».

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

Доступ к компонентам формы на любых экранах

При разработке приложений для Windows с небольшим количеством компонентов, мы как-то особенно не задумываемся на тем уместится ли 2 метки и 5 чек-боксов с текстом в 20-30 символов на главной форме. Само собой, что сейчас надо умудриться найти у обычного пользователя ПК монитор с диагональю менее 15» и максимальным разрешением 640х480 и менее. И эта уверенность может сыграть с нами злую шутку при разработке под Android. Возьмем, к примеру, макет приложения, который я первоначально накидал. Да, компоненты, прекрасно уместились на экране телефона в 5», но теперь возьмем этот же телефон, развернем экран и попробуем добраться, например, до редактора количества задач. Этого сделать не получится, так как редактор будет находиться за пределами видимости. Поэтому, лично для себя я решил:

чтобы даже на экране с диагональю 1,5» пользователь мог пролистать список компонентов до необходимого. Благ, что с помощью Delphi подправить, в случае необходимости, макет формы не составляет большого труда. Просто переходим в режим Master, добавляем на таб «Задачи» компонент TScrollBox с вкладки Layouts, растягивая его по всему доступному пространству. Затем, в окне Structure выбираем компоненты, расположенные на табе и перетаскиваем их на ScrollBox. Всё. Теперь даже на самом маленьком экране пользователь сможет прокрутить список компонентов и добраться до необходимого. Проверить это можно также в режиме просмотра, например, Android 4».

Видимость компонентов при наборе текста

Еще один момент на который стоит обратить внимание — это видимость компонентов, например, Edit’ов в момент, когда Вы добавляете в него текст. Продемонстрировать эту проблему можно, используя всё тот же макет, разработанный в начале. Попробуйте запустить приложение и попробовать записать какое-нибудь число в SpinText. Вы увидите, что экранная клавиатура полностью перекрывает компонент и вы не можете увидеть, что вы пишете. Проскролировать форму в момент набора текста вы также не можете, так как, в этом случае, компонент теряет фокус и экранная клавиатура исчезает.

В попытках решения этой проблемы я нашел на сайте http://fire-monkey.ru/ замечательный модуль под названием vkbdhelper.pas, который решает указанную выше проблемы для Android. Просто подключаем этот модуль к проекту и забываем о проблеме. Теперь, при появлении экранной клавиатуры вы всегда будете видеть, что вы пишете в компоненте и в каком компоненте вы пишите.

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

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

Книжная полка

Автор: Дмитрий Осипов Название:Delphi. Программирование для Windows, OS X, iOS и Android Описание Подробно рассматривается библиотека FM, позволяющая создавать полнофункциональное программное обеспечение для операционных систем Windows и OS X, а также для смартфонов и планшетных компьютеров, работающих под управлением Android и iOS

Купить на ЛитРес

359 руб.