web-dev-qa-db-fra.com

Conversion de Storyboard d'iPhone en iPad

J'ai une application iPhone qui a un storyboard. Maintenant, je veux aussi fournir une application iPad. Je me suis donc demandé s'il existait une fonction qui m'aiderait à convertir mon storyboard iPhone en un storyboard iPad.

Pour être précis:

Y a-t-il une fonction similaire ou n'y a-t-il que la manière manuelle?

iphonexcodeipadstoryboard
214
dehlen

J'ai découvert une sorte de solution:

  1. Dupliquez votre iPhone-Storyboard et renommez-le MainStoryboard_iPad.storyboard

  2. Fermez Xcode puis ouvrez ce fichier n’importe quel éditeur de texte.

  3. Recherchez targetRuntime="iOS.CocoaTouch"et remplacez-le par targetRuntime="iOS.CocoaTouch.iPad"

  4. Modifiez le code dans MainStoryboard_iPad.storyboard à partir de: 

    <simulatedScreenMetrics key="destination" type="retina4"/> à

    <simulatedScreenMetrics key="destination"/>

  5. Maintenant, sauvegardez tout et rouvrez Xcode. Le iPad-Storyboard a le même contenu que le fichier iPhone, mais tout peut être dérangé.

Cela m'a permis d'économiser des heures - j'espère que cela vous aidera

533
tharkay

Si vous aviez créé un projet universel, un storyboard iPad vide aurait été créé par défaut. Assurez-vous de déplacer le point d'entrée du storyboard vide vers le storyboard récemment copié avant la compilation.

60
Malls

Cela n'a pas tout à fait fonctionné pour moi. J'ai fait quelque chose d'un peu différent.

  1. Créer un nouveau fichier de story board pour la version iPad
  2. Ouvrez le nouveau fichier et le fichier que je veux copier dans textwrangler (éditeur de texte)
  3. Copié le texte XML de l'ancien fichier dans le nouveau fichier entre ces balises XML
  4. Première balise <scenes> <!--Contents View Controller-->
  5. Coller ici
  6. Balises de fin </class> </classes>

Cela a fonctionné pour moi. J'ai eu une nouvelle mise en page avec tous mes points de vente connectés, ce qui m'a permis de gagner quelques heures. 

10
Nelson Brian
1. Create New Storyboard file with MainStoryboard_iPad.storyboard
2. Copy All the views from MainStoryboard and paste to MainStoryboard_iPad.storyboard
8
Kirit Vaghela

En lisant de nombreux threads sur stackoverflow, j’ai découvert la solution:

1.Dupliquez votre iPhone-Storyboard et renommez-le MainStoryboard_iPad.storyboard

2. Cliquez sur le storyboard -> «Ouvrir en tant que» -> «Code source». 

3.Recherchez targetRuntime = "iOS.CocoaTouch" et remplacez-le par targetRuntime = "iOS.CocoaTouch.iPad"

5.Recherchez <simulatedScreenMetrics key="destination" type="retina4"/> et remplacez-le par <simulatedScreenMetrics key="destination"/>

4.Enregistrez tout et faites un clic droit sur MainStoryboard_iPad.storyboard "open as" -> "IOS StoryBoard" 5. vous devrez peut-être également modifier vos contraintes ... C'est tout ce que vous avez fait.

8
Bharat

1 - Créez votre "MainStoryboard_iPad.storyboard";

2 - Cliquez avec le bouton droit de la souris sur "MainStoryboard_iPhone.storyboard" et "Ouvrir en tant que -> Code source". Copier tout

3- Faites un clic droit sur vous "MainStoryboard_iPad.storyboard" et "Ouvrir en tant que -> Code source". Coller tout. Maintenant Rechercher et changer:

  • targetRuntime="iOS.CocoaTouch" to targetRuntime="iOS.CocoaTouch.iPad"
  • type="com.Apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" to type="com.Apple.InterfaceBuilder3.CocoaTouch.Storyboard.iPad.XIB"

4 - Enregistrer. Maintenant rouvrez mais en utilisant le constructeur d'interface. Vous n'aurez qu'à réorganiser.

Cette méthode peut aussi être utilisée pour les fichiers .xib

6
Ricardo Anjos

Cela va dans l'autre sens, mais j'ai pu faire un tri sélectif dans mon storyboard iPad (~ 35 scènes) et le coller dans mon storyboard iPhone. Les tailles de scène ont été ajustées automatiquement. Je n'ai vu que deux problèmes, j'ai dû remplacer UISplitViewController (puisqu'il ne s'agit que d'iPad) et l'arrière-plan par défaut est devenu transparent au lieu de gris (je travaille toujours sur la correction correcte, sans définir manuellement l'arrière-plan).

EDIT: Il semble que l’arrière-plan par défaut de UITableView dans l’inspecteur Attributs soit plutôt étrange. Je devais définir manuellement l'arrière-plan sur "Couleur d'arrière-plan de la vue de groupe de groupe" pour les vues de table groupées et sur "Couleur blanche" pour les vues de table non groupées. Il était ensuite affiché comme "Par défaut" (je suppose car il correspondait alors à une valeur codée en dur). - En fait, même plus facile, passer de "Groupé" à "Statique" et inversement semble réinitialiser la couleur par défaut.

5
Symmetric

Voici quelque chose qui m'a permis d'économiser des heures et qui pourrait aider ceux d'entre vous qui maîtrisent le langage Python.

Je construis une application depuis deux mois, axée uniquement sur l'itération de l'expérience utilisateur avec l'équipe. 

Aujourd'hui concentré sur la construction de la version iPhone, j'ai suivi les étapes ci-dessus (merci!), Mais je ne voulais pas ensuite redimensionner tous les éléments de l'interface utilisateur dans les dimensions de l'iPad dans l'éditeur de storyboard visuel.

J'ai donc écrit ce petit script python pour analyser le fichier de scénarimage afin de déterminer les dimensions x, y, largeur, hauteur et de réduire le rapport de 320./768. Permettez-moi alors de me concentrer simplement sur des ajustements précis. 

  1. Copiez votre storyboard iPad dans un nouveau fichier. (par exemple, iPhoneStoryboard.storyboard)

  2. Exécutez le script ci-dessous avec le nom de fichier de scénario copié comme premier paramètre. 

  3. Générera un fichier de sortie avec le suffixe _adjusted.storyboard (par exemple, iPhoneStoryboard.storyboard_adjusted.storyboard)

J'espère que ça aide...

import re
import sys
import math

afile = sys.argv[1]

scale = 320./768.

number_pattern = '[-0-9]+(.[0-9]+)?'
#width_pattern = 'width="[-0-9]+( ?px)?"'
width_pattern = 'width="[-0-9]+(.[0-9]+)?( ?px)?"'
height_pattern = 'height="[-0-9]+(.[0-9]+)?( ?px)?"'
x_pattern = 'x="[-0-9]+(.[0-9]+)?( ?px)?"'
y_pattern = 'y="[-0-9]+(.[0-9]+)?( ?px)?"'


def replacescaledvalue(scale,pattern,sometext,replacefmt) :
    ip = re.search(pattern, sometext, re.IGNORECASE)
    if(ip) :
        np = re.search(number_pattern,ip.group(0))
        if(np) :
            val = float(np.group(0))
            val = int(math.floor(val*scale))
            sval = replacefmt+str(val)+'"'#+'px"'
            newtext = re.sub(pattern,sval,sometext)
            return newtext
    else :
        return sometext

fin = open(afile)
fout = open(afile+"_adjusted.storyboard", "wt")
for line in fin:
    newline = line
    newline = replacescaledvalue(scale,width_pattern,newline,'width="')
    newline = replacescaledvalue(scale,height_pattern,newline, 'height="')
    newline = replacescaledvalue(scale,x_pattern,newline, 'x="')
    newline = replacescaledvalue(scale,y_pattern,newline, 'y="')
#   print newline
    fout.write( newline )

fin.close()
fout.close()
4
Chris Robertson

Juste comme une note rapide à ceux qui pourraient avoir eu mon problème avec ceci:

Mon problème:

Le contenu du storyboard a été copié dans un nouveau fichier de tableau que j'ai ajouté. Cependant, cela ne modifierait pas mon iPad fourni. Remarquant que je devais basculer sur le storyboard désigné pour la cible de construction (voir image), laissez les modifications apparaître. 

Je posterais une image si j'avais les points, mais le réglage est situé dans: 

Navigateur de projet dans le menu source de gauche, cible générale du projet (volet central), informations de déploiement (deuxième en-tête), avec l'onglet du bouton iPad sélectionné.

A partir de là, choisissez votre storyboard sous "interface principale". 

Merci pour le post, j'espère que cette mention aide un problème quelque part. 

3
dgetzin

Accédez à votre résumé de cible et changez les périphériques en universal, Puis réglez la version de l'ipad sur le story-board de votre choix, y compris celui copié et renommé si vous le souhaitez.

3
AMAN77

Avec les classes de taille XCode6, il n’est plus nécessaire de convertir le storyboard en iPad. Le même Storyboard peut être utilisé à la fois pour l'iPhone et l'iPad, ce qui vous évite de conserver deux fichiers à jour.

Le storyboard résultant est compatible avec iOS7 +.

En savoir plus sur ce sujet ici: { https://developer.Apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html#//Apple_ref/doc/uid/TP40014436-CH6- SW1

Utilisez des classes de taille pour permettre à un fichier de storyboard ou xib de fonctionner avec toutes les tailles d'écran disponibles. Cela permet à l'interface utilisateur de votre application de fonctionner sur n'importe quel appareil iOS.

3
Ciprian Rarau

Juste pour le plaisir, sur XCode 5.1 et iOS 7.1, je devais également modifier les valeurs de "toolVersion" et "systemVersion" en ceci:

toolsVersion="5023" systemVersion="13A603"

Sans cela, le nouveau fichier de storyboard ne serait pas compilé

3
TooManyEduardos

Cette fonctionnalité est maintenant intégrée. Par exemple, si l’on modifie les paramètres du projet dans Deployment Info -> Devices from iPhone to Universal, la boîte de dialogue suivante s’affiche:

enter image description here

2
Freddie

J'ai suivi ce fil quand j'ai eu le même problème hier. Les pas que j'ai suivis 

  1. Pour Xcode 5.1, je devais effectuer un nettoyage du storyboard de l'iPhone, par exemple, des identifiants de réutilisation des cellules de tableau manquants, fournir un identifiant de storyboard pour chaque contrôleur et supprimer les scènes inutilisées. 
  2. Copiez MainStoryboard_iPhone.storyboard dans MainStoryboard_iPad.storyboard.
  3. Utilisation de l'éditeur vi - modifié targetRuntime="iOS.CocoaTouch" en targetRuntime="iOS.CocoaTouch.iPad" 
  4. Modifiez le code dans MainStoryboard_iPad.storyboard de: <simulatedScreenMetrics key="destination" type="retina4"/> à <simulatedScreenMetrics key="destination"/> 
  5. Ouvrez le projet dans Xcode.
  6. Changement des périphériques de déploiement en Universal - Choisissez l'option de ne PAS copier le Storyboard de l'iPhone.
  7. Xcode définira par défaut la cible de déploiement sur 7.1, s’occupant des fonctions obsolètes.
  8. Pour corriger l'erreur d'affichage mal placée dans iPad Storyboard - Modification de la disposition du cadre pour les contrôleurs générant des erreurs. 

C'était ça .. Merci à tous pour votre aide ..

2
Shaina Prakash

Pour Xcode10 

  1. Il suffit de dupliquer Main.storyboard 

  2. Puis renommez les fichiers en Main_iPad.storyboard et Main_iPone.storyboard 

  3. Définissez les noms appropriés dans .plist

 enter image description here

4.Il suffit de sélectionner le .storyboard approprié à configurer  enter image description here

2
Svitlana

Pour ce faire, le moyen le plus simple et le plus fiable consiste à copier-coller de votre storyboard iPad.

  1. Créez un nouveau story-board et nommez-le comme MainStoryboard_ipad.
  2. Faites de votre application une application universelle en définissant la propriété Périphériques sur Universel dans la page Résumé des propriétés cible de votre projet .enter image description here
  3. Ouvrez le storyboard de votre iPhone, sélectionnez tout et copiez-le.
  4. Ouvrez votre storyboard iPad et collez-le.

Vous devrez redimensionner, mais cela peut être plus rapide que de recréer le storyboard en entier.

1
mcohen75

Une approche différente

  1. Ajouter un contrôleur de vue vide avec un contrôleur de navigation dans le Storyboard iPad

  2. Changez la classe en classe de votre premier ViewController utilisé pour iPhone, "fooViewController"

  3. Ajoutez le Storyboard-Identifier dans le Storyboard iPhone "fooViewController_storyboard_identifier" pour le premier ViewController.

  4. Allez à "fooViewController.m" 

  5. Ajouter bool Variable bool nibWasLoadForIpad=false

  6. Aller à la méthode viewDidLoad-

if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad && !nibWasLoadForIpad)
{
    nibWasLoadForIpad=true;
    UIStoryboard* Storyboard_iphone=[UIStoryboard storyboardWithName:@"Main_iPhone" bundle: nil];
    fooViewController *controller = [Storyboard_iphone instantiateViewControllerWithIdentifier:@"fooViewController_storyboard_identifier"];
    [self.navigationController pushViewController:controller animated:YES];
    self.modalPresentationStyle = UIModalPresentationCurrentContext;
}

(ps. Le problème, c’est que le fond de la vue sera blanc)

1
David from Studio.201

Il existe une solution très simple pour les versions de Xcode qui prennent en charge les classes de taille (Testé dans Xcode 7, qui est la version actuelle au moment de la rédaction). Cochez la case à cocher "utiliser des classes de taille" d'un fichier de storyboard (Inspecteur de fichier), confirmez la boîte de dialogue qui apparaît. Décochez ensuite} cette même case à cocher - Xcode vous demandera si vous souhaitez utiliser ce scénarimage avec un iPhone ou un iPad et y convertir les écrans de manière appropriée. _ {Pas besoin de modifier directement le fichier de storyboard} _. Pour iPad et iPhone, copiez simplement le même scénario et configurez-en un pour iPad et un pour iPhone en utilisant la méthode décrite.

Et avant que quelqu'un suggère d'utiliser des classes de taille - bien qu'elles soient géniales, elles sont moins pratiques pour une interface utilisateur fortement personnalisée, telle que les jeux, etc.

1
GreatWiz

Vous devez créer un rapport de bogue avec Apple. Vous pouvez dire qu'il s'agit d'un duplicata du mien (10167030) ouvert depuis septembre 2011. Ce qui est frustrant de mon point de vue, c'est que la fonctionnalité existait dans Xcode 3 ...

0
Stephen Darlington

Merci pour les réponses tout le monde.

J'ai suivi les étapes ci-dessus, mais lorsque j'ai exécuté l'application sous le simulateur ou sur mon iPad, elle n'a cessé d'utiliser que le storyboard de l'iPhone.

Pour une raison quelconque, lorsque j'ai remplacé le périphérique cible par Universal au lieu d'un iPhone, Xcode (v5.0) n'a pas mis à jour le fichier app-Info.plist afin d'inclure le storyboard iPad. J'ai donc dû ajouter manuellement l'entrée suivante ( en utilisant l'éditeur de plist dans Xcode):

Nom de base du fichier du storyboard principal (iPad) ==> MainStoryboard_iPad

0
Pete

Je viens de changer (en plus de la réponse de @tharkay):

 <device id="ipad9_7" orientation="landscape">

et fonctionne très bien! 

J'utilise ceci dans XCode 8.3.3

0
Beto