Share
UIKit es el marco que utilizará con mayor frecuencia cuando desarrolle aplicaciones iOS. Define los componentes centrales de una aplicación iOS, desde etiquetas y botones hasta vistas de tabla y controladores de navegación. En este artículo, no solo comenzaremos nuestra exploración del marco UIKit, sino que también exploraremos los aspectos internos de un proyecto de iOS y los componentes básicos de las aplicaciones de iOS..
Si bien el marco Foundation define clases, protocolos y funciones para el desarrollo de iOS y OS X, el marco UIKit está orientado exclusivamente al desarrollo de iOS. Es el equivalente de la Kit de aplicación o AppKit marco para el desarrollo de OS X.
Al igual que Foundation, UIKit define clases, protocolos, funciones, tipos de datos y constantes. También agrega funcionalidad adicional a varias clases de la Fundación, como NSObject, NSString, y NSValue a través del uso de las categorías de Objective-C.
Las categorías de Objective-C son una forma conveniente de agregar métodos adicionales a las clases existentes sin la necesidad de crear subclases. Lee este tutorial de Aaron Crabtree si quieres aprender más sobre las categorías de Objective-C.
En lugar de explorar las clases clave de UIKit como lo hicimos para el marco de la Fundación, crearemos un viaje a través de un nuevo proyecto de iOS y exploraremos las clases que encontramos. Al adoptar este enfoque, se aclarará rápidamente en qué contexto se usa una clase y cómo encaja cada clase en el esquema más amplio de una aplicación iOS y qué papel desempeña..
Inicie Xcode y cree un nuevo proyecto seleccionando Nuevo> Proyecto ... desde el Expediente menú. En la sección iOS de la izquierda, seleccione la Solicitud categoría. De la lista de plantillas de proyecto, elija la Solicitud de vista única modelo.
La plantilla de aplicación de vista única contiene los componentes básicos de una aplicación iOS y, por lo tanto, es un buen lugar para comenzar nuestro viaje..
Nombra el proyecto UIKit e ingrese el nombre de la organización y el identificador de la compañía. Ingrese un prefijo de clase, como expliqué anteriormente en esta serie, y establezca Dispositivos a iPhone.
Indique a Xcode dónde desea guardar el nuevo proyecto y asegúrese de poner el proyecto bajo control de versiones marcando la casilla de verificación etiquetada Crear un repositorio git en mi Mac. Revise este artículo para obtener más información sobre el control de versiones y sus beneficios.
Hemos aprendido muchas cosas nuevas desde la última vez que creamos un proyecto iOS desde cero, por lo que es una buena idea explorar los distintos archivos y carpetas de nuestro nuevo proyecto para ver si suenan una campana..
En el Navegador de proyectos, debería ver tres carpetas en la raíz del proyecto;
Echemos un vistazo al contenido de cada una de estas carpetas..
los Productos carpeta contiene actualmente dos elementos. El primer elemento lleva el nombre de nuestro proyecto y tiene una extensión de .aplicación. El nombre del segundo elemento termina en Pruebas y tiene una extensión de .xctest. No cubriré las pruebas unitarias de esta serie, por lo que puede ignorar el segundo elemento por ahora..
La carpeta Productos contiene la aplicación o aplicaciones creadas por el proyecto después de la compilación del código fuente.
Has notado que UIKit.app se resalta en rojo? Cuando Xcode no puede localizar un archivo, lo resalta en rojo. Debido a que el proyecto aún no se ha compilado, Xcode aún no ha creado el producto..
los Marcos carpeta contiene los marcos a los que está vinculado su proyecto. En el artículo anterior, nuestro proyecto solo estaba vinculado al marco de la Fundación. Sin embargo, este proyecto se basa en una plantilla de aplicación de iOS y, por lo tanto, se vincula con cuatro marcos: Foundation, UIKit, Core Graphics y XCTest..
Es posible que recuerde el marco de Core Graphics de esta serie. El marco contiene las interfaces para la API de dibujo 2D (Quartz). El marco XCTest está relacionado con las pruebas unitarias, que no cubriré en esta serie.
Hay otra ubicación en nuestro proyecto que especifica con qué marcos está vinculado el proyecto. Seleccione su proyecto en el Navegador de proyectos, elegir el único elemento en el Objetivos sección de la izquierda, y abra el Construir fases pestaña en la parte superior.
Abriendo el Enlace Binario con Bibliotecas En el cajón, se le presenta la misma lista de marcos que vimos en la carpeta Marcos. Vincular nuestro proyecto con otro marco del sistema iOS es tan fácil como hacer clic en el botón más en la parte inferior de la lista y seleccionar un marco de la lista.
La mayor parte del tiempo lo dedica a la carpeta del proyecto, que actualmente contiene seis archivos y una carpeta llamada Archivos de apoyo. Comencemos por echar un vistazo al contenido de la carpeta Archivos de soporte..
Accentsconagua
principal Función, que es donde comienza toda la magia. Aunque no estaremos modificando. main.m, Es esencial para tu aplicación iOS..Ahora que sabemos para qué sirven los diferentes archivos y carpetas de nuestro proyecto, es hora de explorar los diferentes componentes de una aplicación iOS. A medida que continuamos nuestro viaje, nos encontraremos con varias clases que pertenecen a UIKit. Cada clase que pertenece al marco UIKit comienza con el prefijo de clase UI. Recuerda que las clases de la Fundación tienen el prefijo NS.
Antes de comenzar a explorar el marco UIKit, quiero hablar sobre el patrón de Modelo-Vista-Controlador (MVC). El patrón MVC es uno de los patrones más extendidos en la programación orientada a objetos. Promueve la reutilización del código y tiene vínculos estrechos con el concepto de separación de responsabilidades o preocupaciones. Uno de los principales objetivos del patrón MVC es la separación de la lógica empresarial de una aplicación de la capa de presentación..
Cocoa Touch adopta el patrón MVC y, por lo tanto, es importante entender qué es y cómo funciona. En otras palabras, al comprender el patrón MVC, será mucho más fácil comprender cómo funcionan juntos los diferentes componentes de una aplicación iOS.
En el patrón MVC, un modelo controla la lógica empresarial de una aplicación. Interactuar con una base de datos, por ejemplo, es responsabilidad del modelo. La vista presenta los datos administrados por el modelo al usuario. La vista gestiona la interfaz de usuario y la entrada del usuario..
El controlador es el pegamento entre el modelo y la vista. Si bien el modelo y la vista no conocen la existencia del otro, el controlador conoce tanto el modelo como la vista..
Debido a que el controlador conoce tanto el modelo como la vista, a menudo es la pieza menos reutilizable de una aplicación. Cuanto menos sepa un objeto sobre su entorno y los objetos con los que interactúa, mayor será su reutilización en proyectos futuros..
UIApplicaciónA pesar de UIApplicación La clase es un componente clave de todas las aplicaciones de iOS, no interactuarás con ella muy a menudo y rara vez sentirás la necesidad de crear subclases. UIApplicación.
Cuando se inicia una aplicación, se crea un singleton de esta clase. ¿Recuerdas lo que es un objeto singleton? Significa que solo una instancia de objeto del UIApplicación La clase se crea durante la vida de una aplicación..
los UIApplicación instancia es el punto de entrada para la interacción del usuario y distribuye eventos a los objetos de destino apropiados. El significado exacto de esto se aclarará en unos minutos cuando echemos un vistazo a los controladores de vista..
En la mayoría de las aplicaciones de iOS, UIApplicación La instancia tiene un objeto delegado asociado. Siempre que cree un proyecto iOS usando una de las plantillas provistas, Xcode creará una clase de delegado de aplicación para usted. Eche un vistazo a los nombres de los archivos de origen en la carpeta del proyecto en el Navegador de proyectos. Los primeros dos archivos se nombran TSPAppDelegate.
La instancia de esta clase es el delegado de la UIApplicación semifallo. Antes de echar un vistazo más de cerca a la TSPAppDelegate clase, tenemos que entender cuál es el patrón de delegado.
Ole Begemann escribió un excelente artículo sobre la secuencia de lanzamiento de una aplicación iOS típica. En este artículo, habla sobre los diversos componentes involucrados y su función durante la secuencia de inicio de la aplicación. Recomiendo leer este artículo si desea obtener una mejor comprensión del papel de la UIApplicación clase así como lo misterioso principal() funcionar en main.m.
El patrón de delegado se usa ampliamente en Cocoa y Cocoa Touch. En el siguiente artículo de esta serie, en el que exploramos los entresijos de una vista de tabla, descubrirá que las vistas de tabla se basan en gran medida en el patrón de delegado (y fuente de datos).
Al igual que el patrón MVC, la delegación es común en la programación orientada a objetos. El patrón de delegado en Cocoa Touch, sin embargo, es ligeramente diferente, ya que utiliza un protocolo de delegado para definir el comportamiento del objeto delegado..
Avancemos y echemos un vistazo a las vistas de tabla. Si ha pasado algún tiempo con un iPhone o iPad, entonces el UITableView La clase debe ser familiar para ti. Presenta una lista ordenada de datos para el usuario y hace muy bien este trabajo..
¿Cómo sabe una vista de tabla qué hacer cuando se toca una fila? ¿Está este comportamiento incluido en el UITableView ¿clase? Ciertamente no, porque este comportamiento varía de una aplicación a otra. Si tuviéramos que incluir este comportamiento en el UITableView Clase, no sería muy reutilizable..
La vista de la mesa subcontratar esta responsabilidad a un objeto delegado. Dicho de otra manera, delegados esta tarea a otro objeto, una delegar objeto. Tómese un momento para inspeccionar la referencia de clase de la UITableView clase. Tiene dos propiedades nombradas fuente de datos y delegar. los delegar es notificado por la vista de tabla cada vez que un usuario toca una fila. Es responsabilidad del objeto delegado responder al toque del usuario.
El origen de datos de la vista de tabla es similar en términos de comportamiento. La principal diferencia es que la vista de tabla pregunta el objeto de origen de datos para algo, los datos que necesita mostrar.
Objetos de origen de datos y delegado, como la vista de tabla delegar y fuente de datos los objetos, casi siempre son clases personalizadas, clases que usted crea, porque su implementación es específica de la aplicación.
Antes de echar un vistazo a la TSPAppDelegate clase, es importante entender que un objeto delegado se ajusta a un protocolo de delegado. En el artículo anterior, ya aprendimos sobre los protocolos en Objective-C y cómo definen el comportamiento mediante la definición de una lista de métodos para que los adoptadores implementen.
Ahora que sabemos qué es la delegación, es hora de explorar el TSPAppDelegate Clase que Xcode creó para nosotros. Al iniciar la aplicación, la aplicación crea una instancia de TSPAppDelegate clase. Normalmente, nunca es necesario crear instancias explícitas de un objeto delegado de aplicación.
Abra el archivo de encabezado de la TSPAppDelegate clase (TSPAppDelegate.h) examinar su contenido. Si ignoramos los comentarios en la parte superior, la primera línea importa los archivos de encabezado del marco UIKit para que podamos trabajar con sus clases y protocolos..
#importar
La siguiente línea debe ser familiar. Este es el comienzo de la interfaz del TSPAppDelegate clase como se denota por el @interfaz directiva. Especifica el nombre de la clase y la superclase de la clase., UIResponder.
Entre paréntesis angulares están los protocolos que cumple la clase. los TSPAppDelegate clase se ajusta a un protocolo, el UIApplicationDelegate protocolo.
@interface TSPAppDelegate: UIResponder
La siguiente línea es una declaración de propiedad, que debería parecer familiar. La propiedad, ventana, es una instancia de UIWindow, que es una subclase de Vista. Las palabras entre paréntesis, fuerte y no atómico, son atributos de propiedad opcionales que especifican la semántica de almacenamiento y el comportamiento de la propiedad. Puedes ignorarlos por ahora.
@property (strong, nonatomic) ventana UIWindow *;
La parte más interesante de la interfaz de la TSPAppDelegate clase es la UIApplicationDelegate protocolo. Echa un vistazo a la referencia de la UIApplicationDelegate Protocolo para una lista completa de los métodos que define el protocolo..
El protocolo define docenas de métodos y lo invito a explorar algunos de ellos para tener una idea de las capacidades del protocolo. El método que más nos interesa en este momento es aplicación: didFinishLaunchingWithOptions:.
Cuando el UIApplicación La instancia ha terminado de preparar la aplicación para su lanzamiento, notificará al delegado, nuestro TSPAppDelegate Por ejemplo, que la aplicación terminará de iniciarse, pero que aún no ha finalizado..
¿Por qué notifica al delegado de la aplicación de este evento? los UIApplicación la instancia notifica a su delegado acerca de este evento para que tenga la oportunidad de prepararse para el inicio de la aplicación. Dirígete al archivo de implementación de TSPAppDelegate para ver lo que quiero decir. El primer método en el archivo de implementación es aplicación: didFinishLaunchingWithOptions: y debería ser más o menos como el que está pegado a continuación..
- Aplicación (BOOL): (UIApplication *) aplicación didFinishLaunchingWithOptions: (NSDictionary *) launchOptions return YES;
los aplicación: didFinishLaunchingWithOptions: método proporciona una referencia a la UIApplicación Una instancia y un diccionario con opciones, que no nos interesan en este momento. La implementación del método es bastante simple. Todo lo que hace es volver. SÍ para decirle al UIApplicación instancia que la aplicación está lista para iniciar.
El proyecto Xcode contiene otro archivo interesante., Main.storyboard. El guión gráfico define cómo se verá la interfaz de usuario de nuestra aplicación. Por defecto, el guión gráfico se llama Main.storyboard. Selecciona el guión gráfico para abrirlo..
El guión gráfico contiene actualmente una vista en el área de trabajo central. A la derecha de la Navegador de proyectos Puede ver una lista de elementos, que son los objetos que ve en la vista. El elemento superior se llama Ver escena del controlador, que contiene un artículo hijo etiquetado Controlador de vista.
los Controlador de vista El objeto también tiene varios elementos secundarios, pero hay uno que nos interesa especialmente., el objeto llamado Ver. Recuerda nuestra discusión sobre el patrón MVC. Aquí puedes ver el patrón MVC en acción. El modelo falta en este momento, pero tenemos una vista, la Ver objeto, y un controlador, el Controlador de vista objeto.
Cuando se inicia nuestra aplicación, el guión gráfico se utiliza para crear la interfaz de usuario de la aplicación. El controlador de vista se crea automáticamente una instancia y la vista del controlador de vista. los Ver objeto en el guión gráfico es administrado por el controlador de vista.
Espera un minuto. ¿Dónde puedo encontrar la clase del controlador de vista en el guión gráfico? ¿Cómo puedo cambiar su comportamiento para crear una aplicación única? Selecciona el Controlador de vista Objeto a la izquierda en el guión gráfico y abre el Inspector de identidad a la derecha.
los Inspector de identidad Te dice todo lo que necesitas saber. En la parte superior, en la sección. Clase personalizada, Puedes ver el nombre de la clase del controlador de vista., TSPViewController. ¿Te has dado cuenta de que los dos archivos de los que aún no hemos hablado tienen el mismo nombre? Exploraremos estos archivos en unos momentos..
El controlador de vista se crea una instancia para nosotros, porque es el controlador de vista inicial del guión gráfico. Esto se indica en el guión gráfico mediante la flecha que apunta al guión gráfico..
UIViewControllerSi abres TSPViewController.h, te darás cuenta de que el TSPViewController clase es una subclase de UIViewController. Me gusta TSPAppDelegate, la UIViewController clase es una subclase de UIResponder. Controladores de vista, o subclases de los mismos, caen en el controlador Categoría del patrón MVC. Como su nombre lo indica, controlan una vista, una instancia de Vista clase, que cae en el ver categoría del patrón MVC.
Un controlador de vista administra una vista y las subvistas de la vista como veremos más adelante. Para hacer esto, el controlador de vista necesita conocer la vista. En otras palabras, debe tener una referencia a la vista..
El controlador de vista en el guión gráfico tiene una referencia a la vista. Puede verificar esto seleccionando el controlador de vista en el guión gráfico y abriendo el Inspector de conexiones a la derecha.
En el Inspector de conexiones, deberías ver una sección llamada Puntos de venta. El término outlet es una palabra elegante para una propiedad, que puede establecer en el guión gráfico. Coloca el mouse sobre la salida que se llama ver y observe cómo se resalta la vista en el área de trabajo. Esa es la conexión entre el controlador de vista y la vista.
VistaAunque su aplicación solo puede tener una instancia de UIWindow, Puede tener muchas vistas. los Vista La clase es un componente importante del marco UIKit, porque muchas clases lo heredan, ya sea directa o indirectamente..
Volver a visitar Main.storyboard Seleccionándolo y echar un vistazo a la Biblioteca de objetos en la parte inferior de la Inspector.
Navega por la biblioteca de objetos y arrastra un etiqueta y un botón A la vista en el espacio de trabajo. No importa dónde los coloque en la vista, siempre que estén en la vista del controlador de vista..
Habrás notado que se han agregado dos nuevos objetos a la Objetos Sección a la izquierda. Tanto la etiqueta (UILabel) y el botón (UIButton) heredar de Vista. ¿Te diste cuenta de que el Etiqueta y Botón Los objetos están ligeramente sangrados en comparación con el Ver ¿objeto? Esto indica que el Etiqueta y Botón Los objetos son subvistas de la Ver objeto. Una vista puede tener una o más subvistas que administra.
Como mencioné anteriormente, la Vista La clase es un componente importante de UIKit. Una vista gestiona un área rectangular o marco en la pantalla. Administra los contenidos del área, las subvistas y cualquier interacción con los contenidos de la vista. los Vista clase es una subclase de UIResponder. Aprenderás mucho más sobre las vistas a lo largo de esta serie..
Veamos un ejemplo para ilustrar la relación entre el guión gráfico, la vista que contiene y el controlador de vista. Estos tres componentes son importantes y quiero asegurarme de que entiendan cómo funcionan juntos.
Hace unos minutos, agregó una etiqueta y un botón a la vista del controlador de vista. ¿Cómo sabe el controlador de vista sobre estos objetos? Por el momento, no aparecen en el Inspector de conexiones, pero podemos cambiar eso diciéndole al controlador de vista acerca de ellos.
Abra el archivo de encabezado del controlador de vista (TPSViewController.h) y añada una propiedad para la etiqueta y para el botón.
@property IBOutlet UILabel * myLabel; @property IBOutlet UIButton * myButton;
Añadiendo el IBOutlet palabra clave para la declaración de propiedad, las propiedades aparecerán en el Inspector de conexiones en el guión gráfico y eso es lo que queremos.
Regresa al guión gráfico, selecciona el Controlador de vista objeto en el Ver escena del controlador, y abre el Inspector de conexiones a la derecha. Las nuevas propiedades ahora están listadas en la lista de Puntos de venta. Sin embargo, el controlador de vista aún no ha hecho el conexión Entre las nuevas propiedades y los objetos en el storyboard..
Esto es fácil de remediar. Arrastre desde el círculo vacío a la izquierda de la MyLabel Salida a la etiqueta en el espacio de trabajo. Esto creará esa conexión tan importante para que el controlador de vista conozca la etiqueta. Haz lo mismo con el botón..
Aunque podemos cambiar el texto de la etiqueta en el guión gráfico, hagamos esto en el controlador de vista para ilustrar que el controlador de vista tiene acceso a la etiqueta y el botón en el guión gráfico..
Abra el archivo de implementación del controlador de vista (TPSViewController.m) y busca el viewDidLoad método. Modificar el viewDidLoad Método para reflejar la implementación a continuación. Los comentarios han sido omitidos para mayor claridad..
- (void) viewDidLoad [super viewDidLoad]; [self.myLabel setText: @ "Esta es una instancia de UILabel."];
Podemos enviar mensajes a la propiedad de la etiqueta preguntando al controlador de vista, yo, por su MyLabel propiedad. Enviando el MyLabel propiedad un mensaje de setText: y pasando una cadena literal, actualizamos el texto de la etiqueta..
Tenga en cuenta que setText: es un accesorio o setter. Aunque es posible usar la notación de puntos de Objective-C (ver más abajo), he usado la sintaxis más tradicional para mostrarle lo que realmente está sucediendo..
self.myLabel.text = @ "Esta es una instancia de UILabel";
Ejecute su aplicación en el simulador de iOS haciendo clic en el correr botón en la parte superior izquierda y observe que el texto de la etiqueta se ha actualizado.
Hemos explorado muchas cosas nuevas en este artículo. Quiero terminar esta entrega hablando de acciones. Al igual que los puntos de venta, las acciones no son más que métodos que puedes ver en el guión gráfico..
Vamos a ver cómo funciona esto. Abra el archivo de encabezado del controlador de vista (TPSViewController.h) y agregue la siguiente declaración de método en algún lugar del bloque de interfaz del controlador de vista.
- (IBAction) changeColor: (id) sender;
No te dejes confundir por la IBAcción palabra clave. IBAcción es idéntico a vacío, lo que significa que el método no devuelve ningún valor. Si echamos un vistazo más de cerca a la declaración del método, podemos ver que toma un argumento de tipo carné de identidad, una referencia a un objeto Objective-C.
Como lo indica el nombre del argumento, el argumento del método o acción es el objeto que envió el mensaje al controlador de vista. Explicaré esto con más detalle en un momento..
Revisa el guión gráfico, selecciona el Controlador de vista objeto en el Ver escena del controlador, y abre el Inspector de conexiones. Una nueva sección ha aparecido en el Inspector de conexiones llamado Acciones recibidas y la acción que acabamos de agregar está listada en esta sección.
Arrastre desde el círculo vacío a la izquierda de la acción al botón en el área de trabajo. Aparecerá una pequeña ventana con una lista de opciones. La lista contiene todos los eventos posibles a los que el botón puede responder. El que nos interesa es Retocar el interior. Este evento se activa cuando un usuario toca el botón y levanta el dedo mientras aún está dentro del botón..
Crea y ejecuta tu aplicación una vez más y toca el botón. ¿La aplicación también falló para ti? ¿Cómo pasó esto? Cuando pulsó el botón, envió un mensaje de cambioColor: al controlador de vista. A pesar de que el controlador de vista declara una cambioColor: método, todavía no implementa este método.
Cuando se envía un mensaje a un objeto que no implementa un método correspondiente, se genera una excepción y la aplicación se bloquea si no se detecta la excepción. Puede verificar esto ejecutando la aplicación una vez más, tocando el botón e inspeccionando el resultado en la ventana de la consola.
Para remediar esto, necesitamos implementar el cambioColor: método. Abra el archivo de implementación del controlador de vista (TPSViewController.m) y agregue el siguiente método de implementación en algún lugar del bloque de implementación.
- (IBAction) changeColor: (id) sender NSLog (@ "Sender Class>% @", [clase sender]); NSLog (@ "Superclase de remitente>% @", [superclase de remitente]); int r = arc4random ()% 255; int g = arc4random ()% 255; int b = arc4random ()% 255; UIColor * color = [UIColor colorWithRed: (r / 255.0) green: (g / 255.0) blue: (b / 255.0) alpha: 1.0]; [self.view setBackgroundColor: color];
La implementación de la cambioColor: El método es idéntico al que usamos anteriormente en esta serie. Sin embargo, he añadido dos extras NSLog llama a su implementación para mostrarle que el remitente del mensaje es de hecho el botón que agregamos al guión gráfico.
El método en sí es bastante simple. Generamos tres enteros aleatorios entre 0 y 255, pasar estos valores a colorWithRed: verde: azul: alfa: para generar un color aleatorio y actualizar el color de fondo de la vista del controlador de vista con el color generado aleatoriamente.
Tenga en cuenta que autoevaluación Hace referencia a la vista que administra el controlador de vista y que vimos anteriormente en el guión gráfico..
Cree y ejecute su aplicación una vez más, toque el botón y no olvide inspeccionar la salida en la ventana de la consola de Xcode. Notarás que el remitente es una instancia de UIButton y su superclase es UIControl.
En este artículo, hemos explorado algunas clases del marco UIKit y observamos de cerca los diversos componentes de una aplicación iOS. Exploraremos y trabajaremos con el marco UIKit con más detalle en el resto de esta serie..
Si no entiende completamente los diversos conceptos y patrones, estoy seguro de que lo hará a medida que la serie progrese. No dudes en dejar un comentario si tienes alguna pregunta sobre este artículo..
