Existe-t-il un moyen de créer un GridLayout NativeScript avec un format d'image fixe?

Question

Tout d'abord, je voudrais m'excuser si je ne respecte pas les règles de SO, car c'est ma première question. Ce que j'essaie d'accomplir, c'est d'avoir une grille dans ma page. Le comportement devrait être équivalent à avoir un élément avec stretch = "aspectFit". Si la solution suggérée pouvait me permettre d'appliquer un ratio d'aspect donné au lieu d'un carré, ce serait un plus, car cela me permettrait de résoudre plusieurs situations dans le futur. Ou s'il pouvait être appliqué à n'importe quel élément de Layout, ce serait aussi bien.

La solution peut être aussi hacky que vous le souhaitez, et GridLayout peut être imbriqué de la façon dont vous avez besoin d'accomplir ceci.

J'ai déjà essayé de pirater comme ceci:

<GridLayout rows="*,auto,*" columns="*,auto,*" backgroundColor="green"> 
    <Image row="1" col="1" src="~/Images/1px-black.png" stretch="aspectFit" width="100%"></Image> 
    <StackLayout row="1" col="1" orientation="vertical" backgroundColor="lightgray"> 
    <Label text="Label 1" width="100%" height="25%" backgroundColor="red"></Label> 
    <Label text="Label 2" width="100%" height="25%" backgroundColor="green"></Label> 
    <Label text="Label 3" width="100%" height="25%" backgroundColor="blue"></Label> 
    <Label text="Label 4" width="100%" height="25%" backgroundColor="yellow"></Label> 
    </StackLayout> 
</GridLayout> 

Visuellement il a semblé fonctionner, mais le contenu du GridLayout n'a pas remplir apropriately

PS: Je viens de remarquer dans la exemple que j'ai choisi, l'élément de mise en page que j'essaie de rendre carré est le StackLayout imbriqué, mais c'est la même idée. J'ai besoin d'un moyen de faire un élément de mise en page imbriqué au carré.

Answer 1

Merci à @Nathanael pour m'avoir donné un aperçu de ce que je pourrais éventuellement faire.

J'ai trouvé la solution et voilà pour tous ceux qui pourraient en avoir besoin.

Tout d'abord, je vais utiliser le modèle suivant:

<GridLayout rows="2*,3*,*,3*,*,3*,*,3*,2*" columns="2*,3*,*,3*,*,3*,*,3*,2*" backgroundColor="green" #refGrid> 
    <Label text="A1" col="1" row="1" backgroundColor="#899bfe"></Label> 
    <Label text="A2" col="1" row="3" backgroundColor="#899bfe"></Label> 
    <Label text="A3" col="1" row="5" backgroundColor="#899bfe"></Label> 
    <Label text="A4" col="1" row="7" backgroundColor="#899bfe"></Label> 

    <Label text="B1" col="3" row="1" backgroundColor="#899bfe"></Label> 
    <Label text="B2" col="3" row="3" backgroundColor="#899bfe"></Label> 
    <Label text="B3" col="3" row="5" backgroundColor="#899bfe"></Label> 
    <Label text="B4" col="3" row="7" backgroundColor="#899bfe"></Label> 

    <Label text="C1" col="5" row="1" backgroundColor="#899bfe"></Label> 
    <Label text="C2" col="5" row="3" backgroundColor="#899bfe"></Label> 
    <Label text="C3" col="5" row="5" backgroundColor="#899bfe"></Label> 
    <Label text="C4" col="5" row="7" backgroundColor="#899bfe"></Label> 

    <Label text="D1" col="7" row="1" backgroundColor="#899bfe"></Label> 
    <Label text="D2" col="7" row="3" backgroundColor="#899bfe"></Label> 
    <Label text="D3" col="7" row="5" backgroundColor="#899bfe"></Label> 
    <Label text="D4" col="7" row="7" backgroundColor="#899bfe"></Label> 
</GridLayout> 

Mon but est de rendre le GridLayout regarder carré et centré sur l'écran, peu importe le format d'image périphérique ou de l'écran. Pour ce faire, je l'ai fait ce qui suit dans JavaScript (ou tapuscrit dans ce cas, comme je travaille avec Angular2 + Nativescript) dans la définition des composants

ngAfterViewInit() { 
    let grid: GridLayout = <GridLayout>this.refGrid.nativeElement; 
    var x = grid.getActualSize(); 

    function wait() { 
     if (x.width <= 0) { 
      x = grid.getActualSize(); 
      setTimeout(wait, 10); 
     } else { 
      grid.width=Math.min(x.width, x.height); 
      grid.height=Math.min(x.width, x.height);   
     } 
    } 
    wait(); 
} 

Et ce fut le résultat:

Square GridLayout in multiple screen resolutions and aspect ratios

Answer 2

Vous pouvez utiliser les propriétés natives d'une disposition de grille. Vous devrez vous assurer que votre grille remplit tout l'écran (peut être fait en le ciblant avec une classe css). Ensuite, vous pouvez créer la résolution dont vous avez besoin dans les lignes et les colonnes, notez l'utilisation de x* pour définir les largeurs relatives, ma démo choisie en a 10, donc * représente 10%.

Vous pouvez ensuite imbriquer d'autres dispositions dans les cellules de la grille si vous le souhaitez.

<GridLayout rows="*,*,*,*" columns="*,2*,3*,4*"> 
    <Label row="0" col="0" [colSpan]="4" backgroundColor="lightgray"> // Will be 100% width, height will be 10% 
    </Label> 
    <Label row="1" col="0" [colSpan]="4" backgroundColor="blue"> // Will be 100% width, height will be 20% 
    </Label> 
    <Label row="2" col="0" [colSpan]="4" backgroundColor="green"> // Will be 100% width, height will be 30% 
    </Label> 
    <Label row="3" col="0" [colSpan]="4" backgroundColor="red"> // Will be 100% width, height will be 40% 
    </Label> 
</GridLayout> 

Espérons que ça aide.