Los guiones gráficos se presentaron por primera vez a los desarrolladores en el lanzamiento de iOS 5. Le ahorran al desarrollador la molestia de diseñar la interfaz de cada pantalla en un archivo diferente. El guión gráfico le permite ver la maqueta conceptual de su aplicación como un todo y las interacciones entre cada pantalla. Usando segues, puede configurar cómo la aplicación hará la transición entre pantallas dadas y pasará los datos. En este tutorial, le mostraré cómo crear una pantalla de inicio de sesión simple para una aplicación.
Empezando
Lo primero que vas a querer hacer es realizar un nuevo proyecto. Querrá una nueva aplicación de pantalla única que configure el idioma en Swift y los dispositivos en universal. Si navega hasta el guión gráfico, debería ver una escena de controlador de vista vacía. La flecha en el lado izquierdo del controlador de vista indica que es el controlador raíz.
Para agregar etiquetas para el nombre de usuario y la contraseña, debe ir al cuadro en la parte inferior derecha de la pantalla, seleccionar el círculo con un cuadrado y arrastrar y soltar dos etiquetas en su vista. Al elegir las preferencias en la barra lateral, puede especificar muchos parámetros importantes. Hay demasiados para repasar, pero la mayoría se explica por sí misma.
Los dos importantes para nosotros son el texto del marcador de posición y la casilla de verificación de entrada de texto seguro. Queremos utilizar texto de marcador de posición para que el usuario sepa qué información se requiere de él y la entrada segura para ocultar la contraseña del usuario. Una vez hecho esto, necesitamos un botón para activar nuestra transición. Podemos arrastrar uno de la misma forma que hicimos con un campo de texto. Después de haberle dado un título al botón y haber ordenado los objetos en la pantalla, debería verse así:
Ahora nuestra primera pantalla de la aplicación está lista, por lo que necesitamos hacer otra para realizar la transición. Haga esto arrastrando a la pantalla un segundo controlador de vista. Para conectar las dos pantallas debes hacer dos cosas. Primero deberá controlar, hacer clic en el botón y arrastrarlo a la nueva pantalla que agregó. A continuación, deberá seleccionar el círculo entre las dos vistas. Luego, deberá cambiar el identificador a segue; para este ejemplo usaré 'nextScreen'
Por último, pondremos una etiqueta en la nueva pantalla para que podamos ver al usuario y ver si nuestra aplicación funciona. Para poder acceder a los campos desde el guión gráfico de manera programática, necesitaremos crear salidas para ellos en la clase que los usa así:
class FirstScreen: UIViewController {
@IBOutlet nombre de usuario de var débil: UITextField!
@IBAction func loginButton (remitente: AnyObject) {
perfromSegueWithIdentifier ('nextScreen', sender: self)
}
}
class SecondScreen: UIViewController {
usuario var: String!
@IBOutlet nombre de usuario de var débil: UILabel!
anular func viewDidload () {
username.text = usuario
}
}
Una vez hecho esto, asegúrese de vincular los objetos del guión gráfico utilizando el inspector de conexiones de cada pantalla. Sus puntos de venta deberían aparecer y puede hacer clic en el círculo a la derecha de ellos para vincularlos.
La última función que se implementará es la función prepareForSegue en la clase de la primera pantalla. Esto le permite pasar datos a la nueva vista de la siguiente manera:
anular la diversión prepareForSegue (sigue: UIStoryboardFollow, remitente: AnyObject?) {
if segue.identifier == 'nextScreen' {
deje destVC = starts.destinationViewController como UIViewController
destVC.user = self.username
}
}
Ahora tiene un conocimiento básico de cómo cambiar de pantalla y pasar datos entre ellas. Esto le dará un buen comienzo en la creación de aplicaciones funcionales, ¡feliz programación!
2 minutos de lectura
