How to adjust the content of a layout depending on screen orientation using nativescript


#1

Using nativescript-orientation plugin

Problem:
It fetches the orientation only by calling (getorientation) so how can we understand that when i need to call getorientation method.

Is there a way by which it can detect change in screen orientation[working for entire app] and can reflect the changes on GUI instantly without waiting for getOrientation call.

I


#2

by adding OrientationChangedEventDatafrom Module in main.ts

I can see the orientation change is detected everytime the device changes

app.on(app.orientationChangedEvent, (args: OrientationChangedEventData) => {
    console.log("orientation change");
    console.log(args.eventName);
    console.log(args.newValue);
    let newwidth = screen.mainScreen.widthDIPs,
    newheight = screen.mainScreen.heightDIPs;
    if (isIOS) {
        newwidth = screen.mainScreen.heightDIPs;
        newheight = screen.mainScreen.widthDIPs;
    }
    console.log(newwidth);
    console.log(newheight);
}) ;

But how can i change the orientation of stackLayout horizontal to vertical for all pages depending on change in screen orientation…do i need to capture the event change in each page…how to achieve it…

please suggest


#3

nativescript-orientation plugin is the key which you already knew. orientation for stacklayout can be a attribute of CSS class.


#4

As suggested ,added orientation attribute in StackLayout but no change

Css Class

.portrait :host StackLayout {
orientation: vertical ;
background-color: red ;
}
.landscape :host StackLayout {
  orientation: horizontal ;
  background-color: green ;
  }

html file

 <GridLayout row="1" rows="*,*" columns="*,*" class="form">
        
                <StackLayout  >
                    <TextField  (textChange)="textChangeM($event)" autocorrect="false" autocapitalization="true" backgroundcolor="#ffffff"
                        width="99%" height="100%" hint="First Name" class="input"></TextField>
                        <TextField f (textChange)="textChangeM($event)" autocorrect="false" autocapitalization="true" backgroundcolor="#ffffff"
                        width="99%" height="100%" hint="Last Name" class="input"></TextField>
                      </StackLayout>
            </GridLayout>

#5

I think in ts file …i need to capture the orientation change event…something like this

 onOrientationChange(args: application.OrientationChangedEventData) {
        console.log("********************************" + args.newValue + "*****************************");
        this.invalidate(args.newValue);
    }

    invalidate(orientation: string) {
        if (this.page) {
            if (orientation === DeviceOrientation.portrait) {

}

how to set stacklayout orientation in ts file because i don’t see any property called orientation


#6

It works just fine, make sure you added all the dependent plugins.