Tutorial Xcode 22: Tipos de transiciones
Summary
TLDREn este tutorial de Excode, el instructor Iker enseña cómo cambiar de vista en una aplicación iOS. Comienza creando un nuevo proyecto llamado 'multivista' y agregando una segunda vista. Luego, explica cómo declarar y conectar acciones para realizar diferentes tipos de transiciones entre vistas, como 'cover vertical', 'cross dissolve', 'flip horizontal' y 'partial c'. Seguidamente, se diseña la interfaz gráfica con botones y se conecta cada acción a un botón. Además, se crea una acción para regresar a la vista principal. El video termina con una demostración de cómo funcionan las transiciones en la aplicación creada.
Takeaways
- 😀 El tutorial es sobre cómo cambiar de vista en una aplicación usando Xcode.
- 👨🏫 El presentador del tutorial es Iker.
- 📱 Se crea un nuevo proyecto de una sola vista llamada 'multivista'.
- 🔍 Se agrega una segunda vista al proyecto para demostrar las transiciones.
- 🛠 Se necesitan cuatro acciones en el primer ViewController para gestionar las transiciones.
- 🔄 Se importan y se configuran diferentes estilos de transición en el código, como 'cover vertical', 'cross dissolve', 'flip horizontal' y 'partial curl'.
- 🎨 Se diseña una interfaz gráfica con cuatro botones para cada tipo de transición.
- 🔗 Se establecen conexiones de acción para que los botones invoquen las transiciones correspondientes.
- ↩️ Se implementa una acción de 'regresar' para volver a la primera vista desde la segunda.
- 📹 El tutorial termina con una demostración de cómo funcionan las transiciones en la aplicación.
Q & A
¿Qué tutorial es este y qué lenguaje de programación se utiliza?
-Este es un tutorial sobre cómo cambiar de vista en una aplicación y utiliza el lenguaje de programación Swift para desarrollar en iOS.
¿Quién es el instructor del tutorial y qué nombre le da a su proyecto?
-El instructor del tutorial es Iker y le da el nombre de 'multivista' a su proyecto.
¿Cuántas vistas se necesitan para este tutorial y cómo se crea la segunda vista?
-Se necesitan dos vistas para este tutorial. Para crear la segunda vista, se hace clic derecho en el nombre del proyecto, se selecciona 'New File', se elige 'Cocoa Touch' y se hace doble clic en 'UIViewController subclass', nombrándola 'vista dos ViewController'.
¿Qué acciones se deben declarar en el archivo .h del primer ViewController para este tutorial?
-Se deben declarar cuatro acciones en el archivo .h del primer ViewController, llamadas 'transición un', 'transición dos', 'transición tres' y 'transición cuatro'.
¿Cómo se importa la segunda vista en el primer ViewController para usarla en acciones?
-Para importar la segunda vista en el primer ViewController, se escribe '#import' seguido del nombre del archivo de la segunda vista, que es 'vista2ViewController.h'.
¿Cuál es el estilo de transición que se usa en la primera acción del primer ViewController?
-El estilo de transición usado en la primera acción del primer ViewController es 'cover vertical'.
¿Qué estilos de transición se utilizan en las siguientes tres acciones del primer ViewController?
-Las tres acciones siguientes utilizan los estilos de transición 'cross dissolve', 'flip horizontal' y 'partial curl' respectivamente.
¿Cómo se conectan las acciones con los botones en la interfaz gráfica del primer ViewController?
-Se van al 'ViewController.xib', se agregan cuatro botones con los números 1, 2, 3 y 4, y se conectan cada acción con su correspondiente botón a través de 'File's Owner' y las 'connections', asignándoles la acción 'touch up inside'.
¿Qué acción se declara en el segundo ViewController para regresar a la primera vista?
-Se declara una acción llamada 'regresar' en el segundo ViewController para poder volver a la primera vista.
¿Cómo se implementa la acción de regresar a la primera vista desde el segundo ViewController?
-La acción de regresar a la primera vista se implementa en el segundo ViewController con la línea de código '[self dismissModalViewControllerAnimated:YES];'.
¿Cómo se conecta el botón de 'regresar' en la interfaz gráfica del segundo ViewController?
-Se va al 'ViewController.xib' del segundo ViewController, se agrega un botón llamado 'regresar', se conecta a través de 'File's Owner' y las 'connections', y se le asigna la acción 'touch up inside'.
¿Cómo se puede ver el resultado de las transiciones en la aplicación?
-Después de guardar los cambios y ejecutar la aplicación, se pueden ver las transiciones al hacer clic en los botones correspondientes en la primera vista.
Outlines
😀 Introducción al tutorial de transiciones de vistas en Excode
El tutorial comienza con una introducción por parte de Iker, quien presenta el objetivo del video: aprender a cambiar de vista y las diferentes transiciones disponibles en Excode. Se inicia el proceso abriendo Excode y creando un nuevo proyecto llamado 'multivista'. Luego, se procede a agregar una segunda vista al proyecto, siguiendo un proceso detallado que incluye la creación de un nuevo 'UIViewController' y la configuración de las acciones necesarias en el archivo 'ViewController.h'.
🛠 Configuración de acciones y transiciones de vistas
En esta sección, se detalla cómo configurar las acciones en el archivo 'ViewController.m' para importar la segunda vista y establecer diferentes estilos de transición, como 'cover vertical', 'cross dissolve', 'flip horizontal' y 'partial curl'. Además, se describe cómo copiar y pegar la primera acción para crear las demás transiciones, cambiando únicamente el estilo de transición en cada caso. Seguidamente, se crea la interfaz gráfica con cuatro botones en el archivo 'ViewController.xiv', cada uno conectado a una acción específica. Finalmente, se establece una acción de 'regresar' en la segunda vista para volver a la primera vista, y se conecta un botón a esta acción. El tutorial concluye con la ejecución del proyecto para visualizar las transiciones de vistas.
Mindmap
Keywords
💡Excode
💡Vista
💡Transición
💡ViewController
💡Acciones
💡Modal
💡Presentar
💡Storyboard
💡Botones
💡Regresar
Highlights
Bienvenida al nuevo tutorial de Excode.
El objetivo es aprender a cambiar de vista en Excode.
Se abren dos vistas para trabajar con transiciones.
Se crea un nuevo proyecto llamado 'multivista'.
Se agrega una segunda vista al proyecto.
Se declara acciones en el archivo Viewcontroller.h.
Se importan vistas en el archivo Viewcontroller.m.
Se establece el estilo de transición 'cover vertical'.
Se muestra cómo presentar una vista modal.
Se describen diferentes estilos de transición como 'cross dissolve' y 'flip horizontal'.
Se implementa la transición 'partial c' en la cuarta acción.
Se crea la interfaz gráfica con cuatro botones en el Viewcontroller.xiv.
Se conectan acciones a los botones mediante File's Owner.
Se declara una acción para regresar a la primera vista en Vista2ViewController.
Se implementa la acción de regresar en el método de Vista2ViewController.m.
Se conecta el botón de regresar en Vista2ViewController.xiv.
Se ejecuta el proyecto para ver las transiciones en acción.
Se muestra cómo funcionan los diferentes tipos de transiciones.
Se invita a seguir viendo el curso y suscribirse al canal.
Transcripts
[Música]
Hola a todos Bienvenidos a nuestro nuevo
tutorial de exc tra a ustedes por código
facilito Mi nombre es Iker y hoy vamos a
aprender las formas de cambiar de vista
bueno son los tipos de transiciones que
hay Bueno vamos a abrir excode
creamos un nuevo
proyecto le damos single
application lo vamos a llamar multivista
lo
creamos y esperamos a que
[Música]
abra
Bueno ya que haya cargado lo primero que
necesitamos hacer va a ser agregar
nuestra segunda vista porque para esto
vamos a necesitar dos vistas nada más
Entonces vamos aquí al nombre de nuestro
proyecto le damos clic derecho y le
ponemos New
file aquí donde dice iOS seleccionamos
coco touch y le damos doble clic al que
dice u View controller
subclass le ponemos un nombre yo lo voy
a llamar vista
dos View
controller aquí donde dice sub Class
of seleccionamos el que dice Uy View
controller y le ponemos el que dice with
XV for user
interface lo creamos y nos aparece
aquí vamos a ponerlo aquí
abajo y listo ahora vamos a en nuestra
primer vista vamos a necesitar cuatro
acciones Entonces nos vamos a nuestro
viewcontroller h y vamos a declarar
nuestras
acciones ponemos nuestros corchetes y
abajo de los corchetes ponemos nuestras
acciones Yo la voy a llamar
transición
un y así las otras
tres
después de eso nos vamos a ir a a
nuestro viewcontroller
punem y lo primero que tenemos que hacer
es importar nuestra segunda vista para
eso nos vamos abajo del import y
escribimos signo de número import y
ponemos vista 2 viewcontroller
punh Ahora sí abajo el implementation
ponemos nuestras
acciones
este es la de la la primera Entonces
vamos a empezar ponemos vista 2s View
controller y le damos un un nombre lo
voy a llamar vista dos es igual doble
corchete cuadrado ponemos vista 2s View
controller
al cerramos un corchete
cuadrado init with n name y ahí le vamos
a poner nil y en bundle le ponemos nil
también Cerramos el colchete cuadrado y
punto y
coma abajo vamos a
poner vista
2s punto modal transition Style es igual
u
modal transition Style y vamos a poner
que dice cover vertical
y le ponemos punto y
coma luego ponemos un colchete
cuadrado
self present model View controller y le
ponemos vista dos animated le vamos a
poner Yes Cerramos el corchete y punto y
coma y así queda nuestra primera acción
vamos a
copiarla y la pegamos este va a ser la
transición
dos Y aquí donde dice u modal transition
Style qué es
esto le borramos y vamos a poner el que
dice Cross
dissolve hacemos lo mismo para la
tercera digo esto nada más es por
ahorrar tiempo y no tener que escribir
todo en la tercera vamos a poner el de
flip horizontal
Lo mismo para la
cuarta y en la cuarta ponemos el que
dice partial c Bueno eso es todo para
nuestra primera vista vamos a crear su
interfaz gráfica nos vamos a
viewcontroller xiv y agregamos cuatro
botones
le vamos a poner
1 2s 3 4 nos vamos a files Owner
connections y los conectamos cada acción
con el botón le ponemos to Shop inside
así con
todos
bueno Nuestra primer vista ya quedó en
nuestra segunda vista lo único que vamos
a hacer va a ser declarar una acción que
es para que regresemos a la primer vista
Entonces vamos a nuestro vista 2s View
controller y vamos a declarar una acción
que se llame
regresar luego nos vamos a nuestro vad
viw controller m y hacemos lo mismo
tenemos que importar Nuestra primer
vista entonces damos import View
controller luego ponemos nuestra
acción pero en este en vez de escribir
todo nada más vamos a escribir entre
corchetes self
espacio dismiss model View controller
animated y le ponemos Yes cerramos
corchete cuadrado punto y
com vamos a nuestro vista 2
viewcontroller xiv
ponemos un
botón se va a llamar
regresar nos vamos a Fil
Owner connections y conectamos el de
regresar con nuestro botón y le ponemos
toop
inside guardamos y vamos a correrlo Para
que vean cómo
funciona esperamos a que
Bueno ya que haya abierto vamos a ver
cómo son las transiciones damos clic en
el botón uno ese es un tipo de
transición otro
tipo otro tipo de transición y el
último y bueno Esos son todos los tipos
de transición que hay espero les haya
gustado y les funcione este tutorial
para aplicarlo en todos sus proyectos ya
saben sigan Sigan viendo el curso decod
en código facilito y suscríbanse al
Canal hasta luego
Browse More Related Video
Tutorial Xcode 25: Esconder Objetos
Tutorial Xcode 21: TabBar App
7. Botones Personalizados - Programar aplicaciones iOS - Curso de Xcode
Tutorial Xcode 19: Aplicación que genera palabras al azar
12. Crear un AlertView - Curso de Xcode para programar aplicaciones iOS
[MOOC] - Apps para dispositivos móviles (ed. 2016) - iOS. Desarrollo de una App
5.0 / 5 (0 votes)