Como restringir o aplicativo ao modo retrato apenas no iônico para todas as plataformas?

121

Estou trabalhando no Ionic / Cordova, adicionei isso, androidManifest.xmlmas isso não funcionou para mim e o aplicativo ainda está sendo exibido nos dois sentidos

android:screenOrientation="portrait"

Como posso restringir meu aplicativo apenas ao modo retrato? Eu verifiquei no android e ele não funciona

Muhammad Faizan Khan
fonte
é trabalhar para iônica ??, coz seu trabalho para iônica 2
Manish Kumar

Respostas:

315

Se você deseja restringir ao modo retrato apenas em todos os dispositivos, adicione esta linha ao config.xml na pasta raiz do projeto.

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

Depois disso, reconstrua a plataforma digitando o texto abaixo na linha de comando:

ionic build
Vadiem Janssens
fonte
2
bom ver. trabalhou para mim. verificado no android. obrigado Vadiem
Muhammad Faizan Khan
1
como você restringe apenas uma tela específica?
User3607282
1
Eu não testei isso sozinho, mas você pode obter o resultado desejado com este tutorial: gajotres.net/…
Vadiem Janssens
4
Isso só parece funcionar quando você o executa em um dispositivo real. Se você executá-lo no aplicativo em nuvem Ionic View, ele não terá efeito.
#
1
Ok para Ionic 4.
Pierrick Martellière
36

Ionic v2 + Atualização

Para as versões 2 e posteriores do Ionic, você também precisará instalar o pacote nativo Ionic correspondente para qualquer plug-in usado, incluindo plug cordova-plugin-- phonegap-plugin-ins e plug - ins.

  1. Instale o plugin nativo iônico

    Instale o módulo TypeScript do Ionic Native para o plug-in da CLI .

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

    * Observe que o --savecomando é opcional e pode ser omitido se você não deseja adicionar o plugin ao seu package.jsonarquivo

  2. Importar ScreenOrientationPlug-in

    Importe o plug-in para o seu controller, mais detalhes disponíveis na documentação .

    import { ScreenOrientation } from '@ionic-native/screen-orientation';
    
    @Component({
        templateUrl: 'app.html',
        providers: [
            ScreenOrientation
        ]
    })
    
    constructor(private screenOrientation: ScreenOrientation) {
      // Your code here...
    }
    
  3. Faça sua coisa

    Bloqueie e desbloqueie a orientação da tela programaticamente.

    // Set orientation to portrait
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
    
    // Disable orientation lock
    this.screenOrientation.unlock();
    
  4. Pontos bônus

    Você também pode obter a orientação atual.

    // Get current orientation
    console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"
    
Tyler
fonte
1
NOTA: você precisa de "@ ionic-native / core": "^ 3.6.1", porque a versão mais baixa causa erro: forum.ionicframework.com/t/…
Luckylooke
Tente adicionar ScreenOrientation à lista de provedores
Tyler
3
ionic pluginnão parece mais funcionar. Eu acho que é agora ionic cordova plugin. Como emionic cordova plugin add --save cordova-plugin-screen-orientation
Rockin4Life33
2
adicionar <preference name="Orientation" value="portrait" />parece ser o suficiente para mim #
1511
2
O DevApp está apenas executando seu aplicativo como uma visualização da web no aplicativo DevApp, portanto, alguns recursos nativos não funcionam. Tente compilar e executar seu aplicativo diretamente no dispositivo e ele deve funcionar.
Tyler
13

De acordo com https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferences ,

A orientação permite bloquear a orientação e impedir que a interface gire em resposta a alterações na orientação. Os valores possíveis são padrão, paisagem ou retrato. Exemplo:

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

Esteja ciente de que esses valores diferenciam maiúsculas de minúsculas, é "Orientação", não "orientação".

Michael Zhou
fonte
1
Quando você rola para cima no link fornecido, ele declara o seguinte: "A tag <preference> define várias opções como pares de atributos de nome / valor. O nome de cada preferência não diferencia maiúsculas de minúsculas . [...]."
Vadiem Janssens 29/04
2
"orientação" funciona para mim. "Orientação" me dá uma tela branca ao executar o aplicativo no dispositivo real.
CMA
2
"orientação" funciona para mim com o Ionic 2 em um dispositivo Android.
kamayd
6

Se você deseja fazer algo em sua orientação, significa que deseja executar qualquer ação ao alterar a orientação do aplicativo. É necessário usar o plug-in da estrutura iônica ... https://ionicframework.com/docs/native/screen-orientation/

Se você deseja restringir seu aplicativo apenas aos modos retrato ou paisagem, basta adicionar a seguinte linha no seu config.xml

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

Primeiro, você precisa adicionar o Plug-in Cordova Screen Orientation usando

cordova plugin add cordova-plugin-screen-orientation

e depois adicione screen.lockOrientation('portrait');ao .run()método

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

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

});
})
Ahmed Bouchefra
fonte
2

Dentro da sua angular, app.jsadicione a linha screen.lockOrientation('portrait');como mostrado abaixo:

a

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

Você também terá outro código na .runfunção, mas o que você está interessado é a linha que escrevi. Não adicionei a linha <preference name="orientation" value="portrait" />no meu código, mas pode ser necessário adicionar ocordova-plugin-device-orientation

Vlasis Perdikidis
fonte
2

Por favor, adicione android:screenOrientation="portrait"o androidManifest.xmlarquivo como um atributo da tag de atividade para android.

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

No config.xml, adicione a seguinte linha

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

Você pode tentar o seguinte: -

Plug-in Cordova para definir / bloquear a orientação da tela de uma maneira comum para iOS, Android, WP8 e Blackberry 10. Esse plug-in é baseado em uma versão anterior da API de orientação da tela, para que a API não corresponda atualmente às especificações atuais.

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

ou tente este código em xml config: -

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