Písma v Xamarin.Forms

Download Sample Stažení ukázky

Ve výchozím nastavení Xamarin.Forms používá systémové písmo definované jednotlivými platformami. Ovládací prvky, které zobrazují text, ale definují vlastnosti, které můžete použít ke změně tohoto písma:

  • FontAttributes, typu FontAttributes, který je výčtem se třemi členy: None, Bolda Italic. Výchozí hodnota této vlastnosti je None.
  • FontSize, typu double.
  • FontFamily, typu string.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Nastavení atributů písma

Ovládací prvky, které zobrazují text, můžou vlastnost nastavit FontAttributes tak, aby určily atributy písma:

<Label Text="Italics"
       FontAttributes="Italic" />
<Label Text="Bold and italics"
       FontAttributes="Bold, Italic" />

Ekvivalentní kód jazyka C# je:

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

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

Nastavení velikosti písma

Ovládací prvky, které zobrazují text, můžou vlastnost nastavit FontSize tak, aby určily velikost písma. FontSize Vlastnost lze nastavit přímo na double hodnotu nebo výčtovou NamedSize hodnotou:

<Label Text="Font size 24"
       FontSize="24" />
<Label Text="Large font size"
       FontSize="Large" />

Ekvivalentní kód jazyka C# je:

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))
};

Alternativně má Device.GetNamedSize metoda přepsání, které určuje druhý argument jako Element:

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

Poznámka:

Hodnota FontSize , pokud je zadána jako double, se měří v jednotkách nezávislých na zařízení. Další informace naleznete v tématu Jednotky měření.

Další informace o pojmenovaných velikostech písem najdete v tématu Vysvětlení pojmenovaných velikostí písem.

Nastavení rodiny písem

Ovládací prvky, které zobrazují text, můžou vlastnost nastavit FontFamily na název rodiny písem, například Times Roman. To ale bude fungovat jenom v případě, že je tato řada písem podporovaná na konkrétní platformě.

Existuje řada technik, které lze použít k pokusu o odvození písem, která jsou k dispozici na platformě. Přítomnost souboru písma TTF (True Type Format) však nemusí nutně znamenat rodinu písem a TTF jsou často zahrnuty, které nejsou určeny pro použití v aplikacích. Písma nainstalovaná na platformě se navíc můžou měnit pomocí verze platformy. Nejspolehlivějším přístupem k určení rodiny písem je proto použití vlastního písma.

Vlastní písma je možné přidat do Xamarin.Forms sdíleného projektu a využívat je projekty platformy bez jakékoli další práce. Proces, jak toho dosáhnout, je následující:

  1. Přidejte písmo do Xamarin.Forms sdíleného projektu jako vložený prostředek (akce sestavení: EmbeddedResource).
  2. Pomocí atributu zaregistrujte soubor písma v sestavení v souboru, jako je například AssemblyInfo.csExportFont. Můžete také zadat volitelný alias.

Následující příklad ukazuje registraci písma Lobster-Regular v sestavení spolu s aliasem:

using Xamarin.Forms;

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

Poznámka:

Písmo se může nacházet v libovolné složce ve sdíleném projektu, aniž by bylo nutné při registraci písma v sestavení zadat název složky.

Ve Windows se název souboru písma a název písma můžou lišit. Pokud chcete zjistit název písma ve Windows, klikněte pravým tlačítkem myši na soubor .ttf a vyberte Náhled. Název písma je pak možné určit v okně náhledu.

Písmo pak můžete využívat na každé platformě odkazováním na jeho název bez přípony souboru:

<!-- Use font name -->
<Label Text="Hello Xamarin.Forms"
       FontFamily="Lobster-Regular" />

Alternativně ji můžete využívat na každé platformě odkazem na její alias:

<!-- Use font alias -->
<Label Text="Hello Xamarin.Forms"
       FontFamily="Lobster" />

Ekvivalentní kód jazyka C# je:

// 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"
};

Následující snímky obrazovky ukazují vlastní písmo:

Custom font on iOS and Android

Důležité

V případě sestavení vydané verze ve Windows se ujistěte, že sestavení obsahující vlastní písmo je předáno jako argument volání Forms.Init metody. Další informace naleznete v tématu Poradce při potížích.

Nastavení vlastností písma na platformu

Třídy OnPlatform a On třídy lze v XAML použít k nastavení vlastností písma na platformu. Následující příklad nastaví různé rodiny písem a velikosti na jednotlivých platformách:

<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 Platform="Android" Value="Lobster-Regular" />
            <On Platform="UWP" Value="ArimaMadurai-Black" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

Vlastnost Device.RuntimePlatform lze použít v kódu k nastavení vlastností písma na platformu.

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";

Další informace o poskytování hodnot specifických pro platformu naleznete v tématu Zadání hodnot specifických pro platformu. Informace o OnPlatform rozšíření značek naleznete v tématu OnPlatform markup extension.

Principy pojmenovaných velikostí písem

Xamarin.Forms definuje pole v výčtu NamedSize , která představují konkrétní velikosti písem. Následující tabulka uvádí NamedSize členy a jejich výchozí velikosti v systémech iOS, Android a Univerzální platforma Windows (UPW):

Člen iOS Android UWP
Default 17 14 14
Micro 12 10 15.667
Small 14 14 18.667
Medium 17 17 22.667
Large 22 22 32
Body 17 16 14
Header 17 14 46
Title 28 24 24
Subtitle 22 16 20
Caption 12 12 12

Hodnoty velikosti se měří v jednotkách nezávislých na zařízeních. Další informace naleznete v tématu Jednotky měření.

Poznámka:

V iOSu a Androidu se pojmenované velikosti písem automaticky škáluje na základě možností přístupnosti operačního systému. Toto chování je možné v iOSu zakázat s konkrétní platformou. Další informace najdete v tématu Škálování přístupnosti pro pojmenované velikosti písem v iOSu.

Zobrazení ikon písem

Ikony písem můžou aplikace zobrazit Xamarin.Forms zadáním dat ikon písma v objektu FontImageSource . Tato třída, která je odvozena od ImageSource třídy, má následující vlastnosti:

  • Glyph– hodnota znaku unicode ikony písma, určená jako znak .string
  • Sizedouble– hodnota, která označuje velikost v jednotkách nezávislých na zařízení u ikony vykresleného písma. Výchozí hodnota je 30. Kromě toho lze tuto vlastnost nastavit na pojmenovanou velikost písma.
  • FontFamily – představuje string rodinu písem, do které patří ikona písma.
  • Color – volitelná Color hodnota, která se má použít při zobrazení ikony písma.

Data písma lze zobrazit v libovolném zobrazení, které může zobrazit ImageSource. Tento přístup umožňuje zobrazování ikon písem, jako jsou emoji, více zobrazení, na rozdíl od omezení zobrazení ikon písma na jeden text, který prezentuje, například Label.

Důležité

Ikony písem lze v současné době specifikovat pouze pomocí jejich reprezentace znaků Unicode.

Následující příklad XAML obsahuje jednu ikonu písma zobrazenou zobrazením Image :

<Image BackgroundColor="#D1D1D1">
    <Image.Source>
        <FontImageSource Glyph="&#xf30c;"
                         FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}"
                         Size="44" />
    </Image.Source>
</Image>

Tento kód zobrazí v zobrazení ikonu XBox z rodiny Image písem Ionicons. Všimněte si, že zatímco znak unicode pro tuto ikonu je \uf30c, musí být řídicí znak v XAML a tak se stává &#xf30c;. Ekvivalentní kód jazyka C# je:

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

Následující snímky obrazovky z ukázky Rozložení s možností vazby zobrazují několik ikon písem, které se zobrazují v rozložení s možností vazby :

Screenshot of font icons being displayed, on iOS and Android