There are many situations while developing mobile apps when you need to get the orientation of the device. For example, you need to show another layout in landscape mode or even lock the device orientation. If you’ve been keeping up with making apps using Ionic, you should know the Cordova Orientation Plugin.
To understand how to use orientation plugin, let’s create a real Ionic 3 example.
Getting started
To follow this tutorial you should have the basic fundamentals of the command line and Ionic. All the following was done using Ionic v.3.19.1 and Ionic DevApp.
1. Create a New Ionic 3 Application
Let’s create an Ionic example using the following command:
ionic start orientation-example blank
Go to your newly created project:
cd ./orientation-example
2. Install the Orientation plugin
To make manipulations with orientation in our example, we’re going to make use of the Apache Cordova plugin. It can be installed by executing the following commands:
$ ionic cordova plugin add cordova-plugin-screen-orientation
$ npm install --save @ionic-native/screen-orientation
After installation, we should set up this plugin into our app.
Our src/app.module.ts should look like this:
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
ScreenOrientation,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
3. Configure
Let’s start with getting the current orientation and showing it on default-generated.HomePage We just need to integrate Screen-Orientation plugin to HomePage and into a constructor.
Remember, that Screen-Orientation plugin is using native device functionality, so we need to be sure this platform is ready.
Our src/pages/home/home.ts should look like this:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
import { ScreenOrientation } from '@ionic-native/screen-orientation';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
orientation: string;
constructor(platform: Platform,
public navCtrl: NavController,
private screenOrientation: ScreenOrientation) {
platform.ready().then(() => {
this.orientation = this.screenOrientation.type;
}).catch(err=>{
console.log('Error while loading platform', err);
});
}
}
Our src/pages/home/home.html should look like this:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Orientation Example
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Orientation:</p>
<p>{{orientation}}</p>
</ion-content>
I tested this example directly on my iPhone using Ionic DevApp. I launched app using the ionic serve -c ommand terminal and opened it in Ionic DevApp. If all is ok, you should see the next:
After rotating phone the text will not changes because we not observing the value of the orientation. To listen to the changes, we should change src/pages/home/home.html in a next way:
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Platform} from 'ionic-angular';
import {ScreenOrientation} from '@ionic-native/screen-orientation';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
orientation: string;
constructor(platform: Platform,
public navCtrl: NavController,
private screenOrientation: ScreenOrientation) {
platform.ready().then(() => {
this.orientation = this.screenOrientation.type;
this.screenOrientation.onChange().subscribe(
() => {
this.orientation = this.screenOrientation.type;
}
);
}).catch(err => {
console.log('Error while loading platform', err);
});
}
}
After updating this code, you can rotate your phone and see the next:
Also, you can keep one orientation for all app or just one page. For example, let’s set only the landscape mode for HomePage. It means HomePage can be in landscape-primary and landscape-secondary modes. We can do it with the single line:
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
Edit src/pages/home/home.ts to reflect the following:
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Platform} from 'ionic-angular';
import {ScreenOrientation} from '@ionic-native/screen-orientation';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
orientation: string;
constructor(platform: Platform,
public navCtrl: NavController,
private screenOrientation: ScreenOrientation) {
platform.ready().then(() => {
this.orientation = this.screenOrientation.type;
this.screenOrientation.onChange().subscribe(
() => {
this.orientation = this.screenOrientation.type;
}
);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
}).catch(err => {
console.log('Error while loading platform', err);
});
}
}
Summary
As you can see, you can lock orientation or set specific orientation not only for the whole app but for a specific page. Also, you can configure orientation for your whole app in the Xcode.
If you have any questions, advice, feel free to leave them in the comments!
comments powered by Disqus