固定アスペクト比のNativeScript GridLayoutを作成する方法はありますか？

Question

まず最初に質問したように、SOルールに従わないと謝罪したいと思います。

私が遂行しようとしているのは、の方角のgridLayoutです。この振る舞いは、stretch = "aspectFit"の要素を持つことと等価でなければなりません。

任意のアスペクト比を正方形ではなく強制することができれば、それは私が将来複数の状況を解決できるので、素晴らしいプラスになります。あるいは、それがどんなLayout要素にも適用できるならば、それはいいかもしれません。

解決策は必要に応じてハッキーにすることができ、GridLayoutはこれを遂行するために必要な方法でネストすることができます。私はすでに、このようにそれをハックしようとしてい

：

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

は、視覚的に動作するように見えますが、GridLayoutの内容は、PS apropriately

をそれを埋めるしませんでした：私はちょうどに気づきました私が選択した例では、私が正方形にしようとしているレイアウト要素は入れ子にされたStackLayoutですが、それは同じ考えです。ネストされたレイアウト要素を二乗する方法が必要です。

Answer 1

@ Nathanaelに感謝してくれたことに感謝します。

私は解決策を見つけました。そして、それを必要とする人のためのものです。すべての

まず、私は以下のテンプレートを使用しています：

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

私の目標は、GridLayoutには正方形を見て、画面上、どんなにデバイスや画面の縦横比を中心にすることです。これを実現するために、私は、コンポーネント定義

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

の内側（私はAngular2 + Nativescriptで働いているように、この場合にはまたは活字体）JavaScriptで次のことを行なったし、これは結果であった：

Square GridLayout in multiple screen resolutions and aspect ratios

Answer 2

グリッドレイアウトのネイティブプロパティを使用できます。グリッドが画面全体を塗りつぶすようにする必要があります（CSSクラスを使用してグリッドを設定することによって行うことができます）。次に、行と列に必要な解像度を作成し、x*を使用して相対幅を定義することに注意してください。私の選択したデモは10であるため、*は10％を表します。

必要に応じて、グリッドセル内に他のレイアウトをネストすることができます。

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

希望します。