Konvertieren des Storyboards vom iPhone zum iPad


218

Ich habe eine iPhoneAnwendung, die ein Storyboard hat. Jetzt möchte ich auch eine iPadAnwendung bereitstellen . Also fragte ich mich, ob es eine Funktion gibt, mit der ich mein iPhoneStoryboard in ein iPadStoryboard konvertieren kann .

Um genau zu sein:

Gibt es eine ähnliche Funktion oder gibt es nur den manuellen Weg?


5
Oh, danke, ich wusste nicht, dass ich sie markieren musste. Ich habe jetzt eine Antwort als die richtige markiert. Ich habe das auch in meinen alten Threads gemacht, danke.
Dehlen

1
Eine detaillierte Info mit Schritten und Bildern finden Sie hier unter datacalculation.blogspot.in/2014/09/…
iOS Test

Antworten:


535

Ich habe eine Art Lösung gefunden:

  1. Dupliziere dein iPhone-Storyboard und benenne es um MainStoryboard_iPad.storyboard

  2. Schließen Sie Xcode und öffnen Sie diese Datei in einem beliebigen Texteditor.

  3. Suchen Sie nach targetRuntime="iOS.CocoaTouch"und ändern Sie es intargetRuntime="iOS.CocoaTouch.iPad"

  4. Ändern Sie den Code im MainStoryboard_iPad.storyboard von:

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

    <simulatedScreenMetrics key="destination"/>

  5. Speichern Sie nun alles und öffnen Sie Xcode erneut. Das iPad-Storyboard hat den gleichen Inhalt wie die iPhone-Datei, aber alles könnte durcheinander geraten.

Das hat mir Stunden gespart - hoffentlich hilft dir das


20
+1 Wenn ich könnte, würde ich dir +100 von meinem eigenen Ruf geben. Genialer Rat! Das einzige, was ich nicht tun konnte, war das Storyboard mit Dashcode zu öffnen, also habe ich TextWrangler verwendet (aber ich denke, jeder Texteditor würde das tun). Vielen Dank!
Piotr Justyna

45
Guter Rat, danke. Wenn Sie schon dabei sind, möchten Sie wahrscheinlich auch die gesamte Breite = "320" in Breite = "768", Höhe = "480" in Höhe = "1024" usw. direkt von hier aus ändern. Da es viel einfacher ist, als es Element für Element in IB zu tun.
Ben G

63
Verwenden Sie weder Dashcode noch textWrangler in xCode einfach: Klicken Sie mit der rechten Maustaste auf das Storyboard -> "Öffnen als" -> "Quellcode", wenn Sie fertig sind. Machen Sie dasselbe, außer "Interface Builder - IOS StoryBoard"
hokkuk

16
@PiotrJustyna das kannst du machen. Drücken Sie start a bountyunter der Frage, wählen Sie den gewünschten Betrag und Reward existing answer...
Filip Radelic

33
Um das iPad-Format zu erhalten, ändern Sie auch den Code im MainStoryboard_iPad.storyboard von: <simulatedScreenMetrics key="destination" type="retina4"/>nach<simulatedScreenMetrics key="destination"/>
Marcus Schwab

61

Wenn Sie ein universelles Projekt erstellt hätten, wäre standardmäßig ein leeres iPad-Storyboard erstellt worden. Sie müssen lediglich das iPhone-Storyboard auswählen, alle auswählen (Befehl + A), kopieren (Befehl + C) und es in das iPad-Storyboard einfügen. Stellen Sie sicher, dass Sie den Einstiegspunkt vom leeren Storyboard in das neu kopierte Storyboard verschieben, bevor Sie kompilieren.


9
Beste Antwort, einfache Lösung und ermöglicht es Ihnen, die Benutzeroberfläche im Gegensatz zur Top-Antwort anschließend einfach zu ändern. :)
Matt Reid

Was ist mit dem Layout?
TryKuldeepTanwar

10

Das hat bei mir nicht ganz funktioniert. Ich habe etwas anderes gemacht.

  1. Erstellen Sie eine neue Storyboard-Datei für die iPad-Version
  2. Öffnen Sie sowohl die neue Datei als auch die Datei, die ich kopieren möchte, in textwrangler (Texteditor).
  3. Kopierte den XML-Text aus der alten Datei in die neue Datei zwischen diesen XML-Tags
  4. Erster Tag <scenes> <!--Contents View Controller-->
  5. Hier einfügen
  6. Tags beenden </class> </classes>

Das hat bei mir funktioniert. Ich habe ein neues Layoutout mit allen angeschlossenen Steckdosen erhalten, was mir allein ein paar Stunden erspart hat.


1
+1 die anderen haben nicht für mich gearbeitet und das lässt alles wie erwartet
funktionieren

4
Sie können dies in Xcode tun. Klicken Sie mit der rechten Maustaste auf die .storyboardDateien und klicken Sie Open As > Source Code, um das unformatierte XML anzuzeigen.
Matt Kantor

8

Beim Lesen vieler Threads zum Stackoverflow stellte ich fest, dass die Lösung Folgendes ist:

1.Duplizieren Sie Ihr iPhone-Storyboard und benennen Sie es in MainStoryboard_iPad.storyboard um

2. Klicken Sie mit der rechten Maustaste auf das Storyboard -> "Öffnen als" -> "Quellcode".

3.Suchen Sie nach targetRuntime = "iOS.CocoaTouch" und ändern Sie es in targetRuntime = "iOS.CocoaTouch.iPad".

5.Suchen Sie nach <simulatedScreenMetrics key="destination" type="retina4"/>und ändern Sie es in<simulatedScreenMetrics key="destination"/>

4. Speichern Sie jetzt alles und klicken Sie mit der rechten Maustaste auf MainStoryboard_iPad.storyboard "Öffnen als" -> "IOS StoryBoard". 5. Möglicherweise müssen Sie auch Ihre Einschränkungen ändern. Das ist alles was du getan hast.


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 - Erstellen Sie Ihre "MainStoryboard_iPad.storyboard";

2 - Klicken Sie mit der rechten Maustaste auf Sie "MainStoryboard_iPhone.storyboard"und "Öffnen als -> Quellcode". Kopiere alles;

3- Klicken Sie mit der rechten Maustaste auf Sie "MainStoryboard_iPad.storyboard"und "Öffnen als -> Quellcode". Alles einfügen. Jetzt suchen und ändern:

  • 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 - Speichern. Jetzt wieder öffnen, aber mit dem Interface Builder. Sie müssen nur neu arrangieren.

Diese Methode kann auch für .xib-Dateien verwendet werden


1
Dies ist der beste Weg, dies zu tun. weil alle Ansichten und Komponenten auf das iPad-Format angepasst werden.
Ben

1
In der neuesten Version von ios7 muss type = "com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" nicht geändert werden.
Super9

5

Dies geht in die andere Richtung, aber ich konnte in meinem iPad-Storyboard (~ 35 Szenen) alles auswählen und kopieren und in mein iPhone-Storyboard einfügen. Die Szenengrößen wurden automatisch angepasst. Ich habe nur zwei Probleme gesehen, ich musste UISplitViewController ersetzen (da es nur das iPad ist), und der Standardhintergrund wurde transparent statt grau (ich arbeite immer noch daran, dies richtig zu beheben, ohne den Hintergrund für alles manuell festzulegen).

BEARBEITEN: Der Standardhintergrund für UITableView im Attributinspektor scheint ziemlich seltsam zu sein. Ich musste den Hintergrund manuell auf "Hintergrundfarbe der Gruppentabellenansicht" für gruppierte Tabellenansichten und "Weiße Farbe" für nicht gruppierte Tabellenansichten einstellen. Es wurde dann als "Standard" angezeigt (ich nehme an, da es dann mit einem fest codierten Wert übereinstimmte). - Noch einfacher, der Wechsel von "Gruppiert" zu "Statisch" und zurück scheint die Standardfarbe zurückzusetzen.


4

Hier ist etwas, das mir Stunden gespart hat und denen von Ihnen mit Python-Kenntnissen helfen könnte.

Ich habe in den letzten zwei Monaten eine App erstellt, die sich darauf konzentriert, nur das iPad zu verwenden und die UX mit dem Team zu wiederholen.

Heute konzentrierte ich mich auf den Aufbau der iPhone-Version und befolgte die obigen Schritte (danke!), Aber ich wollte dann nicht die Größe aller UI-Elemente aus den iPad-Dimensionen im visuellen Storyboard-Editor ändern müssen.

Also habe ich dieses kleine Python-Jig-Skript geschrieben, um die Storyboard-Datei nach x, y, Breite, Höhe zu durchsuchen und alles um das Verhältnis 320./768 zu verkleinern. Erlaubte mir dann, mich nur auf Feineinstellungen zu konzentrieren.

  1. Kopieren Sie Ihr iPad-Storyboard in eine neue Datei. (zB iPhoneStoryboard.storyboard)

  2. Führen Sie das folgende Skript mit dem kopierten Storyboard-Dateinamen als erstem Parameter aus.

  3. Generiert eine Ausgabedatei mit dem Suffix _adjusted.storyboard (z. B. iPhoneStoryboard.storyboard_adjusted.storyboard).

Ich hoffe es hilft...

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
Hallo Chrish, ich bin neu in der Phython. Daher kann ich den Code zum Ändern des iPhone-Storyboards in ein iPad nicht verstehen. Kannst du mir bitte dabei helfen? Mein iPad-Storyboard wird ohne Probleme in ein iPhone-Storyboard konvertiert. Aber ich muss mein iPhone Storyboard auf das iPad konvertieren. Wo also die erforderlichen Änderungen im obigen Skript erforderlich sind oder Sie das Skript freigeben können, das das iPhone in das iPad konvertiert. Danke im Voraus.
Shubham

@ Chris Robertson Chris, wenn ich dieses Skript für die Konvertierung von iPhone zu iPad verwenden möchte, würde ich die 'scale = 320./768' ändern. auf 'scale = 768./320.'?
Charles Robertson

3

Gehen Sie zu Ihrer Zielübersicht und ändern Sie die Geräte in Universal. Stellen Sie dann die iPad-Version auf ein beliebiges Storyboard ein, einschließlich eines kopierten und umbenannten, wenn Sie möchten.


3

Nur als kurze Nachricht an diejenigen, die vielleicht mein Problem damit hatten:

Mein Problem:

Der Storyboard-Inhalt wurde gut in eine neue Board-Datei kopiert, die ich hinzugefügt habe. Es würde jedoch keine Änderungen an meinem bereitgestellten iPad vornehmen. Als ich bemerkte, dass ich das festgelegte Storyboard für das Build-Ziel umschalten musste (siehe Bild), wurden die Änderungen angezeigt.

Ich würde ein Bild posten, wenn ich die Punkte hätte, aber die Einstellung befindet sich in:

Projektnavigator auf der linken Seite Quellmenü, Stammziel der allgemeinen Registerkarte Projekt (mittlerer Bereich), Bereitstellungsinformationen (zweite Unterüberschrift), wobei die Registerkarte iPad-Schaltfläche ausgewählt ist.

Wählen Sie von dort aus Ihr Storyboard unter "Hauptoberfläche".

Vielen Dank für den Beitrag, ich hoffe, diese Erwähnung hilft einem Haken irgendwo.


3

Nur zum Spaß musste ich unter XCode 5.1 und iOS 7.1 auch die Werte von "toolVersion" und "systemVersion" folgendermaßen ändern:

toolsVersion="5023" systemVersion="13A603"

Ohne dies würde die neue Storyboard-Datei nicht kompiliert werden


3

Mit den XCode6-Größenklassen müssen Sie das Storyboard nicht mehr in ein iPad konvertieren. Das gleiche Storyboard kann sowohl für das iPhone als auch für das iPad verwendet werden, sodass Sie nicht zwei Dateien auf dem neuesten Stand halten müssen.

Das resultierende Storyboard ist mit iOS7 + kompatibel.

Lesen Sie hier mehr darüber: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH6-SW1

Verwenden Sie Größenklassen, damit ein Storyboard oder eine XIB-Datei mit allen verfügbaren Bildschirmgrößen arbeiten kann. Dadurch kann die Benutzeroberfläche Ihrer App auf jedem iOS-Gerät verwendet werden.


3

Für Xcode10

  1. Einfach duplizieren Main.storyboard

  2. Benennen Sie dann die Dateien in Main_iPad.storyboardund umMain_iPone.storyboard

  3. Stellen Sie die entsprechenden Namen ein .plist

Geben Sie hier die Bildbeschreibung ein

4.Wählen Sie einfach das richtige .storyboard aus, das konfiguriert werden soll Geben Sie hier die Bildbeschreibung ein


2

Diese Funktionalität ist jetzt integriert. Wenn Sie beispielsweise die Projekteinstellungen unter Bereitstellungsinformationen -> Geräte vom iPhone auf Universal ändern, wird der folgende Dialog angezeigt:

Geben Sie hier die Bildbeschreibung ein


3
Es mag ein Fehler in Xcode sein, aber ich habe diese Arbeit noch nie gehabt. Das resultierende iPad-Storyboard wird dem Projekt nicht hinzugefügt und scheint nicht erstellt zu sein.
s73v3r

2

Ich bin diesem Thread gefolgt, als ich gestern von demselben Problem betroffen war. Die Schritte, denen ich folgte

  1. Für Xcode 5.1 musste ich das iPhone-Storyboard bereinigen, z. B. fehlende Wiederverwendung. Identifizierer von Tabellenzellen, Storyboard-ID für jeden Controller angeben, nicht verwendete Szenen entfernen.
  2. Kopieren Sie MainStoryboard_iPhone.storyboard nach MainStoryboard_iPad.storyboard.
  3. Verwenden des vi-Editors - geändert targetRuntime="iOS.CocoaTouch"intargetRuntime="iOS.CocoaTouch.iPad"
  4. Ändern Sie den Code im MainStoryboard_iPad.storyboard von: <simulatedScreenMetrics key="destination" type="retina4"/>nach<simulatedScreenMetrics key="destination"/>
  5. Öffnen Sie das Projekt in Xcode.
  6. Die Bereitstellungsgeräte wurden in Universal geändert. Wählen Sie die Option, das iPhone Storyboard NICHT zu kopieren.
  7. Xcode setzt das Bereitstellungsziel standardmäßig auf 7.1 und kümmert sich um die veralteten Funktionen.
  8. So beheben Sie den falsch platzierten Ansichtsfehler im iPad Storyboard - Das Rahmenlayout für Controller wurde geändert und es wurden Fehler angezeigt.

Das war es .. Vielen Dank für Ihre Hilfe ..


1

Der einfachste und zuverlässigste Weg, dies zu tun, ist das Kopieren und Einfügen von Ihrem iPad-Storyboard.

  1. Erstellen Sie ein neues Storyboard und nennen Sie es MainStoryboard_ipad.
  2. Machen Sie Ihre App zu einer Universal-App, indem Sie auf der Seite "Zusammenfassung" der Zieleigenschaften für Ihr Projekt die Eigenschaft "Geräte" auf "Universal" setzen. Geben Sie hier die Bildbeschreibung ein
  3. Öffnen Sie Ihr iPhone-Storyboard, wählen Sie alle aus und kopieren Sie sie
  4. Öffnen Sie Ihr iPad-Storyboard und fügen Sie es ein.

Sie müssen die Größe ändern, aber es kann schneller sein, als das gesamte Storyboard neu zu erstellen.


1

Es gibt eine wirklich einfache Lösung für Xcode-Versionen, die Größenklassen unterstützen (Getestet in Xcode 7, der aktuellen Version zum Zeitpunkt des Schreibens). Aktivieren Sie das Kontrollkästchen "Größenklassen verwenden" in einer Storyboard-Datei ( Dateiinspektor ) und bestätigen Sie das angezeigte Dialogfeld. Deaktivieren Sie dann dasselbe Kontrollkästchen - Xcode fragt Sie, ob Sie dieses Storyboard mit einem iPhone oder iPad verwenden möchten, und konvertieren Sie die darin enthaltenen Bildschirme entsprechend. Die Storyboard-Datei muss nicht direkt bearbeitet werden . Kopieren Sie für iPad und iPhone einfach dasselbe Storyboard und konfigurieren Sie eines für iPad und eines für iPhone mit der beschriebenen Methode.

Und bevor jemand vorschlägt, Größenklassen zu verwenden - obwohl großartig, sind sie für stark angepasste Benutzeroberflächen wie Spiele usw. Weniger geeignet


1

Ein anderer Versuch

  1. Fügen Sie einen leeren View-Controller mit Navigation-Controller im iPad-Storyboard hinzu

  2. Ändern Sie die Klasse in die Klasse Ihres ersten ViewControllers für das iPhone, "fooViewController".

  3. Fügen Sie den Storyboard-Identifier im iPhone-Storyboard "fooViewController_storyboard_identifier" für den ersten ViewController hinzu

  4. Gehen Sie zu "fooViewController.m"

  5. Bool hinzufügen Variable bool nibWasLoadForIpad=false

  6. Gehen Sie zu viewDidLoad-Methode

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. Wissen Problem ist, dass die Ansichtshintergründe auf weiß gesetzt werden)


0

Sie sollten einen Fehlerbericht mit Apple erstellen . Man kann sagen, es ist ein Duplikat von mir (10167030), das seit September 2011 geöffnet ist. Das Frustrierende aus meiner Sicht ist, dass die Funktion in Xcode 3 vorhanden war ...


0

Vielen Dank für die Antworten an alle.

Ich habe die obigen Schritte ausgeführt, aber als ich die App unter dem Simulator oder meinem iPad ausgeführt habe, wurde sie weiterhin nur mit dem iPhone-Storyboard verwendet.

Aus irgendeinem Grund hat Xcode (v5.0) die Datei app-Info.plist nicht aktualisiert, um das iPad-Storyboard einzuschließen, als ich das Zielgerät in Universal anstelle von iPhone geändert habe. Daher musste ich den folgenden Eintrag manuell hinzufügen ( Verwenden des Plist-Editors in Xcode):

Name der Haupt-Storyboard-Dateibasis (iPad) ==> MainStoryboard_iPad


0

Ich ändere mich nur (zusätzlich zu der Antwort von @tharkay):

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

und funktioniert super!

Ich benutze dies in XCode 8.3.3

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.