Xamarin.Forms AbsoluteLayout

Scaricare l'esempio. Scaricare l'esempio

Xamarin.Forms AbsoluteLayout.

Un AbsoluteLayout oggetto viene utilizzato per posizionare e ridimensionare gli elementi figlio usando valori espliciti. La posizione viene specificata dall'angolo superiore sinistro dell'elemento figlio rispetto all'angolo superiore sinistro di AbsoluteLayout , in unità indipendenti dal dispositivo. AbsoluteLayout implementa anche una funzionalità di posizionamento e ridimensionamento proporzionale. Inoltre, a differenza di altre classi di layout, è in grado di posizionare gli elementi AbsoluteLayout figlio in modo che si sovrappongano.

Un oggetto deve essere considerato come un layout per scopi speciali da usare solo quando è possibile imporre una dimensione agli elementi figlio o quando le dimensioni dell'elemento non influiscono sul posizionamento di AbsoluteLayout altri elementi figlio.

La AbsoluteLayout classe definisce le proprietà seguenti:

  • LayoutBounds, di tipo Rectangle , ovvero una proprietà associata che rappresenta la posizione e le dimensioni di un elemento figlio. Il valore predefinito di questa proprietà è (0,0,AutoSize,AutoSize).
  • LayoutFlags, di tipo , ovvero una proprietà associata che indica se le proprietà dei limiti di layout utilizzate per posizionare e ridimensionare l'elemento figlio AbsoluteLayoutFlags vengono interpretate in modo proporzionale. Il valore predefinito di questa proprietà è AbsoluteLayoutFlags.None.

Queste proprietà sono supportate da oggetti , il che significa che le proprietà possono essere BindableProperty destinazioni di data binding e con stile. Per altre informazioni sulle proprietà associate, vedere Xamarin.Forms Proprietà associate.

La AbsoluteLayout classe deriva dalla classe , che definisce una proprietà di tipo Layout<T> Children IList<T> . La proprietà è della classe e pertanto non deve essere impostata in modo Children ContentProperty Layout<T> esplicito da XAML.

Suggerimento

Per ottenere le migliori prestazioni di layout possibili, seguire le linee guida riportate in Ottimizzare le prestazioni del layout.

Elementi figlio di posizione e dimensioni

La posizione e le dimensioni degli elementi figlio in un oggetto vengono definite impostando la proprietà associata di ogni elemento figlio, usando AbsoluteLayout AbsoluteLayout.LayoutBounds valori assoluti o valori proporzionali. I valori assoluti e proporzionali possono essere misti per gli elementi figlio quando la posizione deve essere ridimensionata, ma le dimensioni devono rimanere fisse o viceversa. Per informazioni sui valori assoluti, vedere Posizionamento e ridimensionamento assoluti. Per informazioni sui valori proporzionali, vedere Posizionamento e ridimensionamento proporzionali.

La proprietà associata può essere impostata usando due formati, indipendentemente dal fatto che si utilizzino valori AbsoluteLayout.LayoutBounds assoluti o proporzionali:

  • x, y. Con questo formato, i valori e indicano la posizione dell'angolo superiore sinistro dell'elemento x y figlio rispetto all'elemento padre. L'elemento figlio non è vincolato e si ridimensiona.
  • x, y, width, height. Con questo formato, i valori e indicano la posizione dell'angolo superiore sinistro dell'elemento figlio rispetto al relativo elemento padre, mentre i valori e indicano le x y dimensioni width height dell'elemento figlio.

Per specificare che un elemento figlio si ridimensiona orizzontalmente o verticalmente o entrambi, impostare width i valori e/o height sulla proprietà AbsoluteLayout.AutoSize . Tuttavia, l'uso eccessivo di questa proprietà può danneggiare le prestazioni dell'applicazione, perché causa l'esecuzione di calcoli di layout aggiuntivi da parte del motore di layout.

Importante

Le HorizontalOptions proprietà e non hanno effetto sugli elementi figlio di un oggetto VerticalOptions AbsoluteLayout .

Posizionamento e ridimensionamento assoluti

Per impostazione predefinita, un oggetto posiziona e ridimensiona gli elementi figlio usando valori assoluti, specificati in unità indipendenti dal dispositivo, che definiscono in modo esplicito dove devono essere posizionati gli elementi AbsoluteLayout figlio nel layout. Questo risultato si ottiene aggiungendo elementi figlio alla raccolta di un oggetto e impostando la proprietà associata su ogni elemento figlio su valori assoluti di Children AbsoluteLayout posizione AbsoluteLayout.LayoutBounds e/o dimensioni.

Avviso

L'uso di valori assoluti per il posizionamento e il ridimensionamento degli elementi figlio può essere problematico, perché dispositivi diversi hanno risoluzioni e dimensioni dello schermo diverse. Di conseguenza, le coordinate per il centro dello schermo in un dispositivo possono essere offset su altri dispositivi.

Il codice XAML seguente mostra un AbsoluteLayout oggetto i cui elementi figlio vengono posizionati usando valori assoluti:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AbsoluteLayoutDemos.Views.StylishHeaderDemoPage"
             Title="Stylish header demo">
    <AbsoluteLayout Margin="20">
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="0, 20, 200, 5" />
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="10, 0, 5, 65" />
        <BoxView Color="Silver"
                 AbsoluteLayout.LayoutBounds="20, 0, 5, 65" />
        <Label Text="Stylish Header"
               FontSize="24"
               AbsoluteLayout.LayoutBounds="30, 25" />
    </AbsoluteLayout>
</ContentPage>

In questo esempio la posizione di ogni oggetto viene definita usando i primi due valori BoxView assoluti specificati nella AbsoluteLayout.LayoutBounds proprietà associata. Le dimensioni di ogni BoxView oggetto vengono definite usando il terzo e il terzo valore. La posizione dell'oggetto viene definita utilizzando i due valori assoluti Label specificati nella proprietà AbsoluteLayout.LayoutBounds associata. I valori delle dimensioni non sono specificati per e pertanto non è vincolato Label e le dimensioni sono di per sé. In tutti i casi, i valori assoluti rappresentano unità indipendenti dal dispositivo.

Lo screenshot seguente mostra il layout risultante:

Elementi figlio inseriti in un AbsoluteLayout usando valori assoluti.

Il codice C# equivalente è illustrato di seguito:

public class StylishHeaderDemoPageCS : ContentPage
{
    public StylishHeaderDemoPageCS()
    {
        AbsoluteLayout absoluteLayout = new AbsoluteLayout
        {
            Margin = new Thickness(20)
        };

        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver,
        }, new Rectangle(0, 10, 200, 5));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(0, 20, 200, 5));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(10, 0, 5, 65));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(20, 0, 5, 65));

        absoluteLayout.Children.Add(new Label
        {
            Text = "Stylish Header",
            FontSize = 24
        }, new Point(30,25));                    

        Title = "Stylish header demo";
        Content = absoluteLayout;
    }
}

In questo esempio la posizione e le dimensioni di ogni BoxView oggetto vengono definite usando un oggetto Rectangle . La posizione Label dell'oggetto viene definita utilizzando un Point oggetto .

In C# è anche possibile impostare la posizione e le dimensioni di un elemento figlio di un oggetto dopo che è stato aggiunto alla AbsoluteLayout Children raccolta, usando il AbsoluteLayout.SetLayoutBounds metodo . Il primo argomento di questo metodo è l'elemento figlio e il secondo è un Rectangle oggetto .

Nota

Un AbsoluteLayout oggetto che usa valori assoluti può posizionare e ridimensionare gli elementi figlio in modo che non si adattino ai limiti del layout.

Posizionamento proporzionale e ridimensionamento

Un AbsoluteLayout oggetto può posizionare e ridimensionare gli elementi figlio usando valori proporzionali. Questo risultato si ottiene aggiungendo elementi figlio alla raccolta di e impostando la proprietà associata su ogni elemento figlio su valori proporzionali di posizione e/o dimensioni nell'intervallo Children AbsoluteLayout AbsoluteLayout.LayoutBounds 0-1. I valori di posizione e dimensione vengono resi proporzionali impostando AbsoluteLayout.LayoutFlags la proprietà associata in ogni elemento figlio.

La AbsoluteLayout.LayoutFlags proprietà associata, di tipo , consente di impostare un flag che indica che i valori di posizione e dimensione dei limiti del layout per un elemento figlio sono proporzionali alle dimensioni AbsoluteLayoutFlags di AbsoluteLayout . Quando si esegue il layout di un elemento AbsoluteLayout figlio, ridimensiona i valori di posizione e dimensione in modo appropriato, fino a qualsiasi dimensione del dispositivo.

AbsoluteLayoutFlagsL'enumerazione definisce i membri seguenti:

  • None, indica che i valori verranno interpretati come assoluti. Si tratta del valore predefinito della AbsoluteLayout.LayoutFlags proprietà associata.
  • XProportional, indica che il x valore verrà interpretato come proporzionale, pur trattando tutti gli altri valori come assoluti.
  • YProportional, indica che il y valore verrà interpretato come proporzionale, pur trattando tutti gli altri valori come assoluti.
  • WidthProportional, indica che il width valore verrà interpretato come proporzionale, pur trattando tutti gli altri valori come assoluti.
  • HeightProportional, indica che il height valore verrà interpretato come proporzionale, pur trattando tutti gli altri valori come assoluti.
  • PositionProportional, indica che i valori x y e verranno interpretati come proporzionali, mentre i valori delle dimensioni vengono interpretati come assoluti.
  • SizeProportional, indica che i valori width height e verranno interpretati come proporzionali, mentre i valori di posizione vengono interpretati come assoluti.
  • All, indica che tutti i valori verranno interpretati come proporzionali.

Suggerimento

AbsoluteLayoutFlagsL'enumerazione è Flags un'enumerazione , il che significa che i membri dell'enumerazione possono essere combinati. Questa operazione viene eseguita in XAML con un elenco delimitato da virgole e in C# con l'operatore OR bit per bit.

Ad esempio, se si usa il flag e si imposta la larghezza di un elemento figlio su 0,25 e l'altezza su 0,1, l'elemento figlio sarà un quarto della larghezza di e un decimo SizeProportional AbsoluteLayout dell'altezza. Il PositionProportional flag è simile. Una posizione di (0,0) posiziona l'elemento figlio nell'angolo superiore sinistro, mentre una posizione di (1,1) posiziona l'elemento figlio nell'angolo inferiore destro e una posizione di (0,5,0,5) centra l'elemento figlio all'interno di AbsoluteLayout .

Il codice XAML seguente mostra un AbsoluteLayout oggetto i cui elementi figlio sono posizionati usando valori proporzionali:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AbsoluteLayoutDemos.Views.ProportionalDemoPage"
             Title="Proportional demo">
    <AbsoluteLayout>
        <BoxView Color="Blue"
                 AbsoluteLayout.LayoutBounds="0.5,0,100,25"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <BoxView Color="Green"
                 AbsoluteLayout.LayoutBounds="0,0.5,25,100"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <BoxView Color="Red"
                 AbsoluteLayout.LayoutBounds="1,0.5,25,100"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <BoxView Color="Black"
                 AbsoluteLayout.LayoutBounds="0.5,1,100,25"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <Label Text="Centered text"
               AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"
               AbsoluteLayout.LayoutFlags="PositionProportional" />
    </AbsoluteLayout>
</ContentPage>

In questo esempio ogni elemento figlio viene posizionato usando valori proporzionali, ma ridimensionato usando valori assoluti. Questa operazione viene eseguita impostando la AbsoluteLayout.LayoutFlags proprietà associata di ogni elemento figlio su PositionProportional . I primi due valori specificati nella proprietà associata, per ogni elemento figlio, definiscono AbsoluteLayout.LayoutBounds la posizione usando valori proporzionali. Le dimensioni di ogni elemento figlio vengono definite con il terzo e il terzo valore assoluto, usando unità indipendenti dal dispositivo.

Lo screenshot seguente mostra il layout risultante:

Elementi figlio posizionati in un AbsoluteLayout usando valori di posizione proporzionali.

Il codice C# equivalente è illustrato di seguito:

public class ProportionalDemoPageCS : ContentPage
{
    public ProportionalDemoPageCS()
    {
        BoxView blue = new BoxView { Color = Color.Blue };
        AbsoluteLayout.SetLayoutBounds(blue, new Rectangle(0.5, 0, 100, 25));
        AbsoluteLayout.SetLayoutFlags(blue, AbsoluteLayoutFlags.PositionProportional);

        BoxView green = new BoxView { Color = Color.Green };
        AbsoluteLayout.SetLayoutBounds(green, new Rectangle(0, 0.5, 25, 100));
        AbsoluteLayout.SetLayoutFlags(green, AbsoluteLayoutFlags.PositionProportional);

        BoxView red = new BoxView { Color = Color.Red };
        AbsoluteLayout.SetLayoutBounds(red, new Rectangle(1, 0.5, 25, 100));
        AbsoluteLayout.SetLayoutFlags(red, AbsoluteLayoutFlags.PositionProportional);

        BoxView black = new BoxView { Color = Color.Black };
        AbsoluteLayout.SetLayoutBounds(black, new Rectangle(0.5, 1, 100, 25));
        AbsoluteLayout.SetLayoutFlags(black, AbsoluteLayoutFlags.PositionProportional);

        Label label = new Label { Text = "Centered text" };
        AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, 110, 25));
        AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);

        Title = "Proportional demo";
        Content = new AbsoluteLayout
        {
            Children = { blue, green, red, black, label }
        };
    }
}

In questo esempio la posizione e le dimensioni di ogni elemento figlio vengono impostate con il AbsoluteLayout.SetLayoutBounds metodo . Il primo argomento del metodo è l'elemento figlio e il secondo è un Rectangle oggetto . La posizione di ogni elemento figlio viene impostata con valori proporzionali, mentre la dimensione di ogni elemento figlio è impostata con valori assoluti, usando unità indipendenti dal dispositivo.

Nota

Un oggetto che usa valori proporzionali può posizionare e ridimensionare gli elementi figlio in modo che non si adattino ai limiti del layout usando valori esterni AbsoluteLayout all'intervallo 0-1.