web-dev-qa-db-ja.com

NativeScriptで要素を絶対レイアウトの下部に配置するにはどうすればよいですか？

NativeScriptの絶対レイアウトで画面の下部に要素を配置したいのですが。

私はこのコードを持っています：

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

AbsoluteLayoutにはボトム属性がないことがわかりました...これが私が作成したいものの画像です：

enter image description here

では、写真のようなアイテム、特に下のアイテムをどのように配置するのですか？

編集：私はこの下の長方形の寸法が常に同じであるとは限らないかもしれないことに注意すべきです...

nativescript
8
clzola

ある日、プログラムで＆Angularを使用して同様のことを行いましたが、これが役立つ場合があります。

GridLayoutを使用したくない場合は、下の要素と画面の高さを取得して、単純な計算を使用して上から要素を配置できます。画面の高さ-下の要素の高さ（-必要に応じてさらにパディング）。 DIPとピクセルの2種類の値を使用できます。ピクセルを使用している場合は、画面スケールを使用して値をDIPに変換する必要があります。

このようなもの（私があなたに与えているコードをテストしませんでした、それは単なる例です）：

1]下の要素にIDを追加して、コンポーネント内でアクセスできるようにします。

<StackLayout #bottomElt></StackLayout>

2]コンポーネントを更新して、絶対レイアウト内の要素の位置を設定します

// 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)));

    }

画面の値の詳細： https://docs.nativescript.org/api-reference/interfaces/platform.screenmetrics.html

別の方法

AbsoluteLayoutを使用する代わりに、GridLayoutを使用して、2行のボトムバーを設定できます。1つはワイルドカードサイズでもう1つは自動サイズで、変更するたびにボトムバーの高さに合わせることができます。 Android and IOS：

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

別のオプションは、次のようにAbsoluteLayoutコンテナでFlexboxLayoutを使用することです。

<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>
5
Mohammad Rafigh

これは絶対的な最善の解決策であり、開発者の1人から入手しました： https://github.com/NativeScript/NativeScript/issues/5591#issuecomment-482640921

<GridLayout rows="*,auto">
   <ItemTakingFullScreen rowSpan="2"/>
   <ItemShownUnder row="1"/>
   <ItemShownAbove row="1">
</GridLayout>

基本的に、グリッドレイアウトを使用して、アイテムが複数のグリッドスペースを占め、それらを他のアイテムと共有できます。

2
Seph Reed

これが、幅と高さが100％のabsolutelayoutのすべての要素をラッピングする最良のソリューションです。グリッドレイアウトを追加して、メインコンテンツを保持することもできます。

        <AbsoluteLayout width='100%' height='100%'>
           <StackLayout width='100%' hieght='100%' left='0' top='0'>
                 //add you structure here

           </StackLayout>
           add your fixed element here

           <image src='add the float item'/>
       </AbsoluteLayout>
0
Ehigie Paul