CODEWITHSUNDEEP
nativescript
akniazi
akniazi

Reputation: 732

position element at center of absolute layout in nativescript

I have a list of objects coming from api which I am showing in a ListView. For each item in the list, i am rendering an absolute layout. If the item has photo I show it full stretched so that it appear as a background image for that item in the list. Then I am rendering button with item name which i want to render right at the center of the image. I went through the docs but could not find a way to do it.

<ListView [items]="List">
  <StackLayout>
    <template let-item="item">
      <AbsoluteLayout  class="list-item">
        <Image src="{{item.photo}}" *ngIf="item.photo" stretch="fill">  </Image>
        <Button [text]="item.name" (tap)="onItemTap(item)"></Button>
      </AbsoluteLayout>
    </template>
  </StackLayout>    
</ListView>

Upvotes: 7

Views: 4879

Answers (3)

Liu
Liu

Reputation: 1

try this nativescript also accept percentage value

<AbsoluteLayout>
  <Image src="your-image-here.jpg" width="100%" height="220"></Image>
  <GridLayout top="50%" left="50%" width="100%">
    <Label text="Lorem Ipsum" textWrap="true">
 </GridLayout>
</AbsoluteLayout>

Upvotes: 0

Russell Chisholm
Russell Chisholm

Reputation: 665

Place a GridLayout inside the AbsoluteLayout, then place the Button which should be centered inside the GridLayout:

<AbsoluteLayout  class="list-item">
    <Image src="{{item.photo}}" *ngIf="item.photo" stretch="fill">  </Image>
    <GridLayout background="transparent">
        <Button [text]="item.name" (tap)="onItemTap(item)"></Button>
    </GridLayout>
</AbsoluteLayout>

Upvotes: 7

Nick Iliev
Nick Iliev

Reputation: 9670

You can set left and top for the component inside your AbsoluteLayout. Now if you have equal sized images the things are pretty easy - you can provide displacement from the left and from the top based on your thumbnail size. Or you can provide the left and top displacement based on code-behind calculation and some more binding e.g.

  <AbsoluteLayout>
    <Image src="{{item.photo}}" *ngIf="item.photo" stretch="fill">  </Image>
    <Button text="This is Label 1" [left]="leftValueBasedOnImageSize" [top]="topValueBasedOnImageSize" ></Button>
  </AbsoluteLayout>

You can also set the size of your absolute layout and place your button to the center based on that dimensions.

  <AbsoluteLayout width="300" height="300">
    <Image src="{{item.photo}}" left="0" top="0" width="300" height="300" stretch="aspectFill">  </Image>
    <Button text="Button" left="120" top="130" height="40" [left]="leftValue" [top]="topValue" ></Button>
  </AbsoluteLayout>

Upvotes: 0

Related Questions