Convertir Storyboard de iPhone a iPad


218

Tengo una iPhoneaplicación que tiene un guión gráfico. Ahora quiero proporcionar una iPadaplicación también. Entonces, me pregunté si hay una función que me ayude a convertir mi iPhoneguión gráfico en un iPadguión gráfico.

Ser especifico:

¿Existe una función similar o solo existe la forma manual?


55
oh, gracias, no sabía que tenía que marcarlos, marqué una respuesta ahora como la correcta. También hice esto en mis viejos hilos, gracias.
dehlen

1
Una información detallada con los pasos e imágenes que se encuentran aquí en datacalculation.blogspot.in/2014/09/…
Prueba de iOS

Respuestas:


535

Encontré un tipo de solución:

  1. Duplica tu Storyboard de iPhone y renómbralo MainStoryboard_iPad.storyboard

  2. Cierre Xcode y luego abra este archivo con cualquier editor de texto.

  3. Busque targetRuntime="iOS.CocoaTouch"y cámbielo atargetRuntime="iOS.CocoaTouch.iPad"

  4. Cambie el código en MainStoryboard_iPad.storyboard de:

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

    <simulatedScreenMetrics key="destination"/>

  5. Ahora guarde todo y vuelva a abrir Xcode. El iPad-Storyboard tiene el mismo contenido que el archivo de iPhone, pero todo podría desorganizarse.

Esto me salvó horas, espero que esto te ayude


20
+1 Si pudiera, te daría +100 de mi propia reputación. ¡Un consejo genial! Lo único que no pude hacer fue abrir el guión gráfico con Dashcode, así que usé TextWrangler (pero creo que cualquier editor de texto lo haría). ¡Gracias!
Piotr Justyna

45
Buen consejo, gracias. Mientras lo hace, es probable que también desee cambiar todo el ancho = "320" a ancho = "768", altura = "480" a altura = "1024", etc ... directamente desde aquí. Como es mucho más simple que hacerlo elemento por elemento en IB.
Ben G

63
no use Dashcode, ni textWrangler, dentro de xCode simplemente: haga clic derecho en el guión gráfico -> "abrir como" -> "Código fuente" cuando haya terminado, haga lo mismo excepto usar "Interface Builder - IOS StoryBoard"
hokkuk

16
@PiotrJustyna puedes hacer eso. Presione start a bountydebajo de la pregunta, seleccione la cantidad deseada y Reward existing answer...
Filip Radelic

33
para obtener el formato iPad, también cambie el código en MainStoryboard_iPad.storyboard de: <simulatedScreenMetrics key="destination" type="retina4"/>a<simulatedScreenMetrics key="destination"/>
Marcus Schwab el

61

Si hubiera creado un proyecto universal, de forma predeterminada se habría creado un guión gráfico de iPad vacío, solo tiene que seleccionar el guión gráfico de iPhone, seleccionar todo (Comando + A), copiar (Comando + C) y pegarlo en el guión gráfico del iPad. Asegúrese de mover el punto de entrada del guión gráfico vacío al guión gráfico recién copiado antes de compilar.


99
La mejor respuesta, una solución fácil y le permite modificar la interfaz fácilmente después, a diferencia de la respuesta principal. :)
Matt Reid

¿Qué pasa con el diseño?
tryKuldeepTanwar

10

Eso no funcionó para mí. Hice algo un poco diferente.

  1. Cree un nuevo archivo de storyboard para la versión de iPad
  2. Abra tanto el nuevo archivo como el archivo que quiero copiar en textwrangler (editor de texto)
  3. Copié el texto xml del archivo antiguo al nuevo archivo entre estas etiquetas xml
  4. Primera etiqueta <scenes> <!--Contents View Controller-->
  5. Pegar aquí
  6. Etiquetas finales </class> </classes>

Eso funcionó para mí. Obtuve un nuevo diseño con todos mis enchufes conectados, lo que solo me ahorró algunas horas.


1
+1 los otros no funcionaron para mí y esto hace que todo funcione como se esperaba
Shereef Marzouk

44
Puede hacer esto desde Xcode. Simplemente haga clic derecho / control en los .storyboardarchivos y haga clic Open As > Source Codepara ver el XML sin procesar.
Matt Kantor

8

Al leer muchos hilos en stackoverflow descubrí que la solución es-

1. Duplique su iPhone-Storyboard y cámbiele el nombre a MainStoryboard_iPad.storyboard

2. Haga clic derecho en el guión gráfico -> "abrir como" -> "Código fuente".

3.Busque targetRuntime = "iOS.CocoaTouch" y cámbielo a targetRuntime = "iOS.CocoaTouch.iPad"

5. Busque <simulatedScreenMetrics key="destination" type="retina4"/>y cámbielo a<simulatedScreenMetrics key="destination"/>

4.Ahora guarde todo y haga clic derecho en MainStoryboard_iPad.storyboard "abrir como" -> "IOS StoryBoard" 5. También puede que tenga que cambiar sus restricciones. Eso es todo lo que has hecho.


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 tu "MainStoryboard_iPad.storyboard";

2 - Haz clic derecho sobre ti "MainStoryboard_iPhone.storyboard"y "Abrir como -> Código fuente". Copia todo;

3- Haz clic derecho sobre ti "MainStoryboard_iPad.storyboard"y "Abrir como -> Código fuente". Pega todo. Ahora busque y cambie:

  • 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 - Guardar. Ahora vuelva a abrir pero usando el generador de interfaces. Solo tendrá que reorganizar.

Este método también se puede usar para archivos .xib


1
Esta es la mejor manera de hacerlo. porque todas las vistas y componentes cambiarán su tamaño a formato ipad.
Ben

1
No es necesario cambiar type = "com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" en la última versión de ios7.
super9

5

Esto va a la inversa, pero pude hacer una selección de todo y copiar en mi storyboard de iPad (~ 35 escenas) y pegarlo en mi storyboard de iPhone. Los tamaños de escena se ajustaron automáticamente. Solo vi dos problemas, tuve que reemplazar UISplitViewController (ya que es solo iPad), y el fondo predeterminado se volvió transparente en lugar de gris (aún trabajando en solucionarlo correctamente, sin configurar manualmente el fondo para todo).

EDITAR: Parece que el fondo predeterminado para UITableView en el inspector de atributos es bastante extraño. Tuve que configurar manualmente el fondo en "Color de fondo de vista de tabla de grupo" para vistas de tabla agrupadas y "Color blanco" para vistas de tabla no agrupadas. Luego se mostró como "Predeterminado" (supongo que luego coincidió con un valor codificado). - En realidad, aún más fácil, cambiar de "Agrupado" a "Estático" y viceversa parece restablecer el color predeterminado.


4

Aquí hay algo que me ahorró horas y podría ayudar a aquellos de ustedes con habilidades de Python.

He estado construyendo una aplicación durante los últimos dos meses, enfocada solo en iPad iterando la UX con el equipo.

Hoy se centró en la construcción de la versión para iPhone, seguí los pasos anteriores (¡gracias!), Pero no quería cambiar el tamaño de todos los elementos de la interfaz de usuario de las dimensiones del iPad en el editor visual del guión gráfico.

Así que escribí este pequeño script de Python Jig para escanear a través del archivo del guión gráfico para x, y, ancho, alto y escalar todo en una proporción de 320./768. Entonces me permitió centrarme solo en los ajustes finos.

  1. Copie su storyboard de iPad en un nuevo archivo. (por ejemplo, iPhoneStoryboard.storyboard)

  2. Ejecute el script a continuación con el nombre del archivo del guión gráfico copiado como primer parámetro.

  3. Generará el archivo de salida con el sufijo _adjusted.storyboard (por ejemplo, iPhoneStoryboard.storyboard_adjusted.storyboard)

Espero eso ayude...

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
Hola Chrish, soy nuevo en el phython. así que no puedo entender el código para cambiar el guión gráfico de iPhone a iPad. Entonces, ¿pueden ayudarme en esto? Mi storyboard de ipad se está convirtiendo en storyboard de iphone sin ningún problema. pero necesito convertir mi storyboard de iphone a iPad. Entonces, cuando requiera los cambios necesarios en el script anterior o puede compartir el script que convierte el iphone en ipad. Gracias por adelantado.
Shubham el

@ Chris Robertson Chris, si quisiera usar este script para la conversión de iPhone a iPad, cambiaría la 'escala = 320./768'. a 'escala = 768./320.'
Charles Robertson

3

Vaya a su Resumen de destino y cambie los dispositivos a universal, luego baje y configure la versión de ipad en cualquier guión gráfico que desee, incluido uno copiado y renombrado si lo desea.


3

Solo como una nota rápida para aquellos que pueden haber tenido mi problema con esto:

Mi problema:

El contenido del guión gráfico se copió muy bien en un nuevo archivo de tablero que agregué. Sin embargo, no pondría cambios en mi iPad aprovisionado. Al notar que tenía que cambiar el guión gráfico designado para el objetivo de compilación (ver imagen), se muestran los cambios.

Publicaría una imagen si tuviera los puntos, pero la configuración se encuentra en:

Navegador de proyectos en el menú de origen del lado izquierdo, destino raíz de la pestaña general del proyecto (panel central), información de implementación (segundo subtítulo), con la pestaña del botón iPad seleccionada.

A partir de ahí, elija su guión gráfico en "interfaz principal".

Gracias por la publicación, espero que esta mención ayude a un inconveniente en alguna parte.


3

Solo por diversión, en XCode 5.1 y iOS 7.1 también necesitaba cambiar los valores de "toolVersion" y "systemVersion" a esto:

toolsVersion="5023" systemVersion="13A603"

Sin esto, el nuevo archivo del guión gráfico no se compilaría


3

Con las clases de tamaño XCode6 ya no necesita convertir el guión gráfico a iPad. El mismo Storyboard se puede usar tanto para el iPhone como para el iPad, lo que le ahorra mantener dos archivos actualizados.

El guión gráfico resultante es compatible con iOS7 +.

Lea más sobre esto aquí: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH6-SW1

Utilice las clases de tamaño para habilitar un guión gráfico o un archivo xib para trabajar con todos los tamaños de pantalla disponibles. Esto permite que la interfaz de usuario de su aplicación funcione en cualquier dispositivo iOS.


3

Para Xcode10

  1. Solo duplicar Main.storyboard

  2. Luego cambie el nombre de los archivos a Main_iPad.storyboardyMain_iPone.storyboard

  3. Establecer nombres apropiados en .plist

ingrese la descripción de la imagen aquí

4. Simplemente seleccione el .storyboard adecuado para configurar ingrese la descripción de la imagen aquí


2

Esta funcionalidad ahora está incorporada. Por ejemplo, si uno cambia la configuración del proyecto en Información de implementación -> Dispositivos desde iPhone a Universal, aparecerá el siguiente cuadro de diálogo:

ingrese la descripción de la imagen aquí


3
Puede ser un error en Xcode, pero nunca he tenido este trabajo. El guión gráfico resultante del iPad no se agrega al proyecto, y no parece que se haya creado.
s73v3r

2

Seguí este hilo cuando fui golpeado con el mismo problema ayer. Los pasos que seguí

  1. Para Xcode 5.1, tuve que hacer una limpieza del guión gráfico del iPhone, como la falta de reutilización de identificadores de celdas de tabla, proporcionar la identificación del guión gráfico para cada controlador, eliminar escenas no utilizadas.
  2. Copie MainStoryboard_iPhone.storyboard en MainStoryboard_iPad.storyboard.
  3. Usando el editor vi - cambiado targetRuntime="iOS.CocoaTouch"atargetRuntime="iOS.CocoaTouch.iPad"
  4. Cambie el código en MainStoryboard_iPad.storyboard de: <simulatedScreenMetrics key="destination" type="retina4"/>a<simulatedScreenMetrics key="destination"/>
  5. Abra el proyecto en Xcode.
  6. Cambió los dispositivos de implementación a Universal: elija la opción de NO copiar el Storyboard de iPhone.
  7. Xcode predeterminará el Destino de implementación a 7.1, se encargó de las funciones obsoletas.
  8. Para corregir el error de vista fuera de lugar en iPad Storyboard - Se modificó el diseño del marco para los controladores que dan errores.

Eso fue todo. Gracias a todos por su ayuda.


1

La forma más fácil y confiable de hacer esto es copiar y pegar desde el guión gráfico de su iPad.

  1. Cree un nuevo guión gráfico y asígnele un nombre similar a MainStoryboard_ipad.
  2. Convierta su aplicación en una aplicación Universal configurando la propiedad Dispositivos en Universal en la página Resumen de las propiedades de Destino para su proyecto. ingrese la descripción de la imagen aquí
  3. Abra su storyboard de iPhone y seleccione todo y copie
  4. Abre el storyboard de tu iPad y pégalo.

Tendrá que cambiar el tamaño, pero puede ser más rápido que recrear todo el guión gráfico.


1

Existe una solución realmente simple para las versiones de Xcode que admiten clases de tamaño (probado en Xcode 7, que es la versión actual en el momento de la escritura). Marque la casilla de verificación "usar clases de tamaño" en un archivo de guión gráfico ( Inspector de archivos ), confirme el cuadro de diálogo que aparece. Luego, desmarque esa misma casilla de verificación: Xcode le preguntará si desea usar este guión gráfico con un iPhone o iPad y convertirá las pantallas en él de manera adecuada. No es necesario editar directamente el archivo del guión gráfico . Tanto para iPad como para iPhone, solo copie el mismo guión gráfico y configure uno para iPad y otro para iPhone utilizando el método descrito.

Y antes de que alguien sugiera usar clases de tamaño, aunque son geniales, son menos convenientes para una interfaz de usuario altamente personalizada, como juegos, etc.


1

Un enfoque diferente

  1. Agregue un controlador de vista vacío con controlador de navegación en el iPad-Storyboard

  2. Cambie la Clase a la Clase de su primer ViewController usado para iPhone, "fooViewController"

  3. Agregue el Storyboard-Identifier en el iPhone-Storyboard "fooViewController_storyboard_identifier" para el primer ViewController

  4. Vaya a "fooViewController.m"

  5. Añadir bool Bool variable nibWasLoadForIpad=false

  6. Vaya a viewDidLoadMétodo

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. El problema es que los fondos de vista se establecerán en blanco)



0

Gracias por las respuestas a todos.

Seguí los pasos anteriores, pero cuando ejecuté la aplicación bajo el simulador o mi iPad, seguía usando el guión gráfico del iPhone.

Por alguna razón, cuando cambié el dispositivo de destino para que fuera Universal en lugar de iPhone, Xcode (v5.0) no actualizó el archivo app-Info.plist para incluir el guión gráfico del iPad, así que tuve que agregar manualmente la siguiente entrada ( usando el editor plist en Xcode):

Nombre base del archivo del guión gráfico principal (iPad) ==> MainStoryboard_iPad


0

Solo cambio (además de la respuesta de @tharkay):

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

y funciona muy bien!

Lo uso en XCode 8.3.3

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.