web-dev-qa-db-fra.com

Xamarin Forms - AbsoluteLayout - Comment fonctionnent les positions de travail

Je travaille avec Xamarin.Forms avec AbsoluteLayout, cependant, je ne suis pas sûr de comprendre comment travailler le positionnement des éléments.

Je travaille avec des valeurs proportionnelles, donc si je place un élément à AbsoluteLayout.LayoutBounds="1, 0.05, 0.15, 0.1" où chaque valeur est proportionnelle (les indicateurs sont donc "tous" AbsoluteLayout.LayoutFlags="All")

Il sera placé en haut/à droite de l'écran. Cela ne prendra cependant pas une place un peu à l'extérieur. Alors qu'est-ce que cela signifie? Chaque élément est repositionné sur l'écran s'il sort de l'extérieur?

 enter image description here

Mais maintenant, une autre question se pose, lorsque vous placez un élément, sur quoi repose la position X/Y? Est-ce que le centre ou un autre point?

 enter image description here

Sur cet exemple, j'ai essayé avec 0,15 mais le rendu était un peu bizarre, alors je mets 0 et le rendu correspond à ce que je veux.

Vous pouvez dire "Testez-le et vous verrez." Cependant, c’est une perte de temps pour le concepteur et pour moi de positionner tous les éléments, car nous ne sommes pas certains de comprendre comment cela fonctionne. Donc nous essayons juste de déboguer ..

Nous cherchons également à savoir s'il existe un logiciel permettant de générer des positions sur la conception réalisée par le concepteur. Nous entendons la position X/Y de l'élément en pourcentage.

Merci d'avance !

xamarin.formsabsolutelayout
8
Emixam23

Avec AbsoluteLayoutFlag.All, les paramètres de limite Rectangle ont la signification suivante:

  • x représente le pourcentage de l’espace restant (largeur du parent - largeur du contrôle) qui doit se trouver à gauche du contrôle
  • y représente le pourcentage de l’espace restant (c.-à-d. hauteur parent - hauteur du contrôle) qui devrait se trouver en haut du contrôle
  • largeur est la largeur du contrôle en pourcentage de la largeur du parent
  • hauteur est la hauteur du contrôle en pourcentage de la hauteur du parent

La largeur et la hauteur correspondent à ce que les gens attendent habituellement. Cependant, x et y ne sont pas comme les gens sont plus habitués à "gauche" et "haut". Vous pouvez donc écrire un convertisseur pour convertir le pourcentage de gauche en x et le pourcentage supérieur en y: 

x = left/(1 - width)
y = top/(1 - hauteur)

15
François
<AbsoluteLayout BackgroundColor="Yellow">
<BoxView
    Color="Red"
    AbsoluteLayout.LayoutBounds="1.0, 1.0, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />

<BoxView
    Color="Green"
    WidthRequest="50"
    HeightRequest="50"
    AbsoluteLayout.LayoutBounds="0.1, 0.1, AutoSize, AutoSize"
    AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView
    Color="Blue"
    AbsoluteLayout.LayoutBounds="0.25, 0.25, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>

 enter image description here

Quand j’ai recherché AbsoluteLayout j’ai créé cet échantillon et

Testez-le et vous verrez

Ce que j'ai décidé dans mon enquête: X et Y sont les coordonnées du coin supérieur gauche de View. C'est la position relative. Comme vous pouvez le constater pour le rectangle rouge, 1.0, 1.0 correspond à la position centrale, ainsi, si j'ai bien compris, la largeur de l'écran à 100% correspond à 2.0 (identique pour la hauteur). Toutes les vues à l'intérieur de AbsoluteLayout sont positionnées de manière dépendante des valeurs de parent AbsoluteLayout.

Édité:

X et Y sont les coordonnées centrales de View et non du coin supérieur gauche. Et 100% de Width est 1.0.

6
Yehor Hromadskyi

X && Y sont le centre de l'élément

1
Emixam23

J'ai fait quelques tests et constaté que, avec AbsoluteLayoutFlag.All, la valeur X exprimée en pourcentage correspond essentiellement à l'emplacement de l'ancre dans un rectangle. Comme dans le cas où X = 10% alors l'ancre est à 10% de la gauche du rectangle:

Exemple

À X = 0,1 avec une largeur donnée de 20%. 90% de la longueur ira à droite et 10% ira à gauche.

À X = 0,5 avec une largeur donnée de 20%. 10% iront à gauche et 10% à droite.

Formule pour X bornes

Variables dans un rectangle (Ax, Ay, Wx, Wy) : 

W - largeur requise

Ax - valeur X (position d'ancrage)

X1 - Valeur de la position X du coin supérieur gauche par rapport au côté gauche (X = 0)

X2 - valeur de la position x du coin supérieur droit par rapport au côté gauche (X = 0)

La formule propose 5 scénarios possibles pour une valeur d'ancrage

Ax = 0:

X1 = 0 & X2 = Wx

Ax = 1:

X2 = 1 & X1 = (1 - Wx)

Ax = 0.5

X1 = Ax - (0.5) (Wx)

X2 = Ax + (0.5) (Wx)

0 <Ax <0.5

X1 = Ax - (Ax) (Wx)

X2 = Ax + (1 - Ax) (Wx)

0.5 <Ax <1

X1 = Ax - (Ax) (Wx)

X2 = Ax + (1-Ax) (Wx)

0
Janwilx72

En guise de réponse tardive, j'ai mis un paquet de pépites avec une fourchette d'AbsoluteLayout, mais je travaillais comme je le souhaitais.

Installez le package de nuget SmartMachines.AbsoluteLayout, ajoutez un espace de nom xmlns:sm="clr-namespace:SmartMachines;Assembly=AbsoluteLayout" et vous obtiendrez exactement le même AbsoluteLayout que Xamarin natif, mais avec le comportement d'alignement proportionnel attendu.

J'espère que cela épargnera aux autres plusieurs heures consacrées à la recherche sur Google et au débogage.

0
smartmachines