ボタンをNativeScriptアプリケーションで動作しないGridLayoutに挿入する

Question

ボタンの横にある画像を使用しようとしました。これらはすべてGridLayoutの1つの行内になければなりません。私のHTML：

<GridLayout colums="4*,*,*,*,*,*" rows="*"> 
    <Button text="send rating" (onTap)="rateIt()" col="0" row="0" class="send-rating-button"></Button> 
    <Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image> 
    <Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image> 
    <Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image> 
    <Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image> 
    <Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image> 
</GridLayout> 

悲しいことに、完全な行と画像の上にボタンを配置しています。私は行/列を定義するときに何かを逃したのですか？

ボタンとイメージCSS：

.star-image { 
    width: 30; 
    margin: 10; 
} 

.send-rating-button { 
    margin-left: 30; 
    margin-right: 10; 
    background-color: yellow; 
    border-color:black; 
    border-width: 1; 
    max-width: 100; 
} 

編集：私は、おそらく彼が何をするのか明確にすべき。 GridLayoutの1つのセルに各要素を挿入するのではなく、すべての要素が線の上に重ねて表示されます。

Edit2：以前はうまくいかなかった理由はわかりません。作業コード。

<GridLayout columns="*4,*,*,*,*,*" rows="*"> 
    <Button col="0" row="0" [text]="'RATING_AVG'|translate" class="send-rating-button" (onTap)="rateIt()"></Button> 
    <Image src="{{ user_rating_imageurls[0] }}" col="1" row="0" class="star-image" (onTap)="rateFromUser('1')"></Image> 
    <Image src="{{ user_rating_imageurls[1] }}" col="2" row="0" class="star-image" (onTap)="rateFromUser('2')"></Image> 
    <Image src="{{ user_rating_imageurls[2] }}" col="3" row="0" class="star-image" (onTap)="rateFromUser('3')"></Image> 
    <Image src="{{ user_rating_imageurls[3] }}" col="4" row="0" class="star-image" (onTap)="rateFromUser('4')"></Image> 
    <Image src="{{ user_rating_imageurls[4] }}" col="5" row="0" class="star-image" (onTap)="rateFromUser('5')"></Image> 
</GridLayout> 

Answer 1

（*で設定した列よりも4倍も広いとなり、このコラムを手段）4 *を使用して相対的な幅を割り当てて、私は考えを持つことはできませんいずれかなぜ「新しい」コードが機能し、古いコードは機能しなかったのでしょうか？私は質問に更新として作業コードを掲示しました。

Answer 2

Marek氏のコメントでは、構文エラーのために最初の列の幅を4 DP（デバイスに依存しないピクセル）に設定しているためです。あなたはあなたの最初の行のためのより大きなDP値を割り当てるか、私は少し周りを試みた

<GridLayout colums="4*,*,*,*,*,*" rows="*">