Mobiele apps programmeren met Xamarin – Complexe tekstopmaak

print

Inhoud


Wat vooraf ging


Complexe tekstopmaak

We gaan onderstaande tekst weergeven.

Zoals u ziet bestaat deze tekst uit verschillende delen met elk een specifieke opmaak. Dit bekomt u door de tekst te “formateren” met FormattedText. Deze FormattedString bestaat vervolgens uit een aantal Spans. Een Span kan de volgende opmaakeigenschappen bevatten:

  • BackgroundColor – de achtergrondkleur van de tekst
  • FontAttributes – vet en/of cursief
  • FontFamily – lettertype
  • FontSize – lettergrootte
  • ForegroundColor – tekstkleur
  • Text – de eigenlijke tekst

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TekstOpmaken" x:Class="TekstOpmaken.MainPage">

    <Label VerticalOptions="Center" HorizontalOptions="Center">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="PCVO " FontAttributes="Bold" FontSize="Large" />
                <Span Text="Dender" ForegroundColor="Orange" FontAttributes="Bold" FontSize="Large" />
                <Span Text=" en " FontSize="Small" />
                <Span Text="Schelde" ForegroundColor="Orange" FontAttributes="Bold" FontSize="Large" />
            </FormattedString>
        </Label.FormattedText>
    </Label>

</ContentPage>

C#

using Xamarin.Forms;

namespace TekstOpmaken
{
    public class TekstOpmakenC : ContentPage
    {
        public TekstOpmakenC()
        {

            var s = new FormattedString();
            s.Spans.Add(new Span
            {
                Text = "PCVO ",
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                FontAttributes = FontAttributes.Bold
            });
            s.Spans.Add(new Span
            {
                Text = "Dender",
                ForegroundColor = Color.Orange,
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                FontAttributes = FontAttributes.Bold
            });
            s.Spans.Add(new Span
            {
                Text = " en ",
                FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
            });
            s.Spans.Add(new Span
            {
                Text = "Schelde",
                ForegroundColor = Color.Orange,
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                FontAttributes = FontAttributes.Bold
            });

            var labelPCVO = new Label { };
            labelPCVO.FormattedText = s;

            Content = new StackLayout
            {
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                Children = {
                    labelPCVO
                }
            };
        }
    }
}

Merk op dat eerst de FormattedString wordt samengesteld en dat deze nadien wordt toegekend aan de FormattedText wordt toegekend labelPCVO.FormattedText = s;.


Dynamisch alle beschikbare tekengroottes doorlopen

Dynamisch alle beschikbare tekengroottes doorlopen kan enkel via C#. Hieronder ziet u het resultaat en de code om dit te bekomen.

using System;
using System.Linq;
using Xamarin.Forms;

namespace TekstOpmaken
{
    public class Tekengroottes : ContentPage
    {
        public Tekengroottes()
        {
            FormattedString formattedString = new FormattedString();
            NamedSize[] namedSizes =
            {
                NamedSize.Default, NamedSize.Micro, NamedSize.Small, NamedSize.Medium, NamedSize.Large
            };

            foreach (NamedSize namedSize in namedSizes)
            {
                double fontSize = Device.GetNamedSize(namedSize, typeof(Label));

                formattedString.Spans.Add(new Span
                {
                    Text = String.Format("Tekengrootte = {0} ({1:F2})", namedSize, fontSize),
                    FontSize = fontSize
                });

                if (namedSize != namedSizes.Last())
                {
                    formattedString.Spans.Add(new Span
                    {
                        Text = Environment.NewLine + Environment.NewLine
                    });
                }
            }

            Content = new Label
            {
                FormattedText = formattedString,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };

        }
    }
}

Maak een FormattedString aan:

FormattedString formattedString = new FormattedString();

Maak een enumeratie aan van alle beschikbare tekengroottes:

NamedSize[] namedSizes = {NamedSize.Default, NamedSize.Micro, NamedSize.Small, NamedSize.Medium, NamedSize.Large };.

Voor ieder element in de enumeratie foreach (NamedSize namedSize in namedSizes), vraag de lettergrootte op:

double fontSize = Device.GetNamedSize(namedSize, typeof(Label));

Bouw de tekst op

formattedString.Spans.Add(new Span
{
     Text = String.Format("Tekengrootte = {0} ({1:F2})", namedSize, fontSize),
     FontSize = fontSize
});

Zolang we niet aan het laatste element zijn van de enumeratie if (namedSize != namedSizes.Last()) voegen we nieuwe regels toe.

if (namedSize != namedSizes.Last())
{
     formattedString.Spans.Add(new Span
     {
           Text = Environment.NewLine + Environment.NewLine
     });
}

Let op .Last() komt uit de bibliotheek System.Linq die moet worden toegevoegd using System.Linq;.

Voeg de samengestelde tekst toe.

Content = new Label
{
     FormattedText = formattedString,
     HorizontalOptions = LayoutOptions.Center,
     VerticalOptions = LayoutOptions.Center
};

Kleuren toekennen

In XAML worden kleuren toegekend op basis van hun naam of hun hexadecimale waarde. C# kent meer mogelijkheden:

  • Named Colors – kleuren toekennen op basis van specifieke namen.
  • FromHex – een hexadecimale kleurcode zoals bv. “00FF00”. Alpha kan optioneel worden toegevoegd vooraan bv. “CC00FF00”.
  • FromHsla – Hue, saturation en luminosity. De waarden zijn decimaal waarden (double) en liggen tussen 0 en 1.
  • FromRgb – Red, green en blue. De waarden zijn gehele waarden (int) tussen 0 en 255.
  • FromRgba – Red, green, blue, en alpha. De waarden zijn gehele waarden (int) tussen 0 en 255.
  • FromUint – een gehele waarde die argb representeert.

Onderstaand voorbeeld demonstreert dit.

using Xamarin.Forms;

namespace TekstOpmaken
{
    public class KleurenDemo : ContentPage
    {
        public KleurenDemo()
        {
            var red = new Label
            {
                Text = "Red",
                BackgroundColor = Color.Red
            };
            var orange = new Label
            {
                Text = "Orange",
                BackgroundColor = Color.FromHex("FF6A00")
            };
            var yellow = new Label
            {
                Text = "Yellow",
                BackgroundColor = Color.FromHsla(0.167, 1.0, 0.5, 1.0)
            };
            var green = new Label
            {
                Text = "Green",
                BackgroundColor = Color.FromRgb(38, 127, 0)
            };
            var blue = new Label
            {
                Text = "Blue",
                BackgroundColor = Color.FromRgba(0, 38, 255, 255)
            };
            var indigo = new Label
            {
                Text = "Indigo",
                BackgroundColor = Color.FromRgb(0, 72, 255)
            };
            var violet = new Label
            {
                Text = "Violet",
                BackgroundColor = Color.FromHsla(0.82, 1, 0.25, 1)
            };

            var space = new Label
            {
                Text = " ",
                BackgroundColor = Color.Transparent
            };

            var transparent = new Label
            {
                Text = "Transparent",
                BackgroundColor = Color.Transparent
            };
            var standaard = new Label
            {
                Text = "Default",
                BackgroundColor = Color.Default
            };
            var accent = new Label
            {
                Text = "Accent",
                BackgroundColor = Color.Accent
            };

            Content = new StackLayout
            {
                Padding = new Thickness(0, 20, 0, 0),
                Children = {
                    new Label {
                        Text = "Kleurendemo",
                        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                        FontAttributes = FontAttributes.Bold
                    },
                    red, orange, yellow, green, blue, indigo, violet, space, transparent, standaard, accent
                }
            };

        }
    }
}

Behandelde Basiscompetenties uit de module ICT Programmeren – Specifieke ontwikkelomgeving: complexe functionaliteiten

  • IC BC235 – kan gevorderde principes van programmeren in een specifieke ontwikkelomgeving toepassen
  • IC BC246 – kan complexe ontwerpen in een specifieke ontwikkelomgeving maken
  • IC BC251 – kan een ontwerp in een specifieke ontwikkelomgeving verfijnen

Geef een reactie

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.