Nativescriptボタンオーバーレイ

Question

Nativescriptで画像の上にボタンをオーバーレイする方法は不思議でしたか？

私は背景画像を使用しようとしましたが、ボタンが画像の上に終わらない。

は、現在、私が持っているものです。

<Image src="~/images/image.jpg" class="image" stretch="aspectFit" /> 
     <Button text ="image" tap="tapAction" class="ButtonOne"/> 

<Image src="~/images/image2.jpg" stretch="aspectFit" class="image2" horizontalAlignment="right"/> 
     <Button text ="image2" tap="tapAction1" class="ButtonTwo"/> 

私は簡単に同じページ上で、これらの写真やボタンをオーバーレイすることができるように私はここにstacklayoutを使用しました。今私が達成したいのは、境界線を取り除き、画像の上にボタンのテキストを置くことです。

私は、背景画像などのCSSプロパティのいくつかを試してきましたが、これに対して良い答えを得ることはできません。

誰かがこの問題の正しい方向を教えてくれたら大変感謝しています。私は画像の上にボタンを重ねる方法を見つけたい。

ありがとうございました！

ここに私が現在持っているものはありますが、空白をなくし、それぞれの写真の下にそれぞれのボタンを配置しようとしています。だから、合計4つの写真とそれぞれの底に4つのボタン！

Answer 1

あなたはこのようGridLayoutを使用することができます。

<GridLayout rows="auto" columns="auto" backgroundImage="~/images/yourpic.png"> 
<Button text="Hello Guy!" row="0" col="0" /> 
</GridLayout> 

しかし、それはStackLayoutがスタックにbackgroundImageのと同じアプローチを取って簡単に（以下のマークアップ）です。

Answer 2

あなたはまた、例えば、AbsoluteLayoutを使用することができます。

<AbsoluteLayout width="100%" height="100%"> 
    <Image src="~/images/image.jpg" class="image" stretch="aspectFit" top="0" left="0" /> 
    <Button text="image" tap="tapAction" class="ButtonOne" top="20" left="20"/> 
</AbsoluteLayout> 

Answer 3

GridLayoutの中に画像やボタンを使って複数の行や列を追加することが可能です。この例では、互いに以下2つの等しい高さイメージを持っている：

<GridLayout rows="1*,1*" columns="auto"> 
    <Image row="0" src="~/images/image.jpg" class="image" stretch="aspectFit" /> 
    <Button row="0" text ="image" tap="tapAction" class="ButtonOne"/> 

    <Image row="1" src="~/images/image2.jpg" stretch="aspectFit" class="image2" horizontalAlignment="right"/> 
    <Button row="1" text ="image2" tap="tapAction1" class="ButtonTwo"/> 
</GridLayout> 

このグリッドレイアウトの利点は、画像ボタンは、同じ位置に常にあり、それは消耗品であるということです。