Friday, 16 March 2018

How to Implement Screen Orientation in Ionic 2 and Ionic 3

Some Mobile applications does not look attractive when in landscape mode and some in portrait mode. To overcome this, its best to lock the app to single orientation. Do you want to lock your app in portrait or landscape mode! then How to do it in ionic ?. This post explaing on how to implement Screen Orientation in ionic.


This post assumes that you already have the ionic project created and running.
we will first look at how to lock a particular page in the ionic application.

Create a screenorientation page.

Execute below command in your projects command prompt to add screenorientation page to your project "pages" folder in "src" directory.

ionic generate page screenorientation. 
the above code will generate screenorientation folder in your project's src/pages folder.
Note : import the screenorientation page in to your app module and add it to the declarations and entryComponents, if your cli does not create an "screenorientation.module.ts" file in your new page file (ie in screenorientation folder). the "app.module.ts" should look something like this after socialsharing page is imported.

Modify app.module.ts file

app.module.ts


         import { BrowserModule } from '@angular/platform-browser';
        import { ErrorHandler, NgModule } from '@angular/core';
        import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

        import { MyApp } from './app.component';
        import { HomePage } from '../pages/home/home';
        import { ListPage } from '../pages/list/list';
        import { ScreenorientationPage } from '../pages/screenorientation/screenorientation';

        import { StatusBar } from '@ionic-native/status-bar';
        import { SplashScreen } from '@ionic-native/splash-screen';

        @NgModule({
        declarations: [
            MyApp,
            HomePage,
            ListPage,
            ScreenorientationPage
        ],
        imports: [
            BrowserModule,
            IonicModule.forRoot(MyApp)

        ],
        bootstrap: [IonicApp],
        entryComponents: [
            MyApp,
            HomePage,
            ListPage,
            ScreenorientationPage
        ],
        providers: [
            StatusBar,
            SplashScreen,
            {provide: ErrorHandler, useClass: IonicErrorHandler},

        ]
        })
        export class AppModule {}


That's it for the app.module.ts part. Now lets see how to lock the orientation of our app.
We will be using Screen Orientation plugin that's available as part of Ionic Native.
To install the plugin execute the below commands in your command prompt:
ionic cordova plugin add cordova-plugin-screen-orientation

npm install --save @ionic-native/screen-orientation
Now, import the installed plugin into your component, and also inject into your components constructor. Modify your components screenorientation.ts file as shown below.

     import { ScreenOrientation } from '@ionic-native/screen-orientation';

     constructor(...,private screenOrientation: ScreenOrientation) { ... }


Next, for the functionality part.
Copy and Paste the below given code to your components ionViewDidLoad function in ts file ie in this example screenorientation.ts.


      // check for current orientation

      console.log(this.screenOrientation.type);

      // set orientation to landscape

      this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);

      // allow user rotate of app

      this.screenOrientation.unlock();

      // checks for orientation changes

      this.screenOrientation.onChange().subscribe(
        () => {
            console.log("Orientation Changed");
        }
      );


Above Code Explanation

As the comments says, the screenOrientation.type checks if the orientation is in portrait or landscape. this is particularly help full when you want to check for orientation.
next, screenOrientation.lock method lock's screen orientation either in landscape or portrait mode. it takes either screenOrientation.ORIENTATIONS.LANDSCAPE or screenOrientation.ORIENTATIONS.PORTRAIT as input.
The screenOrientation.unlock method unlockes the screen orientation. it does not need any input.

The screenOrientation.onChange method checks for orientation changes on device.

Lock orientation for the whole app

To lock the orientation for the whole app, we should modify app.component.ts as shown below.

app.component.ts



  import { ScreenOrientation } from '@ionic-native/screen-orientation';
  ...
  constructor(...,private screenOrientation: ScreenOrientation) {
  ...
  }

  initializeApp() {

    this.platform.ready().then(() => {

      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      this.statusBar.styleDefault();
      this.splashScreen.hide();

      // locks the orientation in portratit mode
      this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
    });

   }


this will lock the screen orientation to portrait mode, when the platform.ready() method executes.
that's it for this post, please leave a comment if you have any queries regarding the post.

1 comment:

  1. Very nice content provided by the blogger. Really helpful for all the people who want to make this creativity as their career.
    Also check out our posters, logos, desings and photo editings on our portal.

    ReplyDelete