Tutorial Xcode 21: TabBar App

Summary

En este tutorial de 'Código Fácil', el instructor Iker guía a los espectadores a través del proceso de creación de una aplicación Tab Bar utilizando Xcode. Comienza seleccionando el tipo de proyecto 'Tab Application', nombrando al proyecto 'Tabar' y configurando las vistas básicas. Luego, explica cómo agregar más vistas a la aplicación, incluyendo un nuevo 'UIViewController' y configurando el 'AppDelegate.m' para incluir la nueva vista en la Tab Bar. Finalmente, se muestra cómo establecer el título de la nueva vista en el archivo '.m' correspondiente. El objetivo es enseñar a los usuarios cómo crear una interfaz de usuario modular y cómo agregar múltiples vistas a una aplicación iOS.

Takeaways

• 😀 El tutorial es sobre cómo crear una aplicación de pestañas (tab application) en Xcode.
• 🛠 Se inicia creando un nuevo proyecto en Xcode, seleccionando el tipo de proyecto 'Tab application'.
• 📝 Se nombra al proyecto 'Tabar' y se crea con las opciones básicas.
• 🔍 Se muestra cómo correr la aplicación para visualizar las dos vistas básicas que se incluyen por defecto.
• 🚀 Para agregar más vistas, se va a la carpeta del proyecto y se crea un nuevo archivo seleccionando 'Cocoa Touch Class'.
• 📑 Se crea una nueva vista llamada 'Tercera ViewController' con un archivo XIB para la interfaz de usuario.
• 🔧 En el archivo 'AppDelegate.m', se importa la nueva vista y se configura para que se cargue al inicio de la aplicación.
• 📝 Se escribe código para agregar la 'Tercera ViewController' a la lista de controladores de vista del controlador de pestañas.
• 🖌️ Se establece el título de la nueva vista en el archivo 'TerceraViewController.m' para que se muestre correctamente en la aplicación.
• 🔄 Se sugiere que los usuarios pueden seguir el mismo método para agregar más vistas según sus necesidades.
• 👍 El tutorial concluye animando a los espectadores a dar 'me gusta' y suscribirse al canal 'Código Facilito' si les gustó el contenido.

Q & A

¿Qué es un 'tabb application' según el tutorial?

Un 'tabb application' es una aplicación que se divide en secciones diferentes, mostrando diferentes vistas en una interfaz de pestañas.

¿Cómo se crea un nuevo proyecto de 'tabb application' en Xcode?

En Xcode, al crear un nuevo proyecto, en lugar de seleccionar 'single application', se debe elegir 'Tab application' y seguir los pasos para configurarlo.

¿Cuántas vistas tiene una aplicación 'tabb application' por defecto?

Por defecto, una aplicación 'tabb application' tiene dos vistas cuando se crea siguiendo el tutorial básico.

¿Qué archivo se utiliza para agregar nuevas vistas a la aplicación en el tutorial?

Para agregar nuevas vistas, se utiliza el archivo 'New file' dentro de la carpeta del proyecto en Xcode.

¿Qué tipo de archivo se crea para agregar una nueva vista a la aplicación?

Se crea un archivo de tipo 'UIViewController subclass' para agregar una nueva vista a la aplicación.

¿Cómo se nombra la nueva vista que se agrega en el tutorial?

La nueva vista se nombró 'tercera ViewController' en el tutorial.

¿Dónde se encuentra el archivo 'AppDelegate.m' y qué propósito cumple en el tutorial?

El archivo 'AppDelegate.m' se encuentra en la carpeta del proyecto y se utiliza para configurar y agregar nuevas vistas a la aplicación.

¿Qué función se utiliza para importar la nueva vista en 'AppDelegate.m'?

Se utiliza la función '#import' para importar la nueva vista en 'AppDelegate.m'.

¿Cómo se agrega la nueva vista al 'tabBarController' en 'AppDelegate.m'?

Se agrega la nueva vista al 'tabBarController' mediante la adición de un objeto de la vista después del segundo view controller y antes de 'nil' en la lista de view controllers.

¿Cómo se establece el título de la nueva vista en la aplicación?

Se establece el título de la nueva vista en la aplicación utilizando 'self.title' y asignándole un nombre en el archivo '.m' correspondiente a la vista.

¿Cómo se verifica que la nueva vista se ha agregado correctamente a la aplicación?

Se verifica que la nueva vista se ha agregado correctamente ejecutando la aplicación y observando que aparece en la interfaz de pestañas.

Outlines

00:00

😀 Creación de una App Tab Bar en Xcode

En este primer párrafo, se presenta un tutorial sobre cómo crear una aplicación Tab Bar utilizando Xcode. El instructor, Iker, explica que una aplicación Tab Bar está compuesta por diferentes vistas o secciones. Para comenzar, se crea un nuevo proyecto en Xcode seleccionando el tipo 'Tab application'. El proceso implica nombrar el proyecto 'Tabar' y seguir los pasos para configurarlo. Iker muestra cómo, con solo dos vistas, se puede tener una Tab Bar básica. Luego, procede a enseñar cómo agregar más vistas a la aplicación, lo cual implica crear un nuevo 'UIViewController subclass' y configurarlo en el 'AppDelegate' para que se muestre en la aplicación.

05:01

😀 Agregar nuevas vistas a la App Tab Bar

En el segundo párrafo, se continúa el tutorial con la adición de vistas adicionales a la aplicación Tab Bar. Se detalla el proceso de crear una tercera vista llamada 'Tercera ViewController', incluyendo la configuración de un archivo XIB para la interfaz de usuario. Después de crear la vista, se muestra cómo importar y agregar esta nueva vista al array de 'viewControllers' en el 'AppDelegate'. Se menciona la necesidad de configurar el título de la vista en el método 'viewDidLoad' de la 'Tercera ViewController' para que se pueda identificar en la aplicación. Finalmente, se ejecuta la aplicación para verificar que la tercera vista se ha agregado correctamente y se muestra con su título correspondiente.

Keywords

💡Excode

Excode es un software de desarrollo de aplicaciones móviles que permite crear aplicaciones multiplataforma. En el video, se utiliza Excode para crear una aplicación de pestañas (tab application), que es un tipo de aplicación con diferentes vistas organizadas en pestañas.

💡Tab application

Una 'tab application' es un tipo de aplicación que se compone de varias vistas o 'tabs', cada una con una función o contenido diferente. En el video, se enseña cómo crear una aplicación de este tipo con al menos tres vistas, cada una con su propio controlador.

💡Xcode

Xcode es un entorno de desarrollo integrado (IDE) de Apple para desarrollar aplicaciones para iOS, macOS, watchOS y tvOS. En el script, se indica que se abre Xcode para crear un nuevo proyecto de 'tab application'.

💡Controladores de vistas

Los 'controladores de vistas' son componentes en las aplicaciones que manejan la lógica y presentación de una vista específica. En el video, se mencionan los controladores para la primera y la segunda vista de la aplicación.

💡Cocoa Touch

Cocoa Touch es un framework de programación para desarrollo de aplicaciones móviles de Apple. Se utiliza para crear interfaces de usuario y funcionales en aplicaciones de iOS. En el script, se selecciona 'Cocoa Touch' al crear un nuevo archivo para agregar una vista a la aplicación.

💡View controller subclass

Un 'view controller subclass' es una versión especializada de un controlador de vistas que se personaliza para una función específica dentro de la aplicación. En el tutorial, se crea un subclase de 'view controller' llamada 'tercera ViewController' para agregar una tercera vista a la aplicación.

💡AppDelegate

El 'AppDelegate' es un archivo en las aplicaciones de iOS que maneja eventos importantes de la aplicación, como su inicio y finalización. En el video, se modifica el archivo 'appdelegate.m' para incluir y configurar la nueva vista en la aplicación.

💡Init with nib name

Este método es parte del ciclo de vida de un controlador de vistas en iOS y se utiliza para inicializar un controlador de vistas con un archivo de interfaz de usuario (nib). En el script, se utiliza para crear una instancia de la 'tercera ViewController'.

💡Tab bar

La 'tab bar' es una barra de pestañas en la parte inferior de la pantalla de una aplicación de iOS que permite a los usuarios navegar rápidamente entre diferentes vistas o secciones de la aplicación. En el video, se habla de cómo crear y personalizar una 'tab bar' con varias vistas.

💡Autorelease

En el contexto de programación de iOS, 'autorelease' es un método que devuelve un objeto con un contador de referencias incrementado y que se liberará automáticamente cuando su contador de referencias llegue a cero. En el script, se utiliza 'autorelease' al crear una nueva vista para que el sistema de memoria de iOS maneje adecuadamente la vida útil del objeto.

💡Be dis load

Este es un posible error tipográfico en el script, pero probablemente se refiere a 'viewDidLoad', que es un método de los controladores de vistas que se llama después de que la vista ha sido configurada y se ha cargado su contenido. Se utiliza para realizar tareas de configuración finales antes de que la vista sea presentada al usuario. En el tutorial, se modifica 'viewDidLoad' para establecer el título de la nueva vista.

Highlights

[Música] Comienza el tutorial de excode por código facilito.

El tutorial es presentado por Iker.

Se enseña cómo crear una aplicación Tabb.

Se describe lo que es una aplicación Tabb y sus secciones.

Se muestra la primera vista de la aplicación Tabb.

Se muestra la segunda vista de la aplicación Tabb.

Se muestra la tercera vista de la aplicación Tabb.

Se inicia el proceso de creación de un nuevo proyecto en Xcode.

Se selecciona el tipo de proyecto 'Tab application' en Xcode.

Se nombra al proyecto 'tabar' y se crea.

Se explica que se puede crear un Tabb con dos vistas de forma sencilla.

Se muestra cómo agregar vistas adicionales a la aplicación.

Se detalla el proceso de agregar una tercera vista a la aplicación.

Se menciona la necesidad de importar la vista en el archivo appdelegate.m.

Se describe cómo configurar la ventana y cargar los controladores de vista.

Se explica cómo agregar y configurar la tercera vista en el código.

Se muestra cómo establecer el título de la tercera vista.

Se ejecuta la aplicación para verificar la adición de la tercera vista.

Se concluye el tutorial y se agradece a los espectadores.

Transcripts

[Música]

Hola a todos Bienvenidos a nuestro nuevo

tutorial de excode traído a ustedes por

código facilito Mi nombre es Iker y hoy

aprenderemos a crear un tabb

application les voy a mostrar un tabb

application es esto es una aplicación

que se divide como en secciones son

diferentes vistas aquí tenemos Nuestra

primer vista nuestra segunda vista y

nuestra tercer

vista bueno para crearlo vamos a abrir

xcode creamos un nuevo

proyecto aquí donde nos pregunta qué

queremos bueno Qué tipo de proyecto

queremos seleccionar ahora en vez de

single application vamos a seleccionar

el que dice Tab application y le damos

next lo llamamos

tabar le damos next y lo

creamos y bueno si nada más quieren

hacer un tabb

con dos vistas pues ya lo Así nada más

con haber hecho lo que hicimos ahorita

ya tienen su Tab bar con dos vistas Aquí

tienen su sus controladores para la

primer vista y los los de la segunda

vista vamos a correrlo Para que vean

Aquí tienen la primera y la segunda Pero

bueno lo que yo les voy a enseñar en

esto es agregarle vistas a a esta

aplicación porque pues así es algo muy

sencillo pero a lo mejor ustedes quieren

ponerle no sé tres cuatro cinco seis

vistas Y pues el chiste es que sepan

bien cómo se hace así que bueno para

esto vamos a irnos a

aquí a donde está nuestra carpeta y

damos click derecho le damos New

file seleccionamos cocoa Touch aquí y

luego el que dice u View controller

subclass Eso es para agregar una vista

como en el tutorial como en el tutorial

pasado Bueno le ponemos un nombre le voy

a

poner tercera View

controller seleccionan aquí que diga u

View controller

y que esté seleccionado el que dice with

xib for user interface le damos next y

lo

creamos y Bueno aquí ya nos creó nuestra

tercer

vista ahora para poder

agregarla a nuestra aplicación lo que

tenemos que hacer es irnos a nuestro

appdelegate

m y si ven aquí donde bueno primero de

nada los imports tenemos que importar la

vista Así que abajo de todos los import

que hay vamos a escribir otro entonces

ponemos el signo de número

import y entre comillas ponemos el

nombre que le dimos a nuestra tercer

vista en mi caso tercera View controller

Luego de eso nos vamos a ir aquí donde

está este Bull que dice application did

Finish launching with

options Y si ven Bueno aquí ya crea la

ventana y le está diciendo es lo que va

cargar aquí dice que va a cargar un View

controller que es el view controller

número uno nos dice el nombre que tiene

y ya Bueno le pone que el segundo y

nosotros tenemos que hacer lo mismo pero

para el tercero Entonces al final de

donde termina de cargar el segundo le

damos un enter y vamos a escribir Uy

View

controller el asterisco y le damos un

nombre y lo voy a poner

tercera

igual abrimos tres corchetes cuadrados y

ponemos tercera View controller espacio

aloc cerramos un corchete ponemos init

with nip

name terminando el init with nip name

seleccionamos lo que está ahí y ponemos

@ comillas comillas y escribimos el

nombre que tiene nuestra tercer vista

tercera tercera View

controller y en bundle le ponemos

nil cerramos un corchete cuadrado y

luego escribimos

autorelease y cerramos nuestro tercer

corchete cuadrado y terminamos en punto

y coma bueno con esto ya creamos nuestra

tercer vista ahora tenemos que decirle

que la

muestre para eso nos vamos a ir aquí

donde dice

self tabb controller viw controllers y

aquí donde está el view controller 1

View controller 2 y luego dice nil antes

del nil vamos a escribir el nombre de

nuestra tercer vista que fue

Tercera y le ponemos un coma para

separarlo del

nil con eso ya lo creamos Nosotros ya

nos va a aparecer en nuestra aplicación

vamos a correrla para

comprobarlo

Bueno sí ya nos aparece aquí está

Nuestra primer vista nuestra segunda

vista y la tercera nada más que no tiene

ningún nombre aquí entonces así no

podemos identificarla para ponerle un

nombre lo que vamos a hacer va a ser

irnos a nuestro punto H de nuestra digo

punto m de nuestra tercer

vista y aquí donde está el be dis

load después del corchete de de abrir

vamos a escribir lo siguiente self title

es igual @ comillas comillas y le

ponemos un nombre yo le voy a poner

tercera

vista y terminamos con punto

icona lo guardamos y corremos el la

aplicación y bueno ahora ya nos marca el

título aquí dice tercera vista segunda

vista y primera

vista y así ya sería todo para agregar

más vistas ustedes nada más hacen el

mismo método con las vistas que ustedes

quieran y bueno es sería todo el

tutorial espero les haya gustado ya

saben si les gustan los videos denle

manita arriba y suscríbanse al Canal de

código facilito hasta luego