CODEWITHSUNDEEP
ioscordova
Michael Evans
Michael Evans

Reputation: 1021

iOS custom orientation configuration

I'm looking for a way to specify two different orientations for my iOS app in Cordova. One set of orientations is for iPad and the other for iPhone. They should be as follows: iPhone - only portrait (regular and upside down), iPad - all 4 orientations.

Up to now, I have used the config.xml

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

which generates in the [APP_NAME]-Info.plist file the following:

<key>UIInterfaceOrientation</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationPortraitUpsideDown</string>
  <string>UIInterfaceOrientationLandscapeLeft</string> <!-- remove this -->
  <string>UIInterfaceOrientationLandscapeRight</string> <!-- and remove this -->
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationPortraitUpsideDown</string>
  <string>UIInterfaceOrientationLandscapeLeft</string>
  <string>UIInterfaceOrientationLandscapeRight</string>
</array>

I then just remove the lines as commented above to give me what I want on build time. Of course, I would prefer a solution that didn't require attention before releasing.

So far I have tried digging through the Cordova docs, but the only mention of something like this is in the config-file section of the plugin.xml entry, but since this isn't a plugin-specific configuration, I can't see how that would be correct (i.e. which plugin.xml would this belong to?)

If possible, I would prefer just to do this with configuration.

Edit

From @jcaron's comment I tried to add config-file elements directly into config.xml as follows:

<platform name="ios">
  <config-file target="*-Info.plist" parent="UISupportedInterfaceOrientations">
    <array>
      <string>UIInterfaceOrientationPortrait</string>
      <string>UIInterfaceOrientationPortraitUpsideDown</string>
    </array>
  </config-file>
</platform>

as well as

<config-file target="*-Info.plist" parent="UISupportedInterfaceOrientations">
  <array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
  </array>
</config-file>

Neither of these worked. I also tried to vary the path, by prepending APP_NAME/, ios/APP_NAME and platforms/ios/APP_NAME in both the above case, but without success.

Upvotes: 2

Views: 2191

Answers (1)

DaveAlden
DaveAlden

Reputation: 30366

You can use the cordova-custom-config plugin to apply the changes on the after_prepare hook, which ensures they are not overwritten by the Cordova defaults (as @jcesarmobile points out in the comment above).

Add the plugin to your project:

cordova plugin add cordova-custom-config

Define the custom config file blocks in your config.xml:

<platform name="ios">
    <custom-config-file platform="ios" target="*-Info.plist" parent="UISupportedInterfaceOrientations" mode="replace">
       <array>
           <string>UIInterfaceOrientationPortrait</string>
           <string>UIInterfaceOrientationPortraitUpsideDown</string>
       </array>
    </custom-config-file>
    <custom-config-file platform="ios" target="*-Info.plist" parent="UISupportedInterfaceOrientations~ipad" mode="replace">
       <array>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationPortraitUpsideDown</string>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
       </array>
    </custom-config-file>
</platform>

Upvotes: 2

Related Questions