Cómo crear un flujo de pantalla para una aplicación iOS

Cómo crear un flujo de pantalla para una aplicación iOS: dummies

Después de crear el proyecto, está listo para crear un guión gráfico que capture el flujo de pantalla de la aplicación iOS. Los guiones gráficos brindan a los desarrolladores una forma declarativa (sin programación) de diseñar el flujo de la pantalla de una aplicación, así como también definen el diseño de cada pantalla en la aplicación. Un guión gráfico consta de lo siguiente:

  • Una representación gráfica de cada pantalla en una aplicación

  • Una especificación de las transiciones entre pantallas conocidas como segues

Cuando usa la plantilla de aplicación vacía para crear el proyecto, necesita agregar un archivo de guión gráfico. Para hacerlo, siga estos pasos:

  1. Elija Archivo → Nuevo → Archivo.

    Aparece esta pantalla, donde puede seleccionar una plantilla para el nuevo archivo.

  2. Seleccione Interfaz de usuario en el panel izquierdo debajo de iOS y luego seleccione Guión gráfico para agregar un archivo de guión gráfico.

    Este archivo se llama Principal. guión gráfico, pero puede elegir el nombre que desee, siempre que tenga el. extensión del guión gráfico Deje el cuadro Donde como está, para que el guión gráfico se guarde en la misma carpeta que el resto de los archivos de su proyecto.

    En la figura, observe la marca de verificación junto a Tic-Tac-Toe-Capítulo-8, que es el objetivo de compilación de la aplicación en este caso. Este paso hace que el guión gráfico sea un miembro del objetivo de compilación de la aplicación, por lo que cuando se crea la aplicación, el guión gráfico se incluye en la compilación.

Asegúrate de verificar el objetivo de compilación de la aplicación; de lo contrario, obtendrás errores extraños que tardarán horas en depurarse. Sin embargo, si olvida verificar el objetivo cuando agrega el guión gráfico, puede hacerlo más tarde.

Después de agregar el guión gráfico, debe configurar el proyecto para usarlo, de la siguiente manera:

  1. Edite el. archivo plist.

    Abre el archivo con. extensión plist - Tic-Tac-Toe-Chapter-8-Info. plist (plist significa archivo de lista de propiedades ).

  2. Agregue una nueva fila a la lista de Propiedades de información.

    Mueva su mouse más allá de la última fila de la lista de propiedades de información. Haga clic derecho y seleccione Agregar fila.

  3. Establece el valor para la nueva fila.

    Si selecciona la nueva fila que acaba de agregar, se convierte en una lista desplegable. Seleccione la entrada Nombre principal del archivo del guión gráfico. Mueva el mouse hacia la derecha, debajo de la columna Valor, y establezca el valor para la nueva entrada que acaba de agregar a Principal.

  4. Edite el archivo delegado de la aplicación.

    Usando el navegador del proyecto, ubique el archivo delegado de la aplicación (en este caso, TTTAppDelegate. M) y ubique el método didFinishLaunchingWithOptions (consulte el siguiente código).

  5. Edite el método didFinishLaunchingWithOptions.

  6. Comente (o simplemente elimine) todas las líneas excepto la declaración YES de devolución.

     - Aplicación (BOOL): aplicación (UIApplication *) didFinishLaunchingWithOptions: (NSDictionary *) launchOptions {// self. window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] bounds]]; // Anular el punto para la personalización después del lanzamiento de la aplicación. // auto. ventana. backgroundColor = [UIColor whiteColor]; // [auto. ventana makeKeyAndVisible]; devuelva SÍ;} 
  7. Haga clic con el botón derecho en el archivo del guión gráfico y elija Abrir como → Código fuente.

    Aparece el guión gráfico, que se muestra en XML.