Как настроить масштабирование текста и представлений в Delphi для разных размеров экранов iOS и Android

Delphi , Программа и Интерфейс , Размеры и Положение

Масштабирование текста и представлений в Delphi для разных размеров экранов iOS и Android

Введение

При разработке мобильных приложений на Delphi (FireMonkey) одной из ключевых задач является адаптация интерфейса под различные размеры экранов. Особенно это актуально для устройств с разными диагоналями (от 3.5" до 10" и более). В статье рассмотрим, как правильно масштабировать текст и компоненты, а также альтернативные подходы к настройке представлений (views) для iOS и Android.

Проблема выбора представлений (Views)

FireMonkey позволяет настраивать различные представления (views) для конкретных размеров экранов. Например, можно задать отдельные макеты для iPhone 5.8" и 6.8". Однако, если устройство имеет промежуточный размер (например, 6.5"), система может применить не тот view, который ожидается.

Как проверить, какое представление активно?

К сожалению, встроенного способа определения текущего view в FireMonkey нет. Однако можно программно проверить параметры экрана:

uses
  FMX.Platform, FMX.Forms;

procedure TForm1.Button1Click(Sender: TObject);
var
  ScreenService: IFMXScreenService;
  ScreenSize: TPointF;
begin
  if TPlatformServices.Current.SupportsPlatformService(IFMXScreenService, ScreenService) then
  begin
    ScreenSize := ScreenService.GetScreenSize;
    ShowMessageFmt('Ширина: %.2f, Высота: %.2f', [ScreenSize.X, ScreenSize.Y]);
  end;
end;

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

Альтернативный подход: Адаптивный дизайн без Views

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

1. Использование TScaleLayout

TScaleLayout автоматически масштабирует содержимое в зависимости от размера экрана.

// Пример настройки TScaleLayout
ScaleLayout1.OriginalWidth := 360; // Виртуальная ширина
ScaleLayout1.OriginalHeight := 640; // Виртуальная высота
ScaleLayout1.Align := TAlignLayout.Client; // Растягиваем на всю форму

2. Динамическое изменение размера текста

Можно программно изменять размер шрифта в зависимости от диагонали экрана:

uses
  FMX.Platform;

function GetScreenDiagonalInches: Single;
var
  ScreenService: IFMXScreenService;
  ScreenSize: TPointF;
  PPI: Integer;
begin
  Result := 0;
  if TPlatformServices.Current.SupportsPlatformService(IFMXScreenService, ScreenService) then
  begin
    ScreenSize := ScreenService.GetScreenSize;
    PPI := ScreenService.GetScreenScale;
    // Переводим пиксели в дюймы (1 дюйм = 2.54 см)
    Result := Sqrt(Sqr(ScreenSize.X / PPI) + Sqr(ScreenSize.Y / PPI));
  end;
end;

procedure TForm1.AdjustFontSizes;
var
  DiagonalInches: Single;
  NewFontSize: Single;
begin
  DiagonalInches := GetScreenDiagonalInches;
  // Базовый размер шрифта для 5-дюймового экрана
  NewFontSize := 12 * (DiagonalInches / 5);
  Label1.TextSettings.Font.Size := NewFontSize;
  Label2.TextSettings.Font.Size := NewFontSize;
end;

3. Использование TGridPanelLayout и TFlowLayout

Эти компоненты помогают равномерно распределять элементы на экране:

// Пример настройки TGridPanelLayout
GridPanelLayout1.ColumnCollection.Add; // Добавляем колонки
GridPanelLayout1.ColumnCollection[0].Value := 50; // 50% ширины
GridPanelLayout1.ColumnCollection.Add;
GridPanelLayout1.ColumnCollection[1].Value := 50; // 50% ширины

// Добавляем элементы
Label1.Align := TAlignLayout.Client;
Label1.Parent := GridPanelLayout1;
Label1.Text := 'Левая часть';
Label1.TextAlign := TTextAlign.Center;

Label2.Align := TAlignLayout.Client;
Label2.Parent := GridPanelLayout1;
Label2.Text := 'Правая часть';
Label2.TextAlign := TTextAlign.Center;

Заключение

Вместо жесткой привязки к представлениям (views) для конкретных устройств лучше использовать:
- TScaleLayout для глобального масштабирования,
- TGridPanelLayout и TFlowLayout для адаптивного расположения компонентов,
- Динамическое изменение размеров шрифтов в зависимости от диагонали экрана.

Этот подход обеспечит корректное отображение интерфейса на любых устройствах.

Дополнительные материалы:
- Видеоурок по TScaleLayout
- Официальные примеры Embarcadero в GetIt Package Manager

Если у вас есть вопросы или альтернативные решения — делитесь в комментариях!

Создано по материалам из источника по ссылке.

Статья описывает методы адаптации интерфейсов мобильных приложений на Delphi для различных размеров экранов iOS и Android, включая масштабирование текста и использование адаптивных компонентов.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: Размеры и Положение ::