Comment trouver / regarder les dimensions d'une vue dans une mise en page NativeScript?

voix
3

Lorsque ma mise en page charge une vue à l' intérieur de celui - ci a une largeur et la hauteur NaN, il a aussi getMeasuredHeight()et getMeasuredWidth()de 0.

À un certain moment getMeasuredHeight()et getMeasuredWidth()(après la mise en page est aménagé je suppose) recevoir des valeurs utiles.

Comment puis - je obtenir les dimensions de quoi que ce soit? Comment puis - je regarder les changer ?? Quand est-ce .widthet .heighttoujours pas NaN??? Pourquoi ne puis - je faire un vol stationnaire de vue sur tout l'écran ????

Jusqu'à présent , je suis vote tous les 100ms et je me sens assez stupide. S'il vous plaît aider.

Créé 17/02/2016 à 16:01
source utilisateur
Dans d'autres langues...                            


7 réponses

voix
0

vous pouvez vous abonner à l' navigatedToévénement de la page, qui semble se produire après la vue a été aménagé. Il les getMeasuredHeight()et getMeasuredWidth()méthodes doivent retourner une valeur.

Dans le module complémentaire de fichier xml:

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

Dans le fichier ts ajouter la méthode de mise en correspondance:

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

et dans le lien de l' événement pageLoaded myViewà votre point de vue:

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

J'espère que cela t'aides.

Stefano

Créé 27/02/2016 à 13:06
source utilisateur

voix
2

Lorsque NS déclenche l'événement chargé d'une vue, il n'a pas été rendu à ce point encore. C'est la raison pour laquelle tous vos points de vue ont à l'intérieur 0 hauteur et largeur. Vous pouvez contourner en attendant un certain temps et que d'essayer d'obtenir les dimensions de la vue. Ajoutez ceci à votre fonction chargée:

var height = 0

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

checkIfViewRendered()

J'espère que cela t'aides.

Créé 20/05/2016 à 09:02
source utilisateur

voix
4

Utilisez l'importation correcte:

import platform = require("platform")

ou si vous utilisez

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

alors vous pouvez l'utiliser en fonction de votre langue comme ceci:

Manuscrit:

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

mainScreen implémente la ScreenMetrics interface permettant d' accéder aux différentes tailles d'écran.

JS:

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

REMARQUE: ces propriétés sont les dimensions de l'écran de l'appareil mobile.

Créé 06/08/2016 à 00:45
source utilisateur

voix
0

Comment puis-je regarder les changer ??

Vous pouvez configurer certaines variables lorsque l'appareil tourne aussi:

en 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);
    }

    ...
}
Créé 28/02/2017 à 21:47
source utilisateur

voix
1

vous pouvez essayer view.getActualSize().width/heightsur l' navigatedToévénement. uniquement sur cet événement , vous pouvez obtenir le réel height/widthd'unlayout/view

vous pouvez vous référer ici

Créé 30/01/2018 à 06:45
source utilisateur

voix
0

Vous pouvez utiliser layoutChangedEventpour répondre à la vue redimensionnée. Si votre point de vue est appelé view, quelque chose comme ce qui suit devrait faire l'affaire:

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
});
Créé 27/06/2018 à 18:01
source utilisateur

voix
0

Il est possible de surveiller l' layoutChangedévénement de View. Il est tiré à chaque fois que le processus de mise en page se fait incl. vue Redimensionner

myView.on("layoutChanged", function(){
    console.log("layout change");
});
Créé 08/07/2018 à 14:28
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more