Conversione di Storyboard da iPhone a iPad


218

Ho iPhoneun'applicazione che ha uno storyboard. Ora voglio fornire iPadanche un'applicazione. Quindi mi sono chiesto se esiste una funzione che mi aiuta a convertire il mio iPhonestoryboard in uno iPadstoryboard.

Essere specifici:

Esiste una funzione simile o esiste solo il modo manuale?


5
oh grazie non sapevo che dovevo contrassegnarli, ho contrassegnato una risposta ora come quella corretta. L'ho fatto anche nei miei vecchi thread, grazie.
Dehlen,

1
Informazioni dettagliate con passaggi e immagini disponibili qui su datacalculation.blogspot.in/2014/09/…
Test iOS

Risposte:


535

Ho scoperto una specie di soluzione:

  1. Duplica il tuo iPhone-Storyboard e rinominalo MainStoryboard_iPad.storyboard

  2. Chiudi Xcode e quindi apri questo file qualsiasi editor di testo.

  3. Cerca targetRuntime="iOS.CocoaTouch"e modificalo intargetRuntime="iOS.CocoaTouch.iPad"

  4. Modifica il codice in MainStoryboard_iPad.storyboard da:

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

    <simulatedScreenMetrics key="destination"/>

  5. Ora salva tutto e riapri Xcode. L'iPad-Storyboard ha gli stessi contenuti del file iPhone ma tutto potrebbe non essere confuso.

Questo mi ha risparmiato ore - spero che questo ti possa aiutare


20
+1 Se potessi, ti darei +100 dalla mia reputazione. Un consiglio geniale! L'unica cosa che non potevo fare era aprire lo storyboard con Dashcode, quindi ho usato TextWrangler (ma penso che qualsiasi editor di testo farebbe). Grazie!
Piotr Justyna,

45
Un buon consiglio, grazie. Mentre ci sei, potresti anche voler cambiare tutta la larghezza = "320" in larghezza = "768", altezza = "480" in altezza = "1024", ecc ... direttamente da qui. Poiché è molto più semplice che farlo elemento per elemento in IB.
Ben G,

63
non usare Dashcode, né textWrangler, semplicemente all'interno di xCode: fai clic con il pulsante destro del mouse sullo storyboard -> "apri come" -> "Codice sorgente" una volta fatto, fai la stessa cosa tranne usa "Interface Builder - IOS StoryBoard"
hokkuk

16
@PiotrJustyna puoi farlo. Premi start a bountysotto la domanda, seleziona la quantità desiderata e Reward existing answer...
Filip Radelic,

33
per ottenere il formato iPad, modifica anche il codice nel MainStoryboard_iPad.storyboard da: <simulatedScreenMetrics key="destination" type="retina4"/>a<simulatedScreenMetrics key="destination"/>
Marcus Schwab

61

Se avessi creato un progetto universale, per impostazione predefinita sarebbe stato creato uno storyboard vuoto per iPad, devi solo selezionare lo storyboard per iPhone selezionare tutto (Comando + A), copia (Comando + C) e incollalo sullo storyboard per iPad. Assicurati di spostare il punto di ingresso dallo storyboard vuoto allo storyboard appena copiato prima di compilare.


9
Migliore risposta, soluzione semplice e consente di modificare l'interfaccia in seguito facilmente, diversamente dalla risposta migliore. :)
Matt Reid,

per quanto riguarda il layout?
TryKuldeepTanwar,

10

Non ha funzionato del tutto per me. Ho fatto qualcosa di leggermente diverso.

  1. Crea un nuovo file storyboard per la versione per iPad
  2. Apri sia il nuovo file che il file che voglio copiare in textwrangler (editor di testo)
  3. Copiato il testo XML dal vecchio file nel nuovo file tra questi tag XML
  4. Primo tag <scenes> <!--Contents View Controller-->
  5. Incolla qui
  6. Tag di fine </class> </classes>

Questo ha funzionato per me. Ho ottenuto un nuovo layoutout con tutti i miei punti vendita collegati, il che da solo mi ha salvato alcune ore.


1
+1 gli altri non hanno funzionato per me e questo fa funzionare tutto come previsto
Shereef Marzouk

4
Puoi farlo da Xcode. Basta fare clic con il tasto destro / controllo sui .storyboardfile e fare clic Open As > Source Codeper visualizzare il codice XML non elaborato.
Matt Kantor,

8

Dalla lettura di molti thread su StackOverflow ho scoperto che la soluzione è-

1.Duplica il tuo iPhone-Storyboard e rinominalo MainStoryboard_iPad.storyboard

2. fai clic con il pulsante destro del mouse sullo storyboard -> "apri come" -> "Codice sorgente".

3. Cerca targetRuntime = "iOS.CocoaTouch" e modificalo in targetRuntime = "iOS.CocoaTouch.iPad"

5.Cerca <simulatedScreenMetrics key="destination" type="retina4"/>e modificalo in<simulatedScreenMetrics key="destination"/>

4. Ora salva tutto e fai clic con il tasto destro su MainStoryboard_iPad.storyboard “apri come” -> "IOS StoryBoard" 5. potresti anche dover modificare i tuoi vincoli. Questo è tutto quello che hai fatto.


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 - Crea il tuo "MainStoryboard_iPad.storyboard";

2 - Fai clic destro su di te "MainStoryboard_iPhone.storyboard"e "Apri come -> Codice sorgente". Copia tutto;

3- Fai clic destro su di te "MainStoryboard_iPad.storyboard"e "Apri come -> Codice sorgente". Incolla tutto. Ora cerca e cambia:

  • 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 - Salva. Ora riaprire ma utilizzando l'interfaccia builder. Dovrai solo riorganizzare.

Questo metodo può essere utilizzato anche per i file .xib


1
Questo è il modo migliore per farlo. perché tutte le viste e i componenti verranno ridimensionati nel formato ipad.
Ben

1
Non è necessario cambiare type = "com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" nell'ultima versione di ios7.
super9

5

Questo sta andando dall'altra parte, ma sono stato in grado di fare un tutto selezionare e copiare nello storyboard del mio iPad (~ 35 scene) e incollarlo nello storyboard del mio iPhone. Le dimensioni della scena sono state regolate automaticamente. Ho visto solo due problemi, ho dovuto sostituire UISplitViewController (dal momento che è solo iPad) e lo sfondo predefinito è diventato trasparente anziché grigio (ancora lavorando per risolverlo correttamente, senza impostare manualmente lo sfondo per tutto).

EDIT: Sembra che lo sfondo predefinito per UITableView nella finestra di ispezione Attributi sia piuttosto strano. Ho dovuto impostare manualmente lo sfondo su "Raggruppa colore di sfondo vista tabella" per le viste di tabella raggruppate e "Colore bianco" per le viste di tabella non raggruppate. È stato quindi visualizzato come "Predefinito" (presumo poiché corrispondeva a un valore codificato). - In realtà, ancora più semplice, il passaggio da "Raggruppato" a "Statico" e viceversa sembra ripristinare il colore predefinito.


4

Ecco qualcosa che mi ha risparmiato ore e potrebbe aiutare quelli di voi con le abilità di Python.

Ho creato un'app negli ultimi due mesi, concentrandomi solo sull'iPad che esegue l'iter della UX con il team.

Oggi concentrato sulla creazione della versione per iPhone, ho seguito i passaggi sopra (grazie!), Ma non volevo quindi ridimensionare tutti gli elementi dell'interfaccia utente dalle dimensioni di iPad nell'editor di storyboard visivo.

Così ho scritto questo piccolo script jig in pitone per scansionare il file dello storyboard per x, y, larghezza, altezza e ridimensionare tutto in base al rapporto 320./768. Mi ha permesso quindi di concentrarmi solo sulle regolazioni fini.

  1. Copia lo storyboard del tuo iPad in un nuovo file. (ad es. iPhoneStoryboard.storyboard)

  2. Esegui lo script seguente con il nome file dello storyboard copiato come primo parametro.

  3. Genera file di output con suffisso _adjusted.storyboard (ad es. IPhoneStoryboard.storyboard_adjusted.storyboard)

Spero che sia d'aiuto...

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
Ciao Chrish, sono nuovo nel phython. quindi non riesco a capire il codice per cambiare lo storyboard per iPhone in iPad. quindi puoi aiutarmi per favore su questo. Il mio storyboard per iPad si sta convertendo in storyboard per iPhone senza problemi. ma devo convertire lo storyboard del mio iPhone in iPad. Quindi, dove è necessario modificare le modifiche nello script sopra o è possibile condividere lo script che converte iPhone in iPad. Grazie in anticipo.
Shubham,

@Chris Robertson Chris, se volessi usare questo script per la conversione da iPhone a iPad, cambierei "scale = 320./768". a "scale = 768./320."?
Charles Robertson,

3

Vai al Riepilogo target e modifica i dispositivi in ​​universali, quindi scorri verso il basso e imposta la versione di iPad su qualsiasi storyboard che ti piace, incluso uno copiato e rinominato se lo desideri.


3

Proprio come una veloce nota a chi potrebbe aver avuto il mio problema con questo:

Il mio problema:

Il contenuto dello storyboard è stato copiato piacevolmente in un nuovo file della lavagna che ho aggiunto. Tuttavia, non avrebbe apportato modifiche al mio iPad con provisioning. Notare che dovevo passare dallo storyboard designato per il target di costruzione (vedi immagine) mi consente di mostrare le modifiche.

Pubblicherei un'immagine se avessi i punti, ma l'impostazione si trova in:

Navigatore del progetto nel menu di origine sul lato sinistro, destinazione principale della scheda generale del progetto (riquadro centrale), informazioni sulla distribuzione (secondo sottotitolo), con la scheda del pulsante iPad selezionata.

Da lì, scegli lo storyboard sotto "interfaccia principale".

Grazie per il post, spero che questa menzione aiuti in qualche modo.


3

Solo per divertimento, su XCode 5.1 e iOS 7.1 avevo anche bisogno di cambiare i valori di "toolVersion" e "systemVersion" in questo modo:

toolsVersion="5023" systemVersion="13A603"

Senza questo, il nuovo file dello storyboard non verrebbe compilato


3

Utilizzando le classi di dimensioni XCode6 non è più necessario convertire lo storyboard in iPad. Lo stesso Storyboard può essere utilizzato sia per iPhone che per iPad, evitando di mantenere aggiornati due file.

Lo storyboard risultante è compatibile con iOS7 +.

Maggiori informazioni qui: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH6-SW1

Usa le classi di dimensioni per abilitare uno storyboard o un file xib a lavorare con tutte le dimensioni dello schermo disponibili. Ciò consente all'interfaccia utente dell'app di funzionare su qualsiasi dispositivo iOS.


3

Per Xcode10

  1. Basta duplicare Main.storyboard

  2. Quindi rinominare i file in Main_iPad.storyboardeMain_iPone.storyboard

  3. Impostare i nomi appropriati in .plist

inserisci qui la descrizione dell'immagine

4. Basta selezionare il .storyboard corretto da configurare inserisci qui la descrizione dell'immagine


2

Questa funzionalità è ora integrata. Ad esempio, se si modificano le impostazioni del progetto in Informazioni sulla distribuzione -> Dispositivi da iPhone a Universal, verrà visualizzata la seguente finestra di dialogo:

inserisci qui la descrizione dell'immagine


3
Potrebbe essere un bug in Xcode, ma non ho mai avuto questo lavoro. Lo storyboard dell'iPad risultante non viene aggiunto al progetto e non sembra che sia stato creato.
s73v3r,

2

Ho seguito questa discussione quando sono stato colpito con lo stesso problema ieri. I passi che ho seguito

  1. Per Xcode 5.1, ho dovuto fare un po 'di pulizia dello storyboard per iPhone come riutilizzare gli identificatori delle celle della tabella, fornire l'ID dello storyboard per ogni controller, rimuovere le scene inutilizzate.
  2. Copia MainStoryboard_iPhone.storyboard in MainStoryboard_iPad.storyboard.
  3. Utilizzando l'editor vi - modificato targetRuntime="iOS.CocoaTouch"intargetRuntime="iOS.CocoaTouch.iPad"
  4. Modificare il codice in MainStoryboard_iPad.storyboard da: <simulatedScreenMetrics key="destination" type="retina4"/>a<simulatedScreenMetrics key="destination"/>
  5. Apri il progetto in Xcode.
  6. Modificati i dispositivi di distribuzione su Universali: scegli l'opzione NON copiare lo storyboard per iPhone.
  7. Xcode imposterà il Deployment Target su 7.1, occupandosi delle funzioni deprecate.
  8. Per correggere l'errore di visualizzazione fuori posto nello Storyboard di iPad - Modificato il layout della cornice per i controller che generavano errori.

Tutto qui .. Grazie a tutti per il vostro aiuto ..


1

Il modo più semplice e affidabile per farlo è copiare la copia dallo storyboard per iPad.

  1. Crea un nuovo storyboard e chiamalo come MainStoryboard_ipad.
  2. Rendi la tua app un'app universale impostando la proprietà Devices su Universal nella pagina Riepilogo delle proprietà Target per il tuo progetto. inserisci qui la descrizione dell'immagine
  3. Apri lo storyboard del tuo iPhone e seleziona tutto e copia
  4. Apri lo storyboard del tuo iPad e incollalo.

Devi ridimensionare, ma può essere più veloce che ricreare l'intero storyboard.


1

Esiste una soluzione davvero semplice per le versioni di Xcode che supportano le classi di dimensioni (testato in Xcode 7 che è la versione corrente al momento della scrittura). Seleziona la casella di controllo "usa classi di dimensioni" su un file storyboard ( File Inspector ), conferma quella finestra di dialogo che appare. Quindi deseleziona la stessa casella di controllo: Xcode ti chiederà se desideri utilizzare questo storyboard con un iPhone o iPad e convertire gli schermi in modo appropriato. Non è necessario modificare direttamente il file dello storyboard . Per iPad e iPhone, basta copiare lo stesso storyboard e configurarne uno per iPad e uno per iPhone utilizzando il metodo descritto.

E prima che qualcuno suggerisca di utilizzare le classi di dimensioni - benché grandi, sono meno convenienti per l'interfaccia utente fortemente personalizzata, come giochi ecc


1

Un approccio diverso

  1. Aggiungi un controller di visualizzazione vuoto con controller di navigazione nell'iPad-Storyboard

  2. Cambia la Classe nella Classe del tuo primo ViewController utilizzato per iPhone, "fooViewController"

  3. Aggiungi l'identificatore storyboard nello storyboard iPhone "fooViewController_storyboard_identifier" per il primo ViewController

  4. Vai a "fooViewController.m"

  5. Aggiungi bool Bool variabile nibWasLoadForIpad=false

  6. Vai a viewDidLoad-Metodo

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. Conoscere il problema è che gli sfondi della vista saranno impostati su bianco)



0

Grazie per le risposte a tutti.

Ho seguito i passaggi precedenti ma quando ho eseguito l'app sotto il simulatore o il mio iPad ha continuato a utilizzare solo lo storyboard dell'iPhone.

Per qualche motivo, quando ho cambiato il dispositivo di destinazione in Universale anziché iPhone, Xcode (v5.0) non ha aggiornato il file app-Info.plist per includere lo storyboard di iPad, quindi ho dovuto aggiungere manualmente la seguente voce ( usando l'editor plist in Xcode):

Nome base file storyboard principale (iPad) ==> MainStoryboard_iPad


0

Cambio solo (in aggiunta alla risposta di @tharkay):

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

e funziona alla grande!

Lo uso in XCode 8.3.3

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.