Conversion du storyboard d'iPhone en iPad


218

J'ai une iPhoneapplication qui a un storyboard. Maintenant, je veux également fournir une iPadapplication. J'ai donc demandé s'il y avait une fonction qui m'aide à convertir mon iPhonestoryboard en iPadstoryboard.

Pour être précis:

Existe-t-il une fonction similaire ou existe-t-il uniquement de manière manuelle?


5
oh merci je ne savais pas que je devais les marquer, j'ai marqué une réponse maintenant comme la bonne. J'ai également fait cela dans mes anciens fils, merci.
dehlen

1
Une information détaillée avec les étapes et les images trouvées ici à datacalculation.blogspot.in/2014/09/…
Test iOS

Réponses:


535

J'ai trouvé une sorte de solution:

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

  2. Fermez Xcode, puis ouvrez ce fichier dans n'importe quel éditeur de texte.

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

  4. Changez le code dans le MainStoryboard_iPad.storyboard de:

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

    <simulatedScreenMetrics key="destination"/>

  5. Maintenant, enregistrez tout et rouvrez Xcode. L'iPad-Storyboard a le même contenu que le fichier iPhone, mais tout pourrait être perturbé.

Cela m'a fait gagner des heures - j'espère que cela vous aidera


20
+1 Si je le pouvais, je vous donnerais +100 de ma propre réputation. Des conseils géniaux! La seule chose que je ne pouvais pas faire était d'ouvrir le storyboard avec Dashcode, j'ai donc utilisé TextWrangler (mais je pense que n'importe quel éditeur de texte le ferait). Merci!
Piotr Justyna

45
Bon conseil, merci. Pendant que vous y êtes, vous pouvez également vouloir changer toute la largeur = "320" en largeur = "768", hauteur = "480" en hauteur = "1024", etc ... directement à partir d'ici. Comme c'est beaucoup plus simple que de le faire élément par élément dans IB.
Ben G

63
n'utilisez pas Dashcode, ni textWrangler, à l'intérieur de xCode simplement: faites un clic droit sur le storyboard -> "ouvrir en tant que" -> "Code source" une fois terminé, faites la même chose sauf utilisez "Interface Builder - IOS StoryBoard"
hokkuk

16
@PiotrJustyna vous pouvez le faire. Appuyez start a bountysous la question, sélectionnez la quantité souhaitée et Reward existing answer...
Filip Radelic

33
pour obtenir le format iPad, modifiez également le code dans le MainStoryboard_iPad.storyboard de: <simulatedScreenMetrics key="destination" type="retina4"/>à<simulatedScreenMetrics key="destination"/>
Marcus Schwab

61

Si vous aviez créé un projet universel, par défaut un storyboard iPad vide aurait été créé, il vous suffit de sélectionner le storyboard iPhone tout sélectionner (Commande + A), de copier (Commande + C) et de le coller sur le storyboard iPad. Assurez-vous de déplacer le point d'entrée du storyboard vide vers le storyboard nouvellement copié avant la compilation.


9
Meilleure réponse, solution facile et vous permet de modifier l'interface facilement par la suite contrairement à la réponse du haut. :)
Matt Reid

qu'en est-il de la mise en page?
tryKuldeepTanwar

10

Cela n'a pas vraiment 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. Premier tag <scenes> <!--Contents View Controller-->
  5. Coller ici
  6. Balises de fin </class> </classes>

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


1
+1 les autres n'ont pas fonctionné pour moi et cela fait que tout fonctionne comme prévu
Shereef Marzouk

4
Vous pouvez le faire depuis Xcode. Cliquez avec le bouton droit / contrôle sur les .storyboardfichiers et cliquez Open As > Source Codepour afficher le XML brut.
Matt Kantor

8

En lisant de nombreux threads sur stackoverflow, j'ai découvert que la solution est-

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

2. cliquez avec le bouton droit sur le storyboard -> «ouvrir en tant que» -> «Code source».

3.Recherchez targetRuntime = "iOS.CocoaTouch" et changez-le en targetRuntime = "iOS.CocoaTouch.iPad"

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

4.Maintenant, enregistrez tout et faites un clic droit sur MainStoryboard_iPad.storyboard «Ouvrir en tant que» -> «IOS StoryBoard» 5. Vous devrez peut-être également modifier vos contraintes. C'est tout ce que vous avez fait.


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

8

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

2 - Faites un clic droit sur vous "MainStoryboard_iPhone.storyboard" et "Ouvrir en tant que -> Code source". Copiez tout;

3- Faites un clic droit sur vous "MainStoryboard_iPad.storyboard"et "Ouvrir en tant que -> Code source". Collez tout. Maintenant, recherchez et modifiez:

  • 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 générateur d'interface. Vous n'aurez qu'à réorganiser.

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


1
C'est la meilleure façon de procéder. car toutes les vues et tous les composants seront redimensionnés au format ipad.
Ben

1
Il n'est pas nécessaire de modifier type = "com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" dans la dernière version d'ios7.
super9

5

Cela va dans l'autre sens, mais j'ai pu faire tout sélectionner et copier dans mon storyboard iPad (~ 35 scènes) et le coller dans mon storyboard iPhone. Les tailles de scène ont été automatiquement ajustées. Je n'ai vu que deux problèmes, j'ai dû remplacer UISplitViewController (car ce n'est que l'iPad), et l'arrière-plan par défaut est devenu transparent au lieu de gris (toujours en train de corriger cela correctement, sans définir manuellement l'arrière-plan pour tout).

EDIT: Il semble que l'arrière-plan par défaut pour UITableView dans l'inspecteur des attributs soit plutôt étrange. J'ai dû définir manuellement l'arrière-plan sur «Group Table View Background Color» pour les vues de table groupées et «White Color» pour les vues de table non groupées. Il a ensuite été affiché comme "par défaut" (je suppose qu'il correspondait alors à une valeur codée en dur). - En fait, encore plus facile, le passage de "Groupé" à "Statique" et inversement semble réinitialiser la couleur par défaut.


4

Voici quelque chose qui m'a fait gagner des heures et pourrait aider ceux d'entre vous ayant des compétences en Python.

Je construis une application depuis deux mois, axée uniquement sur l'iPad en itérant l'UX avec l'équipe.

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

J'ai donc écrit ce petit script de gabarit en python pour parcourir le fichier de storyboard pour x, y, largeur, hauteur et tout réduire par le rapport 320./768. Me permet alors de me concentrer uniquement sur les réglages fins.

  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 du storyboard 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()

1
Salut Chrish, je suis nouveau dans le phython. donc je ne peux pas comprendre le code pour changer le storyboard de l'iphone en iPad. alors pouvez-vous m'aider s'il vous plait. Mon storyboard ipad se convertit en storyboard iphone sans aucun problème. mais je dois convertir mon storyboard iphone en iPad. Donc, là où le besoin de modifications est nécessaire dans le script ci-dessus ou vous pouvez partager le script qui convertit l'iphone en iPad. Merci d'avance.
Shubham

@Chris Robertson Chris, si je voulais utiliser ce script pour la conversion de l'iPhone en iPad, changerais-je l '"échelle = 320./768". à 'échelle = 768./320.'?
Charles Robertson,

3

Accédez à votre Résumé cible et changez les appareils en universels, puis descendez et définissez la version de l'ipad sur n'importe quel storyboard que vous aimez, y compris un copié et renommé si vous le souhaitez.


3

Juste une petite note pour ceux qui ont peut-être eu mon problème avec ceci:

Mon problème:

Le contenu du storyboard a bien été copié dans un nouveau fichier de forum que j'ai ajouté. Cependant, cela n'apporterait pas de modifications à mon iPad provisionné. Remarquant que je devais basculer sur le storyboard désigné pour la cible de construction (voir image) laisser les changements apparaître.

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

Navigateur de projet dans le menu source de gauche, cible racine de l'onglet général du projet (volet central), (deuxième sous-titre) infos de déploiement, avec l'onglet du bouton iPad sélectionné.

De là, choisissez votre storyboard sous "interface principale".

Merci pour le message, j'espère que cette mention aidera quelque part.


3

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

toolsVersion="5023" systemVersion="13A603"

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


3

En utilisant les classes de taille XCode6, vous n'avez plus besoin de convertir le storyboard en iPad. Le même Storyboard peut être utilisé pour l'iPhone et l'iPad, vous évitant de garder deux fichiers à jour.

Le storyboard résultant est compatible avec iOS7 +.

En savoir plus à 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 storyboard ou à un fichier 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

Pour Xcode10

  1. Il suffit de dupliquer Main.storyboard

  2. Renommez ensuite les fichiers Main_iPad.storyboardetMain_iPone.storyboard

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

entrez la description de l'image ici

4.Juste sélectionnez le .storyboard approprié à configurer entrez la description de l'image ici


2

Cette fonctionnalité est désormais 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 apparaîtra:

entrez la description de l'image ici


3
C'est peut-être un bogue dans Xcode, mais je n'ai jamais eu ce travail. Le storyboard iPad résultant n'est pas ajouté au projet, et il ne semble pas qu'il ait été créé.
s73v3r

2

J'ai suivi ce fil quand j'ai été touché par le même problème hier. Les étapes que j'ai suivies

  1. Pour Xcode 5.1, j'ai dû faire un peu de nettoyage du storyboard iPhone comme la réutilisation des identifiants manquants des cellules du tableau, fournir un ID de storyboard pour chaque contrôleur, 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" partargetRuntime="iOS.CocoaTouch.iPad"
  4. Changez le code dans le 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 iPhone.
  7. Xcode définira par défaut la cible de déploiement sur 7.1, s'est occupé des fonctions obsolètes.
  8. Pour corriger l'erreur d'affichage mal placée dans Storyboard iPad - Modification de la disposition du cadre pour les contrôleurs donnant des erreurs.

C'était tout .. Merci à tous pour votre aide ..


1

Le moyen le plus simple et le plus fiable de le faire est de copier-coller à partir de votre storyboard iPad.

  1. Créez un nouveau storyboard et nommez-le quelque chose comme MainStoryboard_ipad.
  2. Faites de votre application une application universelle en définissant la propriété Devices sur Universal sur la page Résumé des propriétés cible de votre projet. entrez la description de l'image ici
  3. Ouvrez votre storyboard iPhone et sélectionnez tout et copiez
  4. Ouvrez votre storyboard iPad et collez.

Vous devrez procéder au redimensionnement, mais cela peut être plus rapide que de recréer tout le storyboard.


1

Il existe une solution très simple pour les versions 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 "Utiliser les classes de taille" sur un fichier de storyboard ( inspecteur de fichiers ), confirmez cette boîte de dialogue qui apparaît. Décochez ensuite cette même case - Xcode vous demandera si vous souhaitez utiliser ce storyboard avec un iPhone ou un iPad, et convertira les écrans en conséquence. Pas besoin de modifier directement le fichier de storyboard . Pour iPad et iPhone, copiez simplement le même storyboard et configurez-en un pour iPad et un pour iPhone en utilisant la méthode décrite.

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


1

Une approche différente

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

  2. Remplacez la classe par la 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 dans "fooViewController.m"

  5. Ajouter bool Variable bool nibWasLoadForIpad=false

  6. Allez à viewDidLoad-Méthode

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 est que les arrière-plans de la vue seront définis en blanc)



0

Merci pour les réponses à tous.

J'ai suivi les étapes ci-dessus mais lorsque j'ai exécuté l'application sous le simulateur ou mon iPad, elle a continué à utiliser le storyboard iPhone.

Pour une raison quelconque, lorsque j'ai changé l'appareil cible pour qu'il soit universel au lieu d'iPhone, Xcode (v5.0) n'a pas mis à jour le fichier app-Info.plist pour inclure le storyboard iPad, j'ai donc dû ajouter manuellement l'entrée suivante ( en utilisant l'éditeur plist dans Xcode):

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


0

Je change juste (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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.