Wie positioniere ich das Element am unteren Rand von Absolute Layout in NativeScript?

Question

Ich möchte ein Element am unteren Rand des Bildschirms in Absolute Layout in NativeScript positionieren.

Ich habe diesen Code:

<AbsoluteLayout> 
    <maps:mapView 
     left="0" 
     top="0" 
     width="100%" 
     height="100%" 
     latitude="{{ map.latitude }}" 
     longitude="{{ map.longitude }}" 
     zoom="{{ map.zoom }}" 
     padding="{{ map.padding }}" 
     mapReady="onMapReady" 
     coordinateTapped="onCoordinateTapped" 
     markerSelect="onMarkerSelect" 
     shapeSelect="onShapeSelect" 
     cameraChanged="onMapCameraChanged"/> 

    <ScrollView 
     left="0" 
     top="0" 
     width="100%" 
     orientation="horizontal"> 
     <!-- More XML --> 
    </ScrollView> 

    <StackLayout 
     left="0" 
     bottom="0" 
     width="100%" 
     visibility="visible" 
     orientation="horizontal" 
     style="background-color: red;"> 

     <Label text="TITLE"></Label> 

    </StackLayout> 
</AbsoluteLayout> 

Ich fand heraus, dass kein Boden Attribut für AbsoluteLayout ist ... Hier ist das Bild von dem, was ich erstellen möchten:

Wie kann man Gegenstände wie auf dem Bild arrangieren, besonders die untere?

EDIT: Ich sollte anmerken, dass Dimensionen dieses untere Rechteck nicht immer gleich sein können ....

Answer 1

ich etwas ähnliches 1 Tag tat, programmatisch & mit kantigem, vielleicht kann dabei helfen.

Wenn Sie kein GridLayout verwenden möchten, können Sie versuchen, die Höhe Ihres unteren Elements und des Bildschirms zu ermitteln. Dann platzieren Sie Ihr Element von oben mit einer einfachen Formel: Bildschirmhöhe - Bodenelementhöhe (- mehr wenn Sie etwas Polsterung wünschen). Sie können zwei Arten von Werten verwenden: DIPs und Pixel. Wenn Sie Pixel verwenden, müssen Sie Ihre Werte mithilfe der Bildschirmskalierung in DIPs umwandeln.

So etwas wie diese (ich nicht den Code testen habe ich dir gebe, es ist nur ein Beispiel):

1] eine ID zu Ihrem unteren Elemente hinzufügen, damit Sie es in Ihrem Komponente zugreifen können :

<StackLayout #bottomElt></StackLayout> 

2] aktualisieren Sie Ihre Komponente Elementposition in Ihrem absoluten Layout

// you need ElementRef, OnInit and ViewChild 
import { Component, ElementRef, OnInit, ViewChild, ViewContainerRef } from "@angular/core"; 
import { AbsoluteLayout } from "ui/layouts/absolute-layout"; 
import { StackLayout } from "ui/layouts/stack-layout"; 
// you need access to screen properties 
import { screen } from "tns-core-modules/platform"; 
[...] 

export class YourComponent implements OnInit { 
    // add access to element inside your component 
    @ViewChild("bottomElt") bottomElt: ElementRef; 

    // create variable to access bottom element properties 
    bottomContainer: StackLayout; 

    // set bottom element position after view init 
    // example : inside ngOnInit function (for Angular version) 
    ngOnInit(): void { 
     this.bottomContainer = <StackLayout>this.bottomElt.nativeElement; 

     // using DIPs values only 
     AbsoluteLayout.setTop(this.bottomContainer, (screen.mainScreen.heightDIPs - Number(this.bottomContainer.height))); 

     // using pixels and screen scale 
     // this way you can get height without knowing it 
     AbsoluteLayout.setTop(this.bottomContainer, (screen.mainScreen.heightDIPs - (Number(this.bottomContainer.getMeasuredHeight())/screen.mainScreen.scale))); 

    } 

Weitere informatio einstellen n über Bildschirm Werte: https://docs.nativescript.org/api-reference/interfaces/platform.screenmetrics.html

Alternative Art und Weise

Statt AbsoluteLayout zu verwenden, können Sie ein Gridlayout verwenden, um einen unteren Leiste zu setzen, mit zwei Reihen: eine mit einer Wildcard Größe und das andere mit Auto Größe so kann es Passen Sie die Höhe Ihres unteren Balkens bei jedem Wechsel an. Ich habe es auf diese Weise in einer mobilen Anwendung ein Menü am unteren Rand in Android und IOS zu erhalten:

<GridLayout rows="*, auto" width="100%"> 
    <AbsoluteLayout row="0" orientation="vertical"> 
     <!-- YOUR CONTENT (maps & ScrollView) --> 
    </AbsoluteLayout> 

    <!-- YOUR BOTTOM BAR (StackLayout). Don't forget to add row="1" --> 
    <StackLayout #bottomElt row="1">[...]</StackLayout> 
</GridLayout> 

Answer 2

Eine weitere Option FlexboxLayout in Ihrem AbsoluteLayout Container wie folgt verwendet:

<FlexboxLayout flexDirection="column" justifyContent="space-between" height="100%"> 
    <ScrollView 
     width="100%" 
     orientation="horizontal"> 
     <!-- More XML --> 
    </ScrollView> 

    <StackLayout 
     width="100%" 
     visibility="visible" 
     orientation="horizontal" 
     style="background-color: red;"> 

     <Label text="TITLE"></Label> 

    </StackLayout> 
</FlexboxLayout>