web-dev-qa-db-fra.com

Comment restreindre l'application au mode portrait uniquement dans ionic pour toutes les plateformes?

Je travaille sur Ionic/Cordova, j'ai ajouté ceci à androidManifest.xml mais cela n'a pas fonctionné pour moi et l'application est toujours affichée dans les deux sens

Android:screenOrientation="portrait"

Comment puis-je limiter mon application au mode portrait uniquement? J'ai vérifié sur Android et cela ne fonctionne pas

ionic-framework
98
Muhammad Faizan Khan

Si vous souhaitez limiter le mode portrait à tous les périphériques, vous devez ajouter cette ligne au fichier config.xml du dossier racine de vos projets.

<preference name="orientation" value="portrait" />

Après cela, reconstruisez la plate-forme en tapant le texte ci-dessous dans la ligne de commande:

ionic build
274
Vadiem Janssens

Ionic v2 + mise à jour

Pour les versions 2 et ultérieures d'Ionic, vous devrez également installer le package Ionic Native correspondant à tout plugin que vous utilisez, y compris les plugins cordova-plugin- et phonegap-plugin-.

  1. Installer Ionic Native Plugin

    Installez le module TypeScript d’Ionic Native pour le plug-in à partir de CLI .

    $ ionic cordova plugin add --save cordova-plugin-screen-orientation
$ npm install --save @ionic-native/screen-orientation

    * Notez que la commande --save est facultative et peut être omise si vous ne souhaitez pas ajouter le plug-in à votre fichier package.json.

  2. Import ScreenOrientation Plugin

    Importer le plugin dans votre controller, plus de détails disponibles dans la documentation .

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

@Component({
    templateUrl: 'app.html',
    providers: [
        ScreenOrientation
    ]
})

constructor(private screenOrientation: ScreenOrientation) {
  // Your code here...
}

  3. Faire votre truc

    Verrouiller et déverrouiller l'orientation de l'écran par programme.

    // Set orientation to portrait
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);

// Disable orientation lock
this.screenOrientation.unlock();

  4. Points bonus

    Vous pouvez également obtenir l'orientation actuelle.

    // Get current orientation
console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
30
makinbacon

Selon https://cordova.Apache.org/docs/fr/4.0.0/config_ref/#global-preferences , 

L'orientation vous permet de verrouiller l'orientation et d'empêcher l'interface de pivoter en réponse aux changements d'orientation. Les valeurs possibles sont default, landscape ou portrait. Exemple:

<preference name="Orientation" value="landscape" />

Sachez que ces valeurs sont sensibles à la casse, il s’agit de "Orientation", pas "orientation".

9
Michael Zhou

Tout d’abord, vous devez ajouter le Cordova Screen Orientation Plugin using

cordova plugin add cordova-plugin-screen-orientation

puis ajoutez screen.lockOrientation('portrait'); à la méthode .run()

angular.module('myApp', [])
.run(function($ionicPlatform) {

    screen.lockOrientation('portrait');
    console.log('Orientation is ' + screen.orientation);

});
})
4
Ahmed Bouchefra

Si vous voulez faire quelque chose sur votre orientation signifie que vous voulez effectuer n'importe quelle action lorsque vous changez l'orientation de votre application, vous devez utiliser le plugin ionic framework ... https://ionicframework.com/docs/native/screen -orientation/

Si vous souhaitez simplement limiter votre application au mode portrait ou paysage, vous devez simplement ajouter ces lignes dans votre fichier config.xml.

<preference name="orientation" value="portrait" />
                 OR
<preference name="orientation" value="landscape" />
3
Vivek Singh

Dans votre app.js angulaire, ajoutez la ligne screen.lockOrientation('portrait'); comme ci-dessous:

un

angular.module('app', ['ionic'])
.run(function($ionicPlatform) {
    // LOCK ORIENTATION TO PORTRAIT.
    screen.lockOrientation('portrait');
  });
})

Vous aurez également un autre code dans la fonction .run, mais celle qui vous intéresse est la ligne que j'ai écrite… .. Je n'ai pas ajouté la ligne <preference name="orientation" value="portrait" /> dans mon code, mais vous devrez peut-être ajouter le cordova-plugin-device-orientation

1
Vlasis Perdikidis

Dans config.xml, ajoutez la ligne suivante

<preference name="orientation" value="portrait" />
1
Omkar Porje

Vous pouvez essayer ceci: -

Cordova plugin pour définir/verrouiller l'orientation de l'écran de manière commune pour iOS, Android, WP8 et Blackberry 10. Ce plugin est basé sur une version antérieure de l'API Screen Orientation, de sorte que l'API ne correspond pas aux spécifications actuelles. 

https://github.com/Apache/cordova-plugin-screen-orientation

ou essayez ce code dans la configuration XML: -

<preference name="orientation" value="portrait" />
0
Bal mukund kumar

Veuillez ajouter Android:screenOrientation="portrait" dans le fichier androidManifest.xml en tant qu'attribut de balise d'activité pour Android.

<activity
        Android:name="com.example.demo_spinner.MainActivity"
        Android:label="@string/app_name"
        Android:screenOrientation="portrait" >
</activity>
0
AyushKatiyar