web-dev-qa-db-ja.com

NativeScriptレイアウトでビューの寸法を検索/監視するにはどうすればよいですか？

レイアウトがその内部のビューをロードすると、幅と高さがNaNになり、getMeasuredHeight()とgetMeasuredWidth()が_0_になります。

ある時点で、getMeasuredHeight()とgetMeasuredWidth()（レイアウトがレイアウトされた後）は有用な値を受け取ります。

どうすれば何かの寸法を取得できますか？それらが変化するのをどのように見ることができますか？ _.width_と_.height_がNaNにならないのはいつですか？画面全体にビューをホバーさせられないのはなぜですか????

これまで私はポーリング 100msごとに行ってきましたが、かなり馬鹿げています。助けてください。

nativescript
14
Michael Eden

正しいインポートを使用します。

const platform = require("platform")

または、 TypeScriptangular2-nativescript を使用している場合

import {screen} from "platform"
//or import {screen} from "tns-core-modules/platform/platform"

その後、このようにあなたの言語に応じてそれを使用することができます：

TypeScript：

screen.mainScreen.widthDIPs //for example : 640
screen.mainScreen.widthPixels
screen.mainScreen.heightDIPs
screen.mainScreen.heightPixels

mainScreen は ScreenMetrics インターフェイスを実装し、さまざまな画面サイズにアクセスできるようにします。

JS：

platform.screen.mainScreen.widthDIPs //for example : 640
platform.screen.mainScreen.widthPixels
platform.screen.mainScreen.heightDIPs
platform.screen.mainScreen.heightPixels

注：このプロパティは、モバイルデバイスの画面のサイズです。

13
odiaz

navigatedToイベントでview.getActualSize().width/heightを試すことができます。このイベントでのみ、height/widthの実際のlayout/viewを取得できます。

あなたが参照することができます ここ

6
Sagar1911

NSがビューのロードされたイベントを発生させるとき、この時点ではまだレンダリングされていません。そのため、内部のすべてのビューの高さと幅は0です。しばらく待ってから試すことで回避できます。ビューの寸法を取得するには、ロードした関数にこれを追加します。

var height = 0

function checkIfViewRendered() {
    setTimeout(function() {
        height = view.getMeasuredHeight()
    }, 100)
    if (height === 0) checkIfViewRendered()
    else console.log('rendered height is', height)
}

checkIfViewRendered()

お役に立てれば。

3
terreb

layoutChangedのViewイベントを監視することができます。レイアウトプロセスが完了するたびに発生します。ビューのサイズ変更

myView.on("layoutChanged", function(){
    console.log("layout change");
});
3
Tyg

それらが変化するのをどのように見ることができますか？

デバイスが回転するときにいくつかの変数を構成することもできます。

in Angular2：

import { Component, OnInit, OnDestroy, NgZone } from "@angular/core";
import * as application from "application";

@Component({
    ...
})
export class MyComponent implements OnInit, OnDestroy {

    ngOnInit() {
        this.setIsScreenWide();
        application.on(application.orientationChangedEvent, this.onOrientationChanged, this);
    }

    isScreenWide: boolean;

    setIsScreenWide() {
        let widthDIPs = screen.mainScreen.widthDIPs;
        this.isScreenWide = widthDIPs >= 480;
    }

    onOrientationChanged = (args: application.OrientationChangedEventData) => {
        this.zone.run(() => {
            setTimeout(() => {
                this.setIsScreenWide();
            }, 17 /* one frame @ 60 frames/s, no flicker */);
        });
    };

    ngOnDestroy() {
        application.off(application.orientationChangedEvent, this.onOrientationChanged, this);
    }

    ...
}
2
EricRobertBrewer

ページのnavigatedToイベントをサブスクライブできます。これは、ビューがレイアウトされた後に発生するようです。そこで、getMeasuredHeight()メソッドとgetMeasuredWidth()メソッドは値を返す必要があります。

Xmlファイルに以下を追加します。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" navigatedTo="{{ navigated }}">
<DockLayout id="mainLayout">
...
</DockLayout>

Tsファイルにマッチングメソッドを追加します。

public navigated(args:EventData){
        alert ("My view height is " + this.myView.getMeasuredHeight());
    }

そして、pageLoadedイベントリンクmyViewであなたのビューに：

public pageLoaded(args: EventData) {
    this.page = <Page>args.object;
    this.page.bindingContext = this;
    this.myView = <DockLayout>this.page.getViewById("mainLayout");        
}

お役に立てれば。

ステファノ

1
talpaz

layoutChangedEventを使用して、サイズ変更されるビューに応答できます。ビューの名前がviewの場合、次のような方法でうまくいくはずです。

import { View } from "ui/core/view";
import { EventData } from 'data/observable';

// ...

view.on(View.layoutChangedEvent, (e:EventData) => {
  const size = view.getActualSize();
  // ... do something with the size
});
1
Jesse Crossen