Beginner && num; 8217 & semi; s Guía para el desarrollo de iOS: Construyendo su primera aplicación && num; 8211 & semi; Parte II

January 15|3 Vistas|

Resumen: En la primera parte de nuestro tutorial de iOS, te llevé a través de una visita guiada al desarrollo de aplicaciones para iPhone. Conseguimos una mirada más profunda en Xcode 4, y también tomamos un tutorial muy corto en la creación de la aplicación

Advertisement

Beginner && num; 8217 & semi; s Guía para el desarrollo de iOS: Construyendo su primera aplicación && num; 8211 & semi;  Parte II

En la primera parte de nuestro tutorial de iOS, te llevé a través de una visita guiada al desarrollo de aplicaciones para iPhone. Conseguimos una mirada más profunda en Xcode 4, y también tomamos un tutorial muy corto en la creación de la aplicación para el iPhone. El tutorial para principiantes fue escrito para cualquier persona que esté buscando para programar aplicaciones iOS.

Hoy en día, vamos a entrar en el segundo segmento del tema, donde estaremos construyendo una aplicación de iPhone que funcione plenamente. La aplicación, con una navegación por pestañas, será convertir unidades de temperatura y unidades de distancia. No se preocupe si sigue siendo nuevo en el Xcode. No toma mucho tiempo adaptarse cómodamente a la interfaz. Estaré explicando cada paso en detalle para que no se pierda, tampoco!

Al final del tutorial obtendrás una aplicación que no se puede insertar en el iPhone, ya que te obliga a comprar un programa de desarrollador, pero podemos ejecutarlo dentro del iOS Simulator en un sistema Mac OS X. He ofrecido los archivos de proyecto para descarga que también puede referirse cuando no está seguro acerca de cierto paso. Así que quieres una aplicación, vamos a empezar!

Nota: Necesitará una computadora con el sistema operativo Macintosh (Mac OS) para la instalación de Xcode, el desarrollo de aplicaciones y la presentación de aplicaciones, no hay manera de que pueda hacerlo en Windows legalmente.

Pre-instalación: instalación de paquetes Xcode

Si no lo ha hecho ya que tendrá que obtener Xcode 4 en su ordenador. Debe usar Xcode 4, ya que este tutorial está escrito específicamente para Xcode 4. Si está ejecutando la última Mac OS X Lion una simple búsqueda en la App Store puede conseguir todo lo que necesita. Xcode 4 incluye el iOS SDK & Simulator para crear y ejecutar aplicaciones iPhone directamente en tu Mac.

Si no puede encontrar el Xcode 4 en App Store, también puede intentar acceder a la página oficial de Xcode para descargar el software. De lo contrario, deberás encontrar el software en tu cuenta de desarrollador, que puedes registrar sin cargos en el sitio de desarrolladores de Apple.

También puede comprobar en Google si tiene dificultades para encontrar el software. Apple intenta mantener a sus desarrolladores más privatizados y refinados, por lo que puede ser una lucha conseguir que todo se configure para comenzar a programar. Por suerte Xcode es instalar una sola vez que incluye todas las cosas SDK de lo necesario para el desarrollo de aplicaciones iPhone.

Una vez finalizada la instalación, abra su nuevo software y construya esta aplicación para iPhone.

1. Crear su nuevo proyecto

Abra Xcode 4 y debe obtener una pantalla de inicio con algunas opciones predeterminadas. En la lista seleccione "Crear un nuevo proyecto de Xcode" para abrir la ventana principal. Aquí tienes la opción de seleccionar la nueva plantilla para empezar. Vamos a utilizar la Aplicación de pestañas.

Haga clic en "Siguiente" y hay que introducir un nombre para su proyecto. He elegido convertidor. A continuación, deberá introducir el identificador de la empresa, tales como com.hongkiat, que se utiliza para ordenar los directorios de construcción internos de su aplicación. Asegúrese de que selecciona "iPhone" de la familia de dispositivos, y se comprueban todas las opciones a continuación. Hit siguiente y seleccione una ubicación para crear todos los archivos del proyecto.

En el panel izquierdo se dará cuenta del Navegador de proyectos con un nuevo conjunto de archivos. Haga clic en el archivo "" para ver todos los archivos dentro. Al lado del Navegador de proyectos que se llama Esquema del documento. Recuerde estos nombres ya que vamos a utilizar a lo largo de todo el tutorial.

Usted debe notar 3 archivos muy importantes: MainStoryboard.storyboard, FirstViewController.h y FirstViewController.m. Los archivos .h y .m se utilizan para el encabezado y código de implementación que básicamente conecta la programación de fondo con nuestros botones frontales y campos de texto. Debería ver los archivos que coinciden, SecondViewController.h y SecondViewController.m de Segunda Vista también.

El archivo de guión gráfico fue originalmente un archivo .xib (mina pronunciado) que fue portado desde el Interface Builder. La nueva versión de Xcode 4.2 en realidad vincula esta funcionalidad a un tipo de diagrama de flujo para hacer la edición un poco más fácil. Al crear un nuevo proyecto, puede desmarcar la opción de guión gráfico y tendrá .xib archivos individuales para cada vista. Si se siente más cómodo en el sistema de archivos de edad puede usar eso, pero para este tutorial debe atenerse al método del guión gráfico.

2. Iconos de barra de pestañas personalizadas

Comenzaremos a construir los componentes de la interfaz primero y pasaremos a la programación de Objective-C más tarde. Para empezar vamos a sustituir el texto de la etiqueta con los iconos de la barra de pestañas. En primer lugar, la cabeza y la descarga en el icono Glyphish establecido en el escritorio. Ofrecen un conjunto profesional con iconos 2X para la pantalla retina iPhone 4 - pero podemos trabajar con los iconos estándar gratuitos para este tutorial.

De vuelta en Xcode, en su Navegador de proyectos, haga clic derecho en la primera carpeta de color amarillo que contiene sus principales puntos de vista y seleccione "Agregar archivos a Grupo ...". El Grupo debe ser titulado de acuerdo con el nombre del proyecto, para este caso se trata de convertidor.

Se abrirá una nueva ventana para seleccionar los archivos que se añadirán a Xcode. Elija el archivo del icono Glyphish ubicado en el escritorio (o en cualquier lugar que lo guardó a) y en el interior el archivo de iconos, elegir el 61-brightness.png. Haga clic en "Añadir", por lo que van a ser importados en el directorio del proyecto. Repita el mismo proceso para agregar 07-mapa-marker.png en el directorio del proyecto.

Ahora, seleccione la MainStoryboard.storyboard para abrir el editor visual en el centro del software. A la izquierda verás que hay un nuevo menú existía en el lado derecho del Navegador de proyectos, llamado el esquema del documento. Esta es una lista documentada de todos los elementos, páginas, vistas y navegación de la aplicación.

Antes de añadir los iconos también sólo tenemos otro menú llamado de las utilidades. El panel de Utilidades está activado por defecto, pero también se puede permitir que la de sectores seleccione Ver> Utilidades> Utilidades Mostrar en la barra de menú superior del software.

De vuelta en el esquema de documento se dará cuenta de cómo la primera vista y segunda vista cada uno tiene su cuadro de escena y controlador de vista. Clic en la flecha a la izquierda del primer controlador de vista - En primer lugar para mostrar más elementos y se debe detectar la barra de pestañas de artículos. Haga clic para seleccionarlo, y si no se puede ver nada intente desplazarse hacia la derecha en el visor del guión gráfico. Todas las ediciones de las pestañas se hará en el inspector de atributos, que se la pueda mostrar por seleccione Ver> Utilidades> Mostrar atributos inspector.

Ahora fijamos en el panel de Utilidades en el lado derecho del editor, y verá el título y la propiedad de imagen en la barra de pestañas de artículos. Haga clic en la flecha hacia abajo de la opción Imagen, a continuación, seleccione 61-brightness.png, se le asignará el icono a la barra de pestañas de artículos de la primera vista. También puede quitar el título del elemento de barra de pestañas por lo que no habrá ningún texto debajo del icono.

Para la segunda vista, puede volver al esquema del documento y haga clic en la flecha hacia abajo del segundo controlador de Vista - En segundo para mostrar la barra de pestañas de artículos - Segundo. Haga clic en la "barra de pestañas de artículos - Segundo" y mirar el panel de Utilidades en el lado derecho del editor para el título y la propiedad de imagen en la barra de pestañas de artículos. Haga clic en la flecha hacia abajo de la opción Imagen, a continuación, seleccione 07-mapa-marker.png, se le asignará el icono a la barra de pestañas de artículos de segunda vista. Retire el título del elemento de la barra de pestañas.

3. Diseño de vistas con objetos

Hemos terminado de importar y configurar las imágenes, ahora vamos a entrar en el diseño de las vistas. Básicamente, diseñaremos la primera vista, luego copiaremos todos los elementos de la primera vista y los pegaremos en la segunda vista, con algunos cambios adicionales para la segunda vista más adelante.

Para cada vista por defecto se nos da un objeto básico encabezado de texto y la descripción. Haga doble clic en el texto "Primera Vista" del primer controlador Ver en el editor visual y cambiarlo a "Temp Converter". Repita el proceso para el segundo controlador de Vista, pero cambiar el nombre a "Distancia Conversor". Puede seleccionar el texto y desplazarse a su Inspector de atributos en el panel Utilidades para cambiar la fuente, el color, el tamaño, etc.

Para la descripción de los objetos bajo el encabezado de texto del primer controlador de vista, puede hacer doble clic en el texto de la descripción y darle una descripción básica de lo que vamos a hacer en cada vista, como "Introduzca el valor por debajo de convertir en Fahrenheit Celsius ". Puede repetir el proceso para dar una descripción básica de la descripción del objeto de la Segunda controlador de vista, pero cambiar la descripción a "Introduzca el valor por debajo de convertir en Miles Kilómetros y unidades astronómicas."

Ahora necesitamos crear un campo de texto para la entrada de valor. En la parte inferior del panel Utilidades situada en el lado derecho del software, debería ver la biblioteca de objetos, que también se puede activar mediante seleccione Ver> Utilidades> Mostrar biblioteca de objetos. En su menú desplegable elija controles y seleccione un campo de texto, a continuación, arrastre en el primer controlador de Vista.

Moverse por el campo de texto para centrarlo y haga clic para cambiar el tamaño de la caja con el tamaño que prefiera. Si revisa nuestro inspector de atributos en el panel Utilidades también puede cambiar el color de texto del campo de entrada. A continuación, añadir el texto, "Enter temperatura ...", en el campo de marcador de posición (no en el campo de texto).

Ahora vamos a hacer algunos ajustes adicionales para que la aplicación sea un poco más fácil de usar. Mire en el panel Utilidades hasta que encuentre la propiedad, botón Borrar, a continuación, cambiar de "nunca aparece" a "aparece durante la edición". Esto le permite borrar la entrada completa de una vez sin pulsar el botón x varias veces.

A continuación, busque en el panel de nuevo hasta que encuentre la propiedad del teclado con un menú desplegable. He cambiado esto desde "Default" para "teclado numérico" por lo que la entrada se limitará a sólo enteros.

A continuación vamos a crear un botón para que podamos hacer clic en él para convertir el valor. Arrastre un botón redondo Rect de la biblioteca de objetos situados en la parte inferior del panel de Utilidades, y colocarlo debajo del campo de texto. Haga doble clic para añadir el texto "Convertir!". Una vez más pasar algún tiempo en el inspector de atributos para condimentar el estilo un poco, aunque se ve bien por defecto.

Sólo tenemos que arrastrar el objeto de etiqueta de la biblioteca de objetos en el primer controlador de Vista para manejar texto de salida de las conversiones. Al arrastrar la etiqueta a la vista, de forma predeterminada se le da un texto estático, como "Etiqueta". Debería eliminar el texto de modo que nada se mostraba cuando se lance la aplicación. Cambiar el tamaño de la caja para que sea más amplio y colocarlo debajo del botón Convert.

Antes de pasar a la segunda controlador de vista, se puede mejorar el diseño del primer controlador de vista. Se recomienda mejorar el diseño ahora para que más tarde, al duplicar los elementos del primer controlador de vista en el segundo controlador de vista, no es necesario volver a diseñar el segundo controlador de vista de nuevo.

Ahora vamos a hacer el mismo proceso para el controlador Second View. Podemos ahorrar tiempo copiando todo desde la primera vista, pero también necesitamos cambiar ciertas cosas para que coincidan con la función del segundo controlador de vista.

Haga clic en la opción "Ver" del segundo controlador Vista en su esquema del documento, dentro de la vista arrastrar para seleccionar todos los elementos y eliminarlos. Esto sólo debe quitar un encabezado de texto y un objeto de descripción para que la segunda vista esté totalmente vacía. Ahora selecciona todos los elementos de Primera Ver y pulse cmd + c / cmd + V para copiar / pegar en el vacío Segunda Vista. A continuación se muestran los cambios de objetos requeridos en Segunda vista:

  • Encabezado de texto - Cambie a "Conversor de distancia".
  • Campo de texto - El marcador de posición lee "Introducir distancia ..." y establecer la propiedad del teclado en "Pestaña de números".
  • Etiquetas: agregue una etiqueta más debajo de la etiqueta existente. La etiqueta superior mostrará el valor Kilómetros, mientras que la Etiqueta inferior mostrará el valor Unidades Astronómicas.

Esto es lo que lograrás al final, puedes notar que el resultado de la segunda vista es casi idéntico a la primera vista.

4. Programación en primera vista

Basta de gráficos por ahora, vamos a pasar a la programación! Podemos comenzar a construir la funcionalidad de backend para nuestra primera vista más sencilla. Seleccionar FirstViewController.h de su Navegador de proyectos.

Necesitamos actualizar el código para dar nombres de instancia para cada una de las funciones y propiedades que estamos usando. En primer lugar, verá el siguiente código en el FirstViewController.h:

  #import <UIKit / UIKit.h> @interface FirstViewController: UIViewController @end 

Ahora reemplazar el código anterior con el código de abajo. La palabra clave @interface está creando una subclase de UIViewController, que es la vista por defecto en cualquier aplicación de iOS.

  #import <UIKit / UIKit.h> @interface FirstViewController: UIViewController {UITextField * tempTextBox;  UILabel * calcResult;  } @property (no atómico, retener) IBOutlet UILabel * calcResult;  @property (no atómico, retener) IBOutlet UITextField * tempTextBox;  - (IBAction) degreeConvert: (id) remitente;  - (IBAction) backgroundTouchedHideKeyboard: (id) remitente;  @fin 

Debemos declarar (Outlets Interface Builder) IBOutlets para cada uno de los elementos en nuestra aplicación. Esto es lo que está creando @property - una nueva salida para Xcode para conectar a la interfaz. También definí dos acciones que en términos sencillos son bloques de código para ejecutar cada vez que se llaman.

Sobre degreeConvert, tomará el valor en nuestro campo de texto y realizar conversiones de Fahrenheit a Celsius. Del mismo modo backgroundTouchedHideKeyboard es una pequeña acción estaré añadiendo para ocultar el teclado cuando el usuario toca cualquier parte del fondo.

Ahora nos metemos en las diferencias con respecto a los archivos .h y .m. Hemos declarado todas estas funciones y variables, pero no hacen nada ni se conectan a nada en este momento. Necesitamos implementar la funcionalidad en nuestra FirstViewController.m. Guarde los cambios y haga clic para abrir el FirstViewController.m en Navegador de proyectos. Necesitamos crear una síntesis que acceda a los elementos en el encabezado First View. Esto se realiza con @synthesize por lo que ahora nuestras acciones pueden manipular los diferentes objetos en la pantalla.

Añadir la @synthesize tempTextBox, calcResult; en el FirstViewController.m por lo que las primeras líneas se verá como a continuación:

  #import "FirstViewController.h" @implementación FirstViewController @synthesize tempTextBox, calcResult; 

Esto se declara en el campo de texto único y en la etiqueta de resultados, respectivamente. Para ir más lejos echemos un vistazo a las dos funciones que he pre-escrito. Si todavía eres nuevo en la sintaxis de Objective-C, entonces puede parecer un poco funky. Pero se acostumbrará a las estructuras con el tiempo, pega el siguiente código en el archivo.

  - (void) degreeConvert: (id) sender {doble fahren = [tempTextBox.text doubleValue];  Doble celsius = (fahren - 32) / 1,8;  [TempTextBox resignFirstResponder];  NSString * convertResult = [[NSString alloc] initWithFormat: @ "Celsius:% f", celsius];  CalcResult.text = convertResult;  } - (void) backgroundTouchedHideKeyboard: (id) remitente {[tempTextBox resignFirstResponder];  } 

En primer lugar tenemos que toma en degreeConvert parámetros y devuelve vacío. Este es el método que se llama cuando un usuario presiona el botón de convertir en la primera vista. Un fahren variable se establece para tirar el valor de lo que sea el usuario ha introducido. Entonces podemos calcular otra centígrados variable con las matemáticas básicas.

Ahora [tempTextBox resignFirstResponder] es en realidad llama a un método resignFirstResponder en nuestro teclado. Este código también se ve en la segunda backgroundTouchedHideKeyboard función. Básicamente, oculta el teclado y anula la selección del campo de texto después de que el usuario toque el fondo o pulse el botón de convertir.

El resto de nuestra función degreeConvert crea una nueva cadena (NSString) para almacenar la conversión Celsius y usar la sintaxis de punto agrega esto a nuestro campo de etiqueta. Si tiene alguna familiaridad con la programación basada en C (Java, PHP, C # / C ++, Perl), algunos de estos términos deben ser familiares.

Ahora, buscar el código de abajo:

  - (void) viewDidUnload {[super viewDidUnload];  // Liberar cualquier subvista retenida de la vista principal.  // eg self.myOutlet = nil;  } 

Reemplazar el código anterior con el código de abajo:

  - (void) viewDidUnload {[super viewDidUnload];  // Liberar cualquier subvista retenida de la vista principal.  // eg self.myOutlet = nil;  Self.tempTextBox = nil;  Self.calcResult = nil;  } 

En la parte inferior de nuestra FirstViewController.m He hecho algunas recolección de basura para las variables hemos sintetizado. Debemos publicar todas las sub-vistas diferentes de la memoria que incluyen nuestro campo de texto y etiqueta de salida. Automatic Reference Counting (ARC) automáticamente desasignará las variables de la memoria, lo que ahorrará tanto énfasis en los proyectos iOS.

5. Conexión de acciones y salidas

Este es el paso final para la primera vista y vamos a conectar a nuestros elementos de front-end con código de fondo! Cuando la construcción de aplicaciones de iOS hay 3 grandes segmentos hasta su finalización: añadir los elementos de la interfaz física, que escriben el código del programa, y, finalmente, que conectan los dos juntos. Este segmento conectará todos los componentes de nuestra primera vista hasta que funcionen perfectamente.

Guarda tanto su FirstViewController.h y FirstViewController.m para asegurarse de que todo se actualiza. A continuación, haga clic de nuevo en el guión gráfico y mirar el esquema del documento. Allí se dará cuenta de una esfera de color naranja que debe ser nombrado primer View Controller - En primer lugar.

Haga clic en el orbe para seleccionarlo, y un contorno azul debe aparecer en la primera escena Vista. A continuación, pulse Ctrl y haga clic en el primer controlador de vista - Primero para arrastrar en el campo de texto, luego soltarlo.

Después de la acción, una lista de salidas se van a plantear. Seleccione "tempTextBox" de la lista. Si la conexión se realiza correctamente el campo de texto parpadeará.

A continuación, pulse Ctrl y haga clic en el primer controlador de vista - En primer lugar nuevo para arrastrar en el campo Etiqueta y seleccione "calcResult". Ambos puntos de venta están ahora conectados a estas variables y solo necesitamos conectar las acciones.

Clic en la flecha hacia la derecha de la Primera Vista Controlador - En primer lugar y verá un componente llamado Vista - hacer clic para seleccionarlo. Abra el inspector de la identidad en el panel de Utilidades, que también se puede activarla con el movimiento en la barra de menú superior del software y seleccione Ver> Utilidades> Mostrar la identidad del inspector. En Clase personalizada, introduzca "UIControl" o seleccionarlo en el menú desplegable.

Para que el teclado reconozca el fondo como un objeto tappable debe ser convertido en un control. Ahora otra vez en el panel Utilidades activar el inspector de conexiones por pasar a la barra de menú superior del software y seleccione Ver> Utilidades> Show Connections Inspector.

Así es como conectamos un evento de página (pulsar, pulsar, mantener, etc.) a una sola llamada de función. Mira a través de la lista de eventos hasta que encuentre Touch Down. Haga clic en el pequeño círculo situado en el lado derecho de la cita Touch Down, a continuación, arrastre y suéltelo en el primer controlador de Vista. Se le dará 2 acciones para elegir - elegir backgroundTouchedHideKeyboard y obtendrá un destello de confirmación.

Por último, haga clic para seleccionar el botón Convertir y asegúrese de que tiene un toque de luz azul, similar a la pantalla de arriba, pero sin seleccionar todo el control de vista. En la ventana de Conexiones arrastrar el pequeño círculo de retoque Dentro luego soltarlo en el primer controlador de vista nuevamente. Elija la función llamada degreeConvert, que sólo se activará cuando el usuario toca el botón y comunicados dentro de los límites establecidos.

6. Portando el código a la segunda vista

Ahora bien, este puede ser un buen momento para guardar su trabajo y compilar / construir la aplicación hasta ahora. Si todo está funcionando sin problemas, debería ser capaz de introducir algunos valores en el campo de texto y pulsar convertir para ver el resultado en Celsius! Si usted está recibiendo cualquier error de intentar la descarga de proyectos de demostración en la última sección de este artículo para comparar las diferencias y corregir los errores.

Supongo que ya ha creado el diseño de Second View en la sección anterior. En lugar de producir 1 conversión (Fahrenheit> centígrados) nuestra Segunda Vista emitirán 2 valores (Miles> kilómetros y millas> Unidades Astronómicas). Así que todo lo que tenemos que hacer es migrar el código de Objective-C de la Primera Ver y reorganizar todo funcione correctamente para nuestra Segunda Vista, a continuación, terminar conectando el guión gráfico a nuestras nuevas acciones y puntos de venta.

Debemos comenzar con el código de cabecera y pasar a la implementación. A continuación he añadido el código completo de mi archivo SecondViewController.h. Es básicamente un clon del encabezado de First View Controller, pero con una propiedad adicional vinculada al segundo elemento UILabel.

Una vez más usted necesita para buscar el siguiente código en el SecondViewController.h:

  #import <UIKit / UIKit.h> @interface SecondViewController: UIViewController @end 

Reemplazar el código anterior con el código de abajo:

  #import <UIKit / UIKit.h> @interface SecondViewController: UIViewController {UITextField * distTextBox;  UILabel * distResult;  UILabel * auResult;  } @property (no atómico, retener) IBOutlet UILabel * distResult;  @property (no atómico, retener) IBOutlet UILabel * auResult;  @property (no atómico, retener) IBOutlet UITextField * distTextBox;  - (IBAction) distanciaConvert: (id) remitente;  - (IBAction) backgroundTouchedHideKeyboard: (id) remitente;  @fin 

Se puede notar que he cambiado todos los nombres de instancia de las acciones y puntos de venta. distTextBox ahora llevará a cabo nuestra entrada de texto para la distancia. distResult es la etiqueta de distancia 1ª resultado (kilómetros) y auResult llevará a cabo nuestra segunda etiqueta de conversión. distanceConvert es la nueva acción que llamamos para convertir el valor numérico y backgroundTouchedHideKeyboard sigue siendo el mismo.

Como antes, estamos utilizando la jerarquía MVC para dividir las funciones de la aplicación (implementación) desde el controlador entre los objetos del guión gráfico. Si su SecondViewController.h está mirando la misma que la mía anterior, guardar los cambios y seleccione SecondViewController.m. Volveré a romper mi código en dos partes.

El código de abajo es de la parte superior de mi SecondViewController.m. Este contiene la declaración @synthesize para crear incubadoras y captadores para cada variable de instancia. Sé que este concepto de la síntesis de variables de instancia puede ser muy confuso inicialmente. Recomiendo este subproceso StackOverflow que puede ayudar a aclarar las cosas.

Ahora, busca el código de abajo en el SecondViewController.m:

  #import "SecondViewController.h" @implementation SecondViewController 

Reemplazar el código anterior con el código de abajo:

  #import "SecondViewController.h" @implementation SecondViewController @synthesize distResult, auResult, distTextBox;  - (void) distanceConvert: (id) sender {doble millas = [distTextBox.text doubleValue];  Doble km = millas * 1,61;  // multiplicar millas por ~ 1.609 kilómetros doble au = millas / 92956000;  // dividir millas por 92,956,000AU [distTextBox resignFirstResponder];  NSString * kiloResult = [[NSString alloc] initWithFormat: @ "Kilómetros:% f", km];  NSString * ausResult = [[NSString alloc] initWithFormat: @ "AUs:% f", au];  DistResult.text = kiloResult;  AuResult.text = ausResult;  } - (void) backgroundTouchedHideKeyboard: (id) remitente {[distTextBox resignFirstResponder];  } 

El nuevo distanceConvert acción se llamará una vez que el usuario pulsa el botón Convert. Millas variables se tire el número de distTextBox mientras km y au realizan algunas conversiones matemáticas básicas para lograr sus datos. Después usando 2 líneas asignamos memoria para 2 objetos de NSString que sostienen el kilómetro y la salida AU info. La sintaxis con punto hacemos un llamado a la propiedad .text para cambiar el texto UILabel.

Ahora, buscar el código de abajo:

  - (void) viewDidUnload {[super viewDidUnload];  // Liberar cualquier subvista retenida de la vista principal.  // eg self.myOutlet = nil;  } 

Reemplazar el código anterior con el código de abajo:

  - (void) viewDidUnload {[super viewDidUnload];  // Liberar cualquier subvista retenida de la vista principal.  // eg self.myOutlet = nil;  Self.distResult = nil;  Self.auResult = nil;  Self.distTextBox = nil;  } 

Y ahora el bit final de código encontrado al final de SecondViewController.m. viewDidUnload se llama después de nuestro punto de vista se terminó la compilación y se presentan. Hemos establecido las tres propiedades anteriormente sintetizados a cero (nula en Objective-C) y liberar su instancia de la memoria. La aplicación está casi completa después de terminar de conectar el guión gráfico a las salidas y las acciones.

7. Conexiones de la segunda vista

El proceso de construir vistas es básicamente una repetición del paso 5, con pequeños pasos adicionales. Puedes tratar esto como un ejercicio para fortalecer tu memoria al conectar el guión gráfico a las salidas y las acciones, ya que pueden ser muy confusas en la mayoría de las veces.

Una vez más, ahorran tanto su SecondViewController.h y SecondViewController.m para asegurarse de que todo se actualiza. A continuación, haga clic de nuevo en el guión gráfico y mirar el esquema del documento. Allí se dará cuenta de una esfera de color naranja que debe ser nombrado Segundo View Controller - Segundo.

Haga clic en el orbe para seleccionarlo, y un contorno azul debería aparecer en su segunda escena de la vista. A continuación, pulse Ctrl y haga clic en el segundo View Controller - En segundo lugar a arrastrar en el campo de texto, luego soltarlo.

Después de la acción, una lista de salidas se van a plantear. Seleccione "distTextBox" de la lista. Si la conexión se realiza correctamente el campo de texto parpadeará.

A continuación, pulse Ctrl y haga clic en el segundo View Controller - En segundo lugar nuevo para arrastrar en el campo Etiqueta y seleccione "distResult". Repetir el proceso de nuevo para la segunda Etiqueta situada por debajo de la 1ª etiqueta, pero elegir el "auResult" para ello. Ambos puntos de venta están ahora conectados a estas variables y solo necesitamos conectar las acciones.

Clic en la flecha hacia la derecha de la Segunda Vista Controlador - Segundo y verá un componente denominado Vista - hacer clic para seleccionarlo. Abra el inspector de la identidad en el panel de Utilidades, que también se puede activarla con el movimiento en la barra de menú superior del software y seleccione Ver> Utilidades> Mostrar la identidad del inspector. En Clase personalizada, introduzca "UIControl" o seleccionarlo en el menú desplegable.

Para que el teclado reconozca el fondo como un objeto tappable debe ser convertido en un control. Ahora otra vez en el panel Utilidades activar el inspector de conexiones por pasar a la barra de menú superior del software y seleccione Ver> Utilidades> Show Connections Inspector.

Así es como conectamos un evento de página (pulsar, pulsar, mantener, etc.) a una sola llamada de función. Mira a través de la lista de eventos hasta que encuentre Touch Down. Haga clic en el pequeño círculo situado en el lado derecho de la cita Touch Down, a continuación, arrastre y suéltelo en el segundo controlador de Vista. Se le dará 2 acciones para elegir - elegir backgroundTouchedHideKeyboard y obtendrá un destello de confirmación.

Por último, haga clic para seleccionar el botón Convertir y asegúrese de que tiene un toque de luz azul, similar a la pantalla de arriba, pero sin seleccionar todo el control de vista. En la ventana de Conexiones arrastrar el pequeño círculo de retoque Dentro luego soltarlo en el segundo controlador de vista nuevo. Elija la función llamada distanceConvert, que sólo se activará cuando el usuario toca el botón y comunicados dentro de los límites establecidos.

Construir y ejecutar para ver si su aplicación tiene éxito en la compilación. Si no hay errores todo debe funcionar correctamente. Ahora podría pasar el tiempo arreglando el texto y el diseño, o tal vez agregar un logotipo personalizado PNG.

Gracias por seguir el tutorial y los congrats, ¡acabas de hacer tu primera aplicación para el iPhone!

Descargar Xcode Project

No se puede lograr cierto paso? Aquí está el archivo del resultado para que usted pruebe y compare la diferencia.

  • Archivo de proyecto Tutorial de aplicación de iPhone

Ultimas palabras

Para concluir, sería útil hacer una visión general de los puntos clave de este tutorial. Empezamos un nuevo proyecto de aplicación para el iPhone Xcode con una navegación por pestañas. Esto incluye 2 UIViews las que añadimos un campo de texto, botones, y etiquetas. Luego escribió algo de código de Objective-C para la definición de variables de instancia (Ivars) y acciones (funciones) de los números de crisis para las conversiones.

Después de todo esto, finalmente conectados los objetos de cada variable de instancia. Esto permite que el código de aplicación de back-end Objective-C para apuntar una identificación como tempTextBox y corbata en un objeto del guión gráfico.

Esperamos que haya digerido muchas de las palabras clave y técnicas para usar Xcode. Lo más probable es que no sea un experto en la creación de aplicaciones iOS después de este tutorial. De hecho, todavía puede estar profundamente confundido en muchos de estos temas! programación iOS se trata de la práctica, por lo que no se siente triste si usted no puede entender todo de inmediato. Trate de descargar el archivo de proyecto de demostración que he proporcionado y mirar a través de familiarizarse con este tutorial, y los proyectos de Xcode en general. Un último consejo: nunca darse por vencido!

Más

Etiqueta:

Artículos relacionados

Popular

Último