ionic(cordova)にて screen-orientationプラグイン を使って画面ごとに回転時の表示を切り替える
はじめに
今回やりたかったことは
端末を回転したときに画面Aでは縦固定、画面Bでは縦横どちらにも対応みたいなこと。
プロジェクトを作成
$ ionic start sample tabs
今回は複数画面必要だったのでtabsを使った。
$ ionic plugin add https://github.com/apache/cordova-plugin-screen-orientation.git
config.xmlを編集
<platform name="ios"> <preference name="Orientation" value="all" /> </platform>
デフォルトではiPhoneで縦固定なようなので縦横対応する形に修正。
実装
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { ・・・ // ★ここを追加 基本的には縦固定 screen.orientation.lock('portrait'); } }) .config(function($stateProvider, $urlRouterProvider) { ・・・ .state('tab', { url: '/tab', abstract: true, controller: 'TabCtrl', // ★ここを追加 templateUrl: 'templates/tabs.html' }) ・・・
controller.js
angular.module('starter.controllers', []) .controller('TabCtrl', function($scope, $rootScope) { $rootScope.$on("$stateChangeStart", function(event, toState) { // 縦横両対応にしたい画面ではロックを解除 if (toState.name == "tab.chat-detail") { screen.orientation.unlock(); } else { screen.orientation.lock('portrait'); } }); })
とりあえずこれでやりたいことはできた。以上です。