Страницы

пятница, 13 декабря 2013 г.

2. Пишем детскую программку под Android: основа

Продолжаем писать программку для детей под Android (требования мы сформулировали в первом посте).

Начнём с того, что сделаем совсем простой проект – программку, которая умеет листать картинки при нажатии на кнопку. Картинки запакуем в ресурсы программы.

Создаём новый проект: Firemonkey Mobile application –> Blank application

Разрешения

Отключим ненужные permissions. Так как по умолчанию включено слишком много всего.

Project –> Options –> Uses permissions. (Или через Help Insight: Ctrl+. –> ввести Permission + Enter, но это как-то странно работает). Сверху выберем All configurations Android Platform, так как список Permissions доступен только для Android платформы.

image

Как вы видите на скриншоте жирным false отмечены те настройки, у которых значение отличается от значения по умолчанию (они были включены, и мы их отключили).

Из всех разрешений включим только:

  • Read Phone State – нужен для получения уникального идентификатора устройства
  • Read External Storage – для чтения SdCard
  • Write External Storage – для записи на SdCard

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

Сохраним проект (Save all) и зафиксируем изменения в системе контроля версий.

Добавим ресурсы

В папке с проектом сделаем новую папку resources. Здесь мы будем хранить rc файлы. В папке resources создадим подпапку images – в ней будем хранить картинки.

Картинки возьмём с сайта OpenClipArt.org – там лицензия Public Domain. Так как проект у нас учебный и открытый, то поверим им на слово и не будем искать настоящих авторов. (а вот для коммерческой разработки, картинки лучше всего покупать в каком-нибудь проверенном месте).

Для начала возьмём с этого сайта 4 картинки

  • lemmling_Cartoon_cat.png
  • lemmling_Cartoon_goat.png
  • lemmling_Cartoon_owl.png
  • lemmling_Cartoon_sheep.png

Добавим в проект новый .RC файл:

  • Ctrl+. для активации IDE insight
  • ввести Text file + Enter –> появи
  • в открывшемся диалоге: Alt+a, ввести .rc и нажать Enter

Если хотите можете добавлять эти файлы и через диалог Resources and Images.

Добавим наши картинки в animals.rc

MyImage_1 RCDATA "resources\\images\\lemmling_Cartoon_cat.png"
MyImage_2 RCDATA "resources\\images\\lemmling_Cartoon_goat.png"
MyImage_3 RCDATA "resources\\images\\lemmling_Cartoon_owl.png"
MyImage_4 RCDATA "resources\\images\\lemmling_Cartoon_sheep.png"

Теперь при компиляции проекта файл с ресурсами animals.rc будет автоматически компилироваться в animals.res файл.

Код

Для загрузки картинок из ресурсов создадим простенький класс (TImageLoader) .

type
  TImageLoader = class
  strict private
  const
    cMinPictureId = 1;
    cMaxPictureId = 4;
  var
    FCurrentImgIndex: Integer;
  public
    procedure LoadPic(const aBitmap: TBitmap);
    procedure SetNextPic;
    procedure SetPrevPic;
  end;

Реализацию можно посмотреть на github-е.

GUI

Для начала, чтобы упростить сделаем всё на одной форме.

На форму бросаем панель с Align = alClient (так потом будет проще если что добавить другой контрол с другим Align-ом).

На панель кидаем 2 кнопки (TSpeedButton):

  • одну назовём btnPrev с Align alLeft
  • другую кнопку назовём btnNext и установим выравнивание по правому краю (Align alRight)

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

Интересно, почему все tutorial-ы для мобильной разработки рекомендуют использовать именно TSpeedButton вместо TButton, который умеет не только всё то же самое, что и TSpeedButton но больше. Я так толком и не понял. Есть идеи?

В обработчиках нажатия кнопок будут вызываться методы TImageLoader SetNextPic, SetPrevPic и LoadPic соответственно.

Код

Весь код доступен на github-е: релиз post_2

Страничка проекта: https://github.com/tdelphi/dog-said-meow

3 комментария:

  1. Здорово! Про отключение лишних прав я тоже планировал написать. Теперь просто сделаю ссылку :)

    ОтветитьУдалить
    Ответы
    1. Спасибо. =)

      Я твои посты про Тар-тар как раз сегодня читал. С векторной графикой и анимацией очень классно получилось. Я ломал голову по теме использования в проекте SVG графики - но так и не получилось полноцветную картинку нормально отрисовать.

      Удалить
    2. Ага, мне тоже SVG в исходном виде прикрутить не удалось, решил по старинке... в конце-концов, SVG как раз и состоит из набора примитивов

      Удалить