Шрифты в Xamarin.Forms

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

  • FontAttributes типа FontAttributes, который является перечислением с тремя элементами: None, Bold и Italic. Значение по умолчанию этого свойства равно None.
  • Xamarin FontSize тип double.
  • FontFamily Xamarin тип string.

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

Настройка атрибутов шрифта

Элементы управления, отображающие текст, могут задать FontAttributes свойство для указания атрибутов шрифта Xamarin:

<label text="Italics" fontattributes="Italic"></label>
<label text="Bold and italics" fontattributes="Bold, Italic"></label>

Эквивалентный код на C# выглядит так:

Label label1 = new Label
{
  Text = "Italics",
  FontAttributes = FontAttributes.Italic
};


Label label2 = new Label
{
  Text = "Bold and italics",
  FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};

Установка размера шрифта FontSize

Элементы управления, отображающие текст, могут задать FontSize свойство для указания размера шрифта. Для этого свойства можно задать значение напрямую double или значение NamedSize перечисления:

<label text="Font size 24" fontsize="24"></label>
<label text="Large font size" fontsize="Large"></label>

Эквивалентный код на C# выглядит так:

Label label1 = new Label
{
   Text = "Font size 24",
   FontSize = 24
};


Label label2 = new Label
{
   Text = "Large font size",
   FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};

Кроме того, метод Device.GetNamedSize имеет переопределение, указывающее второй аргумент как: Element

Label myLabel = new Label
{
  Text = "Large font size",
};
myLabel.FontSize = Device.GetNamedSize(NamedSize.Large, myLabel);

Значение, указанное FontSize как double, измеряется в единицах, независимых от устройства.

Настройка семейства шрифтов (Font Family Xamarin)

Элементы управления, отображающие текст, могут присвоить FontFamily свойству имя семейства шрифтов, например «Times Roman». Однако это будет работать только в том случае, если семейство шрифтов поддерживается на конкретной платформе.

Существует ряд методов, с помощью которых можно попытаться определить шрифты, доступные на той или иной платформе. Однако наличие файла шрифта в формате TTF (True Type Format) не обязательно означает наличие семейства шрифтов, и часто включаются шрифты TTF, не предназначенные для использования в приложениях. Кроме того, шрифты, установленные на платформе, могут меняться в зависимости от версии платформы. Поэтому наиболее надежным способом указания семейства шрифтов является использование пользовательского шрифта.

Пользовательские шрифты могут быть добавлены в ваш общий проект Xamarin.Forms и использоваться проектами платформы без дополнительной работы. Это можно сделать следующим образом:

  1. Добавьте шрифт в общий проект Xamarin.Forms в качестве встроенного ресурса (Build Action: EmbeddedResource).
  2. Зарегистрируйте файл шрифта в сборке, например, в файле AssemblyInfo.cs, используя атрибут ExportFont. Также можно указать необязательный псевдоним.

В следующем примере показан Lobster-Regular шрифт, зарегистрированный в сборке, а также псевдоним:

using Xamarin.Forms;


[assembly: ExportFont("Lobster-Regular.ttf", Alias = "Lobster")]

Шрифт может находиться в любой папке в общем проекте, не указывая имя папки при регистрации шрифта в сборке. В Windows имя файла шрифта и имя шрифта могут отличаться. Чтобы найти имя шрифта в Windows, щелкните правой кнопкой мыши TTF-файл и выберите "Предварительный просмотр". Затем имя шрифта можно определить из окна предварительного просмотра.

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

<!-- Use font name -->
<label text="Hello Xamarin.Forms" fontfamily="Lobster-Regular"></label>

Кроме того, его можно использовать на каждой платформе, ссылаясь на его псевдоним:

<!-- Use font alias -->
<label text="Hello Xamarin.Forms" fontfamily="Lobster"></label>

Эквивалентный код на C# выглядит так:

// Use font name
Label label1 = new Label
{
   Text = "Hello Xamarin.Forms!",
   FontFamily = "Lobster-Regular"
};


// Use font alias
Label label2 = new Label
{
   Text = "Hello Xamarin.Forms!",
   FontFamily = "Lobster"
};

На следующих снимках экрана показан пользовательский шрифт:

Для сборки выпуска на Windows убедитесь, что сборка, содержащая пользовательский шрифт, передается в качестве аргумента в вызове Forms.Init метода.

Установка свойств шрифта для каждой платформы

Классы OnPlatform и On классы можно использовать в XAML для задания свойств шрифта для каждой платформы. В приведенном ниже примере задаются разные семейства шрифтов и размеры на каждой платформе:

<label text="Different font properties on different platforms" fontsize="{OnPlatform iOS=20, Android=Medium, UWP=24}">
    <label.fontfamily>
        <onplatform x:typearguments="x:String">
            <on platform="iOS" value="MarkerFelt-Thin"></on>
            <on platform="Android" value="Lobster-Regular"></on>
            <on platform="UWP" value="ArimaMadurai-Black"></on>
        </onplatform>
    </label.fontfamily>
</label>

Свойство Device.RuntimePlatform можно использовать в коде для задания свойств шрифта для каждой платформы.

Label label = new Label
{
   Text = "Different font properties on different platforms"
};


label.FontSize = Device.RuntimePlatform == Device.iOS ? 20 :
   Device.RuntimePlatform == Device.Android ? Device.GetNamedSize(NamedSize.Medium, label) : 24;
label.FontFamily = Device.RuntimePlatform == Device.iOS ? "MarkerFelt-Thin" :
   Device.RuntimePlatform == Device.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

Размеры и названия шрифтов

Xamarin.Forms определяет поля в перечислении NamedSize, которые представляют определенные размеры шрифта. В следующей таблице показаны элементы NamedSize и их размеры по умолчанию на iOS, Android и Universal Windows Platform (UWP):

ЭлементiOSAndroidUWP
Default171414
Micro121015.667
Small141418.667
Medium171722.667
Large222232
Body171614
Header171446
Title282424
Subtitle221620
Caption121212

Примечание. На iOS и Android размер именованных шрифтов будет автомасштабироваться в зависимости от параметров доступности операционной системы. Это поведение можно отключить на iOS с помощью специфического для платформы параметра.

Отображение значков шрифтов

Значки шрифта могут отображаться приложениями Xamarin.Forms , указывая данные значка шрифта в объекте FontImageSource . Этот класс, производный от ImageSource класса, имеет следующие свойства:

  • Glyph — значение символа юникода значка шрифта, указанное в виде символа string.
  • Sizedouble— значение, указывающее размер значка отрисованного шрифта в независимых от устройства единицах. Значение по умолчанию — 30. Кроме того, для этого свойства можно задать именованный размер шрифта.
  • FontFamily — представляет string семейство шрифтов, к которому принадлежит значок шрифта.
  • Color — необязательное Color значение, которое будет использоваться при отображении значка шрифта.

Данные шрифта могут отображаться в любом представлении, которое может отображать ImageSource. Такой подход позволяет отображать значки шрифта, такие как emojis, в нескольких представлениях, в отличие от ограничения отображения значков шрифта одним представлением текста, таким как Label.

Значки шрифтов в настоящее время можно указать только в представлении символов Юникода.

В следующем примере XAML отображается один значок шрифта в представлении Image:

<image backgroundcolor="#D1D1D1">
   <image.source>
     <fontimagesource glyph="&#xf30c;" fontfamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}" size="44"></fontimagesource>
   </image.source>
</image>

Этот код отображает значок XBox из семейства шрифтов Ionicons в представлении Image. Обратите внимание, что хотя символ юникода для этого значка является \uf30c, его необходимо экранировать в XAML и поэтому становится &#xf30c;. Эквивалентный код на C# выглядит так:

Image image = new Image { BackgroundColor = Color.FromHex("#D1D1D1") };
image.Source = new FontImageSource
{
   Glyph = "\uf30c",
   FontFamily = Device.RuntimePlatform == Device.iOS ? "Ionicons" : "ionicons.ttf#",
   Size = 44
};

На следующих снимках экрана из примера "Привязываемые макеты" показаны несколько значков шрифтов, отображаемых привязываемым макетом:

Материалы по теме