Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3

January 28|0 Vistas|

Resumen: La programación del iPhone es como una mariquita - divertida y sólo un poco de miedo! Actualización 02/06/14: Totalmente actualizado para iOS 7 por Jorge Jordán. El iPhone es una plataforma increíble para desarrollarse para desarrolladores de softwar

Advertisement

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3

La programación del iPhone es como una mariquita - divertida y sólo un poco de miedo!

Actualización 02/06/14: Totalmente actualizado para iOS 7 por Jorge Jordán.

El iPhone es una plataforma increíble para desarrollarse para desarrolladores de software indie. Nunca ha sido más fácil encontrar tu propia idea de aplicación, codificar algo y tenerlo disponible para millones de clientes potenciales.

Últimamente he estado recibiendo un montón de preguntas de personas nuevas en el desarrollo de iOS preguntando cómo empezar. Así que pensé que sería útil escribir una serie de tutoriales de iOS adaptada para principiantes.

Pero en lugar de centrarse en detalle en un solo tema, vas a sumergirte y crear una aplicación funcional completa desde cero. Al final, habrá probado muchas áreas de desarrollo de iPhone, y listo para cavar más.

Entonces, ¿cuál es la aplicación que vas a hacer? Bueno, hay una historia detrás de eso ...

La otra noche, vi por primera vez una foto de un Bicho papa y empecé a asustar porque era tan grande y fea! Entonces me obsesioné con buscar todo tipo de imágenes de bicho de miedo en línea. Así que para difundir la diversión, usted va a hacer una aplicación para que - la evaluación de los errores de miedo!

Al hacer esta aplicación, aprenderás algunos de los temas más utilizados en el desarrollo del iPhone:

  • Lo que usted necesita para comenzar con el desarrollo del iPhone
  • Cómo almacenar sus datos de aplicaciones en un modelo
  • Cómo utilizar vistas de tabla - como agregar y eliminar filas
  • Cómo crear una vista de detalle de una fila
  • ¿Cómo apoyar a las orientaciones vertical y Paisaje
  • Cómo utilizar controladores de navegación
  • Cómo utilizar una imagen Selector
  • Cómo utilizar controles comunes como un campo de texto, un botón y una vista de imagen
  • Cómo agregar iconos e imágenes predeterminadas
  • Bonus: Cómo manejar las operaciones de larga duración

Suena como mucho, pero no te asustes - no tienes miedo de ningún error!

En esta primera parte de esta serie de tutoriales de iOS de tres partes, aprenderás cómo cargar el modelo con una lista de errores y mostrarlos en una vista de tabla. (Salte a la Parte Dos o la Parte Tres)

Este tutorial de iOS es para principiantes desarrolladores de iOS, sin embargo, asume que está familiarizado con Objective-C y la programación en general. Si es nuevo en Objective-C, le recomiendo que primero lea la Guía del lenguaje de programación de Objective-C de Apple.

Que necesitas

Primero lo primero - para desarrollar para el iPhone, necesitarás una Mac. Casi cualquier Mac hará, siempre y cuando sea lo suficientemente potente como para ejecutar la última versión de Mac OS, Mavericks. Pero si usted está buscando para ir a la ruta barata, puede recoger un Mac Mini para relativamente barato, y funciona muy bien para una máquina de desarrollo.

A continuación, necesitará obtener una copia de XCode, el IDE de Apple para el desarrollo de iOS. Así que si aún no lo has hecho, regístrate para una cuenta gratuita en el iPhone Dev Center y descarga una copia de Xcode desde la Mac App Store.

Si lo desea, puede inscribirse en el Programa para desarrolladores de iPhone que le permite distribuir sus aplicaciones en la App Store, pero si desea probar el desarrollo de iOS, la cuenta gratuita funciona correctamente.

Si te tomas en serio el desarrollo de iOS, probablemente querrás dispositivos físicos (iPhone 4 / iPhone 5 / iPod Touch / iPad). Es cierto que se puede hacer un montón de pruebas con el Simulador, pero hay algunas API que no funcionan en el Simulador, y necesitará un dispositivo físico para realizar pruebas de rendimiento.

Eso es todo - por lo que si no lo ha hecho, obtenga una copia de XCode, disparar hacia arriba, y seguir adelante!

Hola, Vista de la tabla!

Vas a empezar a cabo mediante el uso de uno de los controles más comunes en el iPhone - la vista de tabla. Usted probablemente ha visto la vista de tabla en una gran cantidad de aplicaciones ya, aquí hay algunos ejemplos:

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


Así que de todos modos, su primera pantalla en la aplicación tendrá uno de estos, para mostrar una lista de errores de miedo!

Empieza por ir a Archivo \ Nuevo proyecto ... en Xcode, seleccione la aplicación iOS \ Application \ Maestro-Detalle, y haga clic en Siguiente.

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


En la página siguiente, introduzca ScaryBugs para el nombre del producto, introduzca una cadena única para su identificador de la compañía (o com.yourcompanyname com.yourname es el mejor), seleccione iPhone en los dispositivos desplegable e introduzca el TAR como Clase de prefijo. Haga clic en Siguiente cuando haya terminado.

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


Elija un lugar para guardar el proyecto y haga clic en Crear. Y antes de hacer cualquier otra cosa, echa un vistazo a lo que tienes hasta ahora! En el menú principal seleccione Producto \ Destino \ simulador de iOS \ iPhone Retina (3,5 pulgadas), a continuación, haga clic en el botón Ejecutar. Si todo va bien, deberías ver lo siguiente en tu simulador:

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


Puede tocar el botón + para crear una nueva entrada y, a continuación, toque la nueva fila para ver una vista detallada para ello:

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


Así como se puede ver, que ya tiene un proyecto de trabajo que empezar desde ya eligió la plantilla Aplicación Maestro-Detalle.

No vas a cavar en la plantilla, ya que está más allá del alcance de este tutorial de iOS, pero acaba de notar que tiene una vista de tabla vacía y vista de detalle configurado y listo para ir - sólo tiene que rellenar con datos!

Así que para hacer eso, crear una clase para realizar un seguimiento de sus errores de miedo.

Un modelo de datos asustadizos: Organización

Nótese cómo hay una jerarquía de carpetas en la sección Navegador de proyectos de XCode:

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3

La plantilla viene configurado con un grupo de raíz, y un grupo de archivos de apoyo. Estos grupos son sólo para fines organizativos, así que siéntete libre de cambiarlos como quieras. En su caso, usted va a tener un buen número de archivos en este proyecto, por lo que es mejor organizar las cosas un poco.

En primer lugar, crear un nuevo grupo para almacenar los archivos de interfaz de usuario. Para ello, el control clic en el grupo Errores de miedo y seleccione Nuevo grupo. A continuación, haga clic en el control del nuevo grupo que ha creado y después cambiar el nombre, y el nombre de interfaz gráfica de usuario. Arrastre los archivos existentes de la raíz en el grupo de interfaz gráfica de usuario (pero no Supporting Files). Ahora debe verse así:

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3

Ahora crear un segundo grupo nuevo, y el nombre de modelo, porque estás a punto de agregar clases par para su modelo de datos allí. Su árbol ahora debe verse como el siguiente:

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3

Antes de empezar, es importante que sepas cómo se van a organizar las cosas en este tutorial:

  1. RWTScaryBugData: Contiene el nombre de errores y calificación.
  2. RWTScaryBugDoc: Contiene la imagen a tamaño completo, miniatura de la imagen, RWTScaryBugData.

La razón por la que estás configurando las cosas es que hará las cosas más fáciles en el seguimiento de este tutorial de iOS, donde vas a empezar a guardar tus datos en el disco, la implementación de compartir archivos, y similares.

Un Modelo de Datos Scary: Implementación

Ok por lo que Control y haga clic en el grupo del modelo y haga clic en Nuevo archivo .... Seleccione la plantilla iOS \ Cocoa Touch \ clase Objective-C, y haga clic en Siguiente.

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


Nombre del RWTScaryBugData clase, introduzca NSObject de subclase, y haga clic en Siguiente.

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


En la ventana emergente final, haga clic en Crear nuevo. Si todo va bien, el Navegador de proyectos debería ser similar a esto:

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3

Ok, es hora de crear su clase RWTScaryBugData. Reemplazar RWTScaryBugData.h con lo siguiente:

  #import <Foundation / Foundation.h> @interface RWTScaryBugData: NSObject @property (strong) NSString * title;  @property (asignar) float rating;  - (id) initWithTitle: (NSString *) calificación del título: (float) rating;  @fin 

Esto es algo bastante simple - usted está declarando simplemente un objeto con dos características - una secuencia para el nombre del insecto, y un flotador para cómo es asustadizo usted lo clasificó. Utilice dos atributos de propiedad para estos:

  • fuerte: Esto especifica que el tiempo de ejecución debe mantener automáticamente una fuerte referencia al objeto. Esta es una manera elegante de decir que el tiempo de ejecución de ARC mantendrá el objeto en memoria siempre y cuando haya una referencia a él alrededor y desasignarlo cuando no queden referencias. Para obtener más información, consulte el inicio de ARC en iOS 5 Tutorial.
  • asignar: Esto significa que la propiedad se establece directamente, sin la gestión de memoria en cuestión. Esto es lo que usted fija generalmente para tipos primitivos (no-objeto) como un flotador.

También se define un inicializador para la clase, por lo que puede establecer el título y la calificación cuando se crea el error.

Cambiar a RWTScaryBugData.m y sustituirla por la siguiente:

  #import "RWTScaryBugData.h" @implementation RWTScaryBugData @synthesize title = _title;  @synthesize rating = _rating;  - (id) initWithTitle: (NSString *) clasificación del título: (float) rating {if ((self = [super init])) {self.title = title;  Self.rating = clasificación;  } Return self;  }   @fin 

Una vez más, cosas extremadamente simples aquí. Sintetiza sus propiedades y crea su inicializador para rellenar las variables de instancia de los parámetros pasados. Tenga en cuenta que no hay necesidad de dealloc, ya que está utilizando ARC.

Bueno eso es todo por RWTScaryBugData. Ahora sigue los mismos pasos que usted hizo anteriormente para crear otra subclase de NSObject, esta vez llamado RWTScaryBugDoc.

Reemplazar RWTScaryBugDoc.h con lo siguiente:

  #import <Foundation / Foundation.h> @class RWTScaryBugData;  @interface RWTScaryBugDoc: NSObject @property (strong) RWTScaryBugData * datos;  @property (fuerte) UIImage * thumbImage;  @property (fuerte) UIImage * fullImage;  - (id) initWithTitle: (NSString *) rating: (float) rating thumbImage: (UIImage *) thumbImage fullImage: (UIImage *) fullImage;  @fin 

Nada de particular nota aquí - sólo crear algunas variables de instancia / propiedades y un inicializador.

Reemplazar RWTScaryBugDoc.m con lo siguiente:

  #import "RWTScaryBugDoc.h" #import "RWTScaryBugData.h" @implementación RWTScaryBugDoc @synthesize data = _data;  @synthesize thumbImage = _thumbImage;  @synthesize fullImage = _fullImage;  ThumbImage fullImage: (UIImage *) fullImage {if ((self = [init super])) {self.data = [[ RWTScaryBugData alloc] initWithTitle: clasificación del título: rating];  Self.thumbImage = thumbImage;  Self.fullImage = fullImage;  } Return self;  }   @fin 

Y eso es todo: ¡su modelo de datos está completo! Es hora de crear algunos datos de muestra y mostrarlos en la vista de tabla.

Un tipo diferente de lista de errores

En primer lugar, podrás configurar su vista de tabla para que pueda manejar con una lista de RWTScaryBugDocs. Lo primero que tiene que hacer es modificar su vista de tabla para que devuelva una lista dinámica de filas (en lugar de una sola fila codificada en un código que la plantilla configurada para usted).

Para ello, abra Main.storyboard. Esto le permite visualizar visualmente las diferentes "pantallas" en su aplicación. Como se puede ver, la aplicación está actualmente configurada para tener un control de navegación (lo que hace que sea fácil de deslizar entre diferentes pantallas), con el controlador de raíz la pantalla principal, y un controlador secundario, como la pantalla de detalles.

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


Seleccione la vista patrón del controlador y, en el área de selección en el panel izquierdo, seleccione la vista de tabla. En el inspector a la derecha, asegúrese de que el contenido se establece en dinámicas Prototipos.

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


Esto es lo que le permite diseñar una visión única de una celda a su gusto en el Editor de guión gráfico, y fácilmente crear instancias de la célula a través de código. Lo que desea es una célula básica, por lo que asegúrese de que la célula está utilizando el estilo básico.

Seleccione la vista de tabla de la célula a la izquierda, y en el Inspector de Atributos asegurarse de que el estilo se establece en Básica. También establezca el identificador a MyBasicCell.

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


Para obtener más información sobre la creación de celdas personalizadas, consulte las guías de inicio de principio en iOS 5 Tutorial.

Aceptar, ahora que tiene su vista de tabla configurada correctamente visualmente, sólo tiene que actualizar el código para rellenar la tabla con una lista de errores de miedo.

Vas a almacenar sus RWTScaryBugDocs en un NSMutableArray, la clase de colección que se utiliza para las matrices que deben ser capaces de cambiar de forma dinámica en tamaño.

Agregue la línea siguiente a RWTMasterViewController.h, entre las líneas @interface y @end:

  @property (fuerte) NSMutableArray * errores; 

Esta será la variable / propiedad de instancia que utilizará para realizar un seguimiento de su lista de errores.

Ahora ir a RWTMasterViewController.m y realizar los siguientes cambios:

  // En la parte superior del archivo #import "RWTScaryBugDoc.h" #import "RWTScaryBugData.h" // Después de @implementation @synthesize bugs = _bugs;  // Al final de viewDidLoad self.title = @ "Scary Bugs";  // Reemplazar la sentencia return en tableView: numberOfRowsInSection con lo siguiente: return _bugs.count;  // Replace tableView: cellForRowAtIndexPath con el siguiente - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath {UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: @ "MyBasicCell"];  RWTScaryBugDoc * error = [self.bugs objectAtIndex: indexPath.row];  Cell.textLabel.text = bug.data.title;  Cell.imageView.image = bug.thumbImage;  Célula de retorno;  } 

Ok, finalmente algo interesante para discutir!

En primer lugar, tenga en cuenta que se establece una propiedad denominada título a la cadena "Errores de miedo." Es un título especial de propiedad integrada en los controladores de vista. Cuando un controlador de navegación muestra un controlador de vista, que muestra lo que está en la propiedad del título en la barra de título. Así que al establecer esto, deberías ver "Scary Bugs" arriba!

A continuación, cuando se construye una vista de tabla con filas dinámicas que tiene que anular numberOfSectionsInTableView y numberOfRowsInSection para decirle al sistema operativo cuántas secciones / hileras deben mostrarse en la vista de tabla. Usted sólo tiene una sección, por lo que no tiene que hacer nada porque la plantilla ya está configurado para devolver 1 sección. Para las filas, simplemente devuelve el número de objetos en la matriz de errores.

Por último, se implementa tableView: cellForRowAtIndexPath, que es probablemente el método más importante para poner en práctica la hora de tomar una vista de tabla. Aquí, se configura la celda que se mostrará para una fila en particular. El sistema operativo llamará a este método una vez por fila para cada fila para que pueda configurarlo.

Echa un vistazo a este método en detalle, ya que esto es particularmente importante:

  - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath {UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: @ "MyBasicCell"];  RWTScaryBugDoc * error = [self.bugs objectAtIndex: indexPath.row];  Cell.textLabel.text = bug.data.title;  Cell.imageView.image = bug.thumbImage;  Célula de retorno;  } 

La primera línea llama a una función auxiliar llamada dequeueReusableCellWithIdentifier para tratar de devolver una célula reutilizable. ¿Qué es todo esto?

Bueno, es una optimización de rendimiento importante. Tenga en cuenta que las vistas de tabla pueden contener un número muy grande de filas, pero sólo un cierto número de ellas se muestran en pantalla a la vez. Así que en lugar de crear una nueva celda cada vez que una nueva fila ciclos en la pantalla, el sistema operativo puede mejorar el rendimiento mediante la reutilización de una celda que ya se creó, pero se desplazó fuera de la pantalla.

Así que eso es lo que la llamada es dequeueReusableCellWithIdentifier. Si no hay una célula reutilizables disponibles, que acaba de crear una nueva celda en función de la célula se configura en el Interface Builder (recuerda cómo se establece como base, y la llamó MyBasicCell).

En el Editor de guión gráfico se puede personalizar el diseño de la célula, o utilizar uno de los incorporados. En su caso, se eligió el estilo básico, lo que añade una etiqueta y la imagen se puede establecer.

Si tiene curiosidad sobre las opciones de las celdas de vista de tabla estándar, consulte la sección "Estilos estándar para las celdas de vista de tabla" en la Guía de programación de la vista Tabla.

Por último, se configura la célula mediante el establecimiento de su textLabel y imageView (que están disponibles con el estilo básico).

Lo creas o no, eso es todo lo que necesitas hacer! Ahora sólo tiene que configurar algunos datos de muestra para que se muestre la vista de tabla.

¡Fotos asustadizas del insecto!

¡Pero por supuesto usted necesitará algunas imágenes asustadizas del insecto para eso! Usted puede navegar por Internet y encontrar algunos, o descargar estas fotos de Bugs Scary que encontré en stock.xchng.

Una vez que haya descargado los archivos o conseguido su propia, todos ellos arrastre en la raíz de su árbol de Navegador de proyectos. Cuando aparezca la ventana emergente, asegurarse de que los elementos de copia en la carpeta del grupo de destino (si es necesario) esté seleccionada y haga clic en Finalizar.

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


A continuación, abra RWTAppDelegate.m y realizar los siguientes cambios:

  // En la parte superior del archivo #import "RWTMasterViewController.h" #import "RWTScaryBugDoc.h" // En el inicio de la aplicación: didFinishLaunchingWithOptions RWTScaryBugDoc * bug1 = [[RWTScaryBugDoc alloc] initWithTitle: @ "Potato Bug": thumbImage: UIImage imageNamed: @ "potatoBugThumb.jpg"] fullImage: [UIImage imageNamed: @ "potatoBug.jpg"]];  RWTScaryBugDoc * bug2 = [[RWTScaryBugDoc alloc] initWithTitle: @ "Casa Centipede" rating: 3 thumbImage: [UImage imageNamed: @ "centipedeThumb.jpg"] fullImage: [UIImage imageNamed: @ "centipede.jpg"]];  RWTScaryBugDoc * bug3 = [[RWTScaryBugDoc alloc] initWithTitle: @ "Wolf Spider" rating: 5 thumbImage: [UIImage imageNamed: @ "wolfSpiderThumb.jpg"] fullImage: [UIImage imageNamed: @ "wolfSpider.jpg"]];  RWTScaryBugDoc * bug4 = [[RWTScaryBugDoc alloc] initWithTitle: @ "Señora Bug" rating: 1 thumbImage: [UIImage imageNamed: @ "ladybugThumb.jpg"] fullImage: [UIImage imageNamed: @ "ladybug.jpg"]];  NSMutableArray * bugs = [NSMutableArray arrayWithObjects: bug1, bug2, bug3, bug4, nil];  UINavigationController * navController = (UINavigationController *) self.window.rootViewController;  RWTMasterViewController * masterController = [navController.viewControllers objectAtIndex: 0];  MasterController.bugs = bugs; 

Aquí sólo tiene que utilizar el inicializador RWTScaryBugDoc para crear cuatro errores de muestreo, que pasa en el título, la clasificación y las imágenes de cada una. Se les agrega todo a un NSMutableArray, los cuales puso en su vista de tabla.

Hablando de eso, se puede obtener un puntero a la RootViewController ya que se sabe que es el primer controlador de vista de la pila del mando de navegación. Hay otras maneras que usted podría haber conseguido un puntero también, pero ésta es una manera fácil.

¡Y eso es! Compilar y ejecutar la aplicación y, si todo funciona bien, debería ver una lista de (en su mayoría) los insectos temibles en su vista de tabla!

Tutorial de iOS: Cómo crear una aplicación para iPhone sencilla: Parte 1 & sol; 3


¿A dónde ir desde aquí?

Aquí hay un proyecto de ejemplo con todo el código que has desarrollado hasta ahora en esta serie de tutoriales de iOS.

Por favor, hágamelo saber si algo en lo anterior es confuso o si desea que me dé más detalles sobre cualquier cosa.

A continuación, en la serie de tutoriales de iOS, aprenderás cómo crear una vista de detalle de los errores para que puedas editar y evaluar tus errores.

Etiqueta:

Artículos relacionados

Popular

Último