Блог Александра Божко
Архивы
Рубрики
Поделись с другими!
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

В прошлой части мы практически полностью реализовали логику приложения. Сейчас я хочу рассказать о, возможно, самой интересной части разработки приложения. Построении пользовательского интерфейса. Если вы еще не в курсе, что такое FireUI, то, вероятно удивитесь, что большая часть работы по построению и отладке GUI Android приложения будет производится в Windows, без использования мобильного устройства. Субъективно, я в восторге. Это быстро, удобно и во всех отношениях легко.

Приступим…

Итак, у нас есть чистая (в смысле используемых стилей) форма, с четырьмя кнопками и меткой TLabel. Конечно у меня, изначально было  искушение бросить на форму TStyleBook, а метку отобразить каким-нибудь диковинным шрифтом. Посмотрев на приложение Владимира Тимофеева я отказался от этой идеи. Подобную красоту придется рисовать руками. Или немного схитрить, используя возможности библиотеки классов FireMonkey. Я выбрал второй вариант. Немного погуглив по слову Scoreboard, я нашел на коммерческом стоке графических изображений симпатичный алфавит, дополненный цифрами.

Digital alphabetic

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

3

А так цифра выглядит в натуральную величину.

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

Разместим на форме панель (TPanel) и шесть компонентов TImage. В качестве картинки используем изображение цифры 0. Должно получиться примерно так:

Digital alphabetic

Естественно, черные цифры на сером фоне смотрятся не лучшим образом. И здесь нам на помощь приходят стили:

- помещаем на форму TStyleBook;

- в дизайнере стилей (двойной щелчок на на компоненте  TStyleBook) выбираем темный стиль Jet для Windows из бонусного  набора стилей;

- устанавливаем свойство StyleBook для формы;

В итоге форма приобретает примерно такой вид.

FormWithStyle

Согласитесь, значительно веселей.

Для формы опишем два поля

  private
    revStr: string;
    arrIm: array of TImage;

Событие OnCreate реализуем примерно так:

procedure TfMain.FormCreate(Sender: TObject);
begin
  SetLength(arrIm, 1);

  arrIm[0]:= im0;
  SetLength(arrIm, 2);
  arrIm[1]:= im1;
  SetLength(arrIm, 3);
  arrIm[2]:= im2;
  SetLength(arrIm, 4);
  arrIm[3]:= im3;
  SetLength(arrIm, 5);
  arrIm[4]:= im4;
  SetLength(arrIm, 6);
  arrIm[5]:= im5;
end;

То есть мы инициируем массив изображений TImage, для того, что бы облегчить работу с ними в коде. Обратите внимание на то, что именование изображений идет справа налево. Т. е. картинка Im0 – крайняя правая.

Теперь нам нужно научить наше цифровое табло отображать текущее значение таймера. Создадим метод, который будет возвращать необходимый объект типа TTextureMaterialSource. Иными словами, с помощью этой функции мы получим нужную картинку.

function TfMain.GetTExtureMaterial(aStr: string): TTextureMaterialSource;
 var
 i: integer;
begin
   i:= StrToIntDef(aStr, 0);
   case i of
     0: Result:= txt0;
     1: Result:= txt1;
     2: Result:= txt2;
     3: Result:= txt3;
     4: Result:= txt4;
     5: Result:= txt5;
     6: Result:= txt6;
     7: Result:= txt7;
     8: Result:= txt8;
     9: Result:= txt9;

   end;
end;

Обработчик события onTimer реализуем следующим образом:

procedure TfMain.DTTimerDroid(Sender: TObject);
var
i: integer;
str: string;
begin
str:= DT.StrTime;
Delete(str, 2,1);
Delete(str, 4,1);

revStr:= ReverseString(str);

for I := 0 to Length(arrIm)-1 do
begin
  arrIm[i].Bitmap:=  GetTExtureMaterial(revStr[i]).Texture;
end;

end;

Функция ReverseString описана в модуле StrUtils, который следует подключить.

Думаю, все достаточно понятно. Запустив приложение, мы сможем оценить его в работе.

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


Поделись с другими!
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

2 комментария: FireMonkey на практие. Еще один таймер для Android. #1

  • Красиво.
    Интересно какой будет размер у конечного apk файла для Android.

    • Скажу так. Упакованный exe файл весит 6,5 М под Винду. Графику я не оптимизировал.Так и пихал эту картинку с циферкой в том размере, которая она в пост вставлена. Компонент тоже в откомпилирован в debug моде. Сколько будет весить apk, если с ним поработать на предмет оптимизации пока не знаю.

Оставить комментарий

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Продукты DevArt
Купить онлайн:



Читай русскоязычные Delphi блоги
Каталог блогов Blogdir.ru
Яндекс.Метрика