xcode

Guía para principiantes del desarrollo de iOS: Creación de su primera aplicación – Parte II

En la primera parte de nuestro tutorial de iOS, lo llevé a través de una visita guiada del desarrollo de la aplicación para iPhone. Echamos un vistazo más profundo a Xcode 4 y también hicimos un breve tutorial sobre cómo crear una aplicación para iPhone. El tutorial para principiantes fue escrito para cualquiera que esté buscando iniciarse en la programación de aplicaciones de iOS.

Hoy, entraremos en el segundo segmento del tema, donde crearemos una aplicación para iPhone completamente funcional . La aplicación, con una navegación con pestañas, convertirá unidades de temperatura y unidades de distancia . No se preocupe si todavía es nuevo en Xcode. No se necesita mucho tiempo para adaptarse cómodamente a la interfaz. ¡Explicaré cada paso en detalle para que tampoco te pierdas!

Al final del tutorial, obtendrá una aplicación que no se puede insertar en el iPhone, ya que necesitará que compre un programa de desarrollador, pero podemos ejecutarlo dentro del simulador de iOS en un sistema Mac OS X. Le ofrecí los archivos del proyecto para descargarlos, que también puede consultar cuando no esté seguro de un paso determinado. Si quieres una aplicación, ¡comencemos!

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

Configuración previa: instalación de paquetes de Xcode

Si aún no lo ha hecho, necesitará obtener Xcode 4 en su computadora. Usted 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 el App Store puede conseguir todo lo que necesita. ¡Xcode 4 incluye el SDK y el simulador de iOS para crear y ejecutar aplicaciones de iPhone directamente en tu Mac!

xcode

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

También puede consultar 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 esté configurado para comenzar a programar. Afortunadamente, Xcode es una instalación única que incluye todo el material SDK que necesitará para el desarrollo de aplicaciones para iPhone.

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

1. Creación de su nuevo proyecto

Abra Xcode 4 y debería obtener una pantalla de inicio con algunas opciones predeterminadas. De la lista, seleccione “Crear un nuevo proyecto de Xcode” para abrir la ventana principal. Aquí tiene la opción de seleccionar con qué nueva plantilla comenzar. Vamos a utilizar la aplicación con pestañas .

aplicación con pestañas

Presiona “Siguiente” y debes ingresar un nombre para tu proyecto . He elegido Converter . Luego, debe ingresar el Identificador de la empresa , como com.hongkiat , que se utiliza para ordenar los directorios de compilación internos de su aplicación. Asegúrese de seleccionar “iPhone” de la familia de dispositivos , y todas las opciones a continuación están marcadas . Pulse siguiente y seleccione una ubicación para crear todos los archivos del proyecto.

opciones de proyecto

En el panel izquierdo, verá el Navegador de proyectos con un conjunto de archivos completamente nuevo. Haga clic en el archivo “Convertidor” para ver todos los archivos que contiene. Junto al Navegador de proyectos se llama Esquema del documento . Recuerde estos nombres, ya que los usaremos durante todo el tutorial.

guión gráfico de mainstoryboard

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

El archivo del guión gráfico era originalmente un archivo .xib ( nib pronunciado ) que se transfirió desde Interface Builder. La versión más reciente de Xcode 4.2 enlaza esta funcionalidad en un tipo de diagrama de flujo para facilitar un poco la edición. Al crear un nuevo proyecto, puede desmarcar la opción del guión gráfico y tendrá archivos .xib individuales para cada vista. Si se siente más cómodo con el antiguo sistema de archivos, puede usarlo, pero para este tutorial debe ceñirse al método del guión gráfico .

2. Iconos personalizados de la barra de pestañas

Primero comenzaremos a construir los componentes de la interfaz y luego pasaremos a la programación de Objective-C. Para comenzar, reemplacemos el texto de la etiqueta con iconos en la barra de pestañas . En primer lugar, diríjase y descargue el conjunto de iconos de Glyphish en el escritorio . Ofrecen un conjunto profesional con iconos 2X para la pantalla retina del iPhone 4, pero podemos trabajar con los iconos estándar gratuitos para este tutorial.

agregar archivos al grupo

De vuelta en Xcode, en su Navegador de proyectos, haga clic derecho en la primera carpeta amarilla que contiene sus vistas principales y seleccione “Agregar archivos al grupo …” . El grupo debe titularse de acuerdo con el nombre de su proyecto, en este caso es Converter .

agregar imágenes al grupo

Se abrirá una nueva ventana para seleccionar archivos para agregar a Xcode. Elija el archivo de Glyphish Icon ubicado en el escritorio (o en cualquier lugar donde lo haya guardado) y dentro del archivo de iconos , elija 61-shine.png . Haga clic en “Agregar” para que se importen al directorio de su proyecto. Repita el mismo proceso para agregar 07-map-marker.png en el directorio del proyecto.

esquema del documento

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

utilidades

Antes de agregar los íconos, también necesitamos otro menú llamado Utilidades . El panel Utilidades está habilitado de forma predeterminada, pero también puede habilitar las Utilidades seleccionando Ver> Utilidades> Mostrar utilidades en la barra de menú superior del software.

elemento de la barra de pestañas

De vuelta en el esquema del documento, notará cómo la primera vista y la segunda vista tienen cada una su cuadro de escena y su controlador de vista. Haga clic en la flecha izquierda de First View Controller – Primero para mostrar más elementos y debería ver el elemento de la barra de pestañas . Haga clic para seleccionarlo y , si no puede ver nada, intente desplazarse hacia la derecha en el visor de guión gráfico. Todas las ediciones de las pestañas se realizarán en el Inspector de atributos , que puede mostrar seleccionando Ver> Utilidades> Mostrar inspector de atributos .

seleccionar imagen para el elemento de la barra

Ahora mire el panel Utilidades en el lado derecho del editor, y verá la propiedad Título e Imagen debajo del Elemento de la barra de pestañas. Haga clic en la flecha hacia abajo de la opción Imagen , luego seleccione 61-shine.png , el icono se asignará al elemento de la barra de pestañas de la primera vista. También puede eliminar el título del elemento de la barra de pestañas para que no haya texto debajo del icono.

Para la segunda vista, puede volver al esquema del documento y hacer clic en la flecha hacia abajo del controlador de la segunda vista: segundo para mostrar el elemento de la barra de pestañas: segundo. Haga clic en “Elemento de la barra de pestañas – Segundo” y observe el panel Utilidades en el lado derecho del editor para la propiedad Título e imagen debajo del Elemento de la barra de pestañas. Haga clic en la flecha hacia abajo de la opción Imagen, luego seleccione 07-map-marker.png , el icono se asignará al elemento de la barra de pestañas de la segunda vista. Elimina 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 entremos 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.

cambiar el encabezado del texto

Para cada vista predeterminada, se nos proporciona un encabezado de texto básico y un objeto de descripción . Haga doble clic en el texto “Primera vista” del controlador de primera vista en el editor visual y cámbielo a “Convertidor temporal” . Repita el proceso para el controlador de segunda vista, pero cambie el nombre a “Conversor de distancia”. Puede seleccionar el texto y pasar a su Inspector de atributos en el panel Utilidades para cambiar la fuente, el color, el tamaño, etc.

cambiar el texto de la descripción

Para el objeto de descripción debajo del encabezado de texto del controlador de la primera vista, puede hacer doble clic en el texto de descripción y darle una descripción básica de lo que haremos en cada vista, como ” Ingrese el valor a continuación para convertir Fahrenheit en Celsius “. Puede repetir el proceso para dar una descripción básica del objeto de descripción del controlador de la segunda vista , pero cambie la descripción a ” Ingrese el valor a continuación para convertir millas en kilómetros y unidades astronómicas”.

agregar campo de texto

Ahora necesitamos crear un campo de texto para la entrada de valor. En la parte inferior del panel Utilidades ubicado en el lado derecho del software, debería ver la biblioteca de objetos, que también se puede habilitar seleccionando Ver> Utilidades> Mostrar biblioteca de objetos . En su menú desplegable, elija Controles y seleccione un Campo de texto , luego arrástrelo al Controlador de primera vista .

agregar marcador de posición

Muévase por el campo de texto para centrarlo y haga clic para cambiar el tamaño del cuadro al tamaño que prefiera . Si consulta nuestro inspector de atributos en el panel Utilidades, también puede cambiar el color del texto del campo de entrada. A continuación, agregue el texto, “Ingrese la temperatura …”, en el campo Marcador de posición (no en el campo Texto) .

configuraciones adicionales

Ahora hagamos algunas configuraciones 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 , luego cambie de “Nunca aparece” a “Aparece durante la edición” . Esto le permite eliminar toda la entrada a la vez sin tocar el botón x varias veces.

A continuación, vuelva a mirar el panel hasta encontrar la propiedad Teclado con un menú desplegable. He cambiado esto desde “Default” para “teclado numérico” lo que la entrada se limitará a sólo enteros.

botón agregar

A continuación, crearemos un botón para que podamos hacer clic en él para convertir el valor. Arrastre un botón de rectángulo redondo de la biblioteca de objetos ubicada en la parte inferior del panel de utilidades y colóquelo debajo del campo de texto . Haga doble clic para agregar el texto “¡Convertir!” . Nuevamente, pase algo de tiempo en el inspector de atributos para darle un poco de sabor al estilo, aunque se ve bien por defecto.

agregar etiqueta

Solo necesitamos arrastrar el objeto Etiqueta de la Biblioteca de objetos al Controlador de primera vista para manejar el texto de salida de las conversiones. Cuando arrastra la etiqueta a la vista, de forma predeterminada se le proporciona un texto estático, como “Etiqueta”. Debe eliminar el texto para que no se muestre nada cuando se inicie la aplicación. Cambie el tamaño del cuadro para hacerlo más ancho y colóquelo debajo del botón Convertir.

diseño mejorado

Antes de pasar al controlador de segunda vista, puede mejorar el diseño del controlador de primera vista . Se recomienda mejorar el diseño ahora para que luego, cuando dupliquemos los elementos del controlador de primera vista en el controlador de segunda vista, no necesitemos volver a diseñar el controlador de segunda vista.

Ahora hagamos el mismo proceso para el controlador Second View. Podemos ahorrar tiempo copiando todo de la Primera Vista, pero también necesitamos cambiar ciertas cosas para que coincidan con la función del Controlador de Segunda Vista.

seleccionar todos los elementos

Haga clic en la “Vista” del controlador de la segunda vista en el esquema de su documento, dentro de la vista arrastre para seleccionar todos los elementos y eliminarlos . Esto solo debería eliminar un encabezado de texto y un objeto de descripción para que la segunda vista esté totalmente vacía. Ahora seleccione todos los elementos en la Primera Vista y presione cmd + c / cmd + v para copiar / pegar en la Segunda Vista vacía. A continuación se muestran los cambios de objetos necesarios en la segunda vista:

  • Encabezado de texto: cambie a “Conversor de distancia”.
  • Campo de texto: el marcador de posición dice “Ingresar distancia …” y establece la propiedad del teclado en “Teclado numérico”.
  • Etiquetas: agregue 1 etiqueta más debajo de la etiqueta existente. La etiqueta superior mostrará el valor de kilómetros, mientras que la etiqueta inferior mostrará el valor de unidades astronómicas.

diseño de controlador de segunda vista

Esto es lo que logrará al final, puede notar que el resultado de la Segunda Vista es casi idéntico al de la Primera Vista.

4. Programación en primera vista

Suficientes gráficos por ahora, ¡pasemos a la programación! Podemos comenzar a construir la funcionalidad de backend para nuestra primera vista más simple. Seleccione FirstViewController.h en su navegador de proyectos.

diseño firstviewcontroller.h

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 FirstViewController.h :

#import <UIKit / UIKit.h>

@interface FirstViewController: UIViewController

@fin

Ahora reemplace el código de arriba con el código de abajo . La palabra clave @interface está creando una subclase de UIViewController, que es la vista predeterminada 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, conservar) IBOutlet UITextField * tempTextBox;
- (IBAction) degreeConvert: (id) remitente;
- (IBAction) backgroundTouchedHideKeyboard: (id) remitente;
@fin

Necesitamos declarar IBOutlets (Interface Builder Outlets) para cada uno de los elementos de nuestra aplicación. Esto es lo que está creando @property : una nueva salida para que Xcode se conecte 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.

Acerca de degreeConvert , tomará el valor en nuestro campo de texto y realizará conversiones de Fahrenheit a Celsius. De manera similar, backgroundTouchedHideKeyboard es una pequeña acción que agregaré para ocultar el teclado cuando el usuario toque cualquier parte del fondo.

diseño firstviewcontroller.m

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

Agregue el @synthesize tempTextBox, calcResult;en FirstViewController.m para que las primeras líneas se vean como a continuación:

#importar "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 allá, veamos las dos funciones que he escrito previamente. Si todavía es nuevo en la sintaxis de Objective-C, puede parecer un poco extraño. Pero con el tiempo se acostumbrará a las estructuras, pegue el código a continuación en el archivo .

- (nulo) gradoConvertir: (id) remitente 
{
    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];
}

Primero tenemos degreeConvert que no acepta parámetros y devuelve void. Este es el método llamado cuando un usuario presiona el botón de conversión en la primera vista. Se establece una variable fahren para extraer el valor de lo que haya ingresado el usuario. Luego podemos calcular otra variable celsius con matemáticas básicas.

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

El resto de nuestra función degreeConvert crea una nueva cadena (NSString) para almacenar la conversión Celsius y el uso de la sintaxis de puntos agrega esto a nuestro campo de etiqueta. Si está familiarizado con la programación basada en C (Java, PHP, C # / C ++, Perl), algunos de estos términos deberían resultarle familiares.

Ahora, busque el código a continuación :

- (vacío) viewDidUnload
{
    [super viewDidUnload];

    // Libera las subvistas retenidas de la vista principal.
    // por ejemplo, self.myOutlet = nil;
}

Reemplace el código anterior con el código siguiente :

- (vacío) viewDidUnload
{
    [super viewDidUnload];

    // Libera las subvistas retenidas de la vista principal.
    // por ejemplo, self.myOutlet = nil;
    self.tempTextBox = nil;
    self.calcResult = nil;
}

En la parte inferior de nuestro FirstViewController.m , hice una recolección de basura para las variables que sintetizamos. Deberíamos liberar todas las diferentes subvistas de la memoria que incluyen nuestro campo de texto y la etiqueta de salida. El conteo automático de referencias (ARC) desasignará automáticamente las variables de la memoria, lo que ahorrará mucho estrés en los proyectos de iOS.

5. Conectando acciones y salidas

¡Este es el paso final para la Primera Vista y conectaremos nuestros elementos de front-end con el código de back-end ! Al crear aplicaciones de iOS, hay que completar 3 segmentos principales: agregar los elementos físicos de la interfaz de usuario , escribir el código del programa y, finalmente, conectar los dos . ¡Este segmento conectará todos los componentes de nuestra First View para que funcione y funcione perfectamente!

Guardar tanto su FirstViewController.h y FirstViewController.m para asegurarse de que todo se actualiza. Luego, vuelva a hacer clic en el guión gráfico y observe el esquema del documento . Allí notará un orbe naranja que debería llamarse First View Controller – First .

conectar temptextbox

Haga clic en el orbe para seleccionarlo y debería aparecer un contorno azul en su escena de Primera vista. Ahora presione Ctrl y haga clic en el controlador de primera vista: primero, arrastre al campo de texto y luego suéltelo .

seleccionar temptextbox

Después de la acción, aparecerá una lista de puntos de venta . Seleccione “tempTextBox” de la lista . Si la conexión es exitosa, el campo de texto parpadeará .

conectar etiqueta

Ahora presione Ctrl y haga clic en el Controlador de Primera Vista – Primero nuevamente para arrastrar al campo Etiqueta y seleccione “calcResult” . Ambos puntos de venta están ahora conectados a estas variables y solo necesitamos conectar las acciones.

cambiar clase personalizada

Haga clic en la flecha derecha del Controlador de Primera Vista – Primero y verá un componente llamado Vistahaga clic para seleccionarlo . Abra su inspector de identidad en el panel de Utilidades, que también puede habilitar moviéndose a la barra de menú superior del software, y seleccione Ver> Utilidades> Mostrar inspector de identidad . En Clase personalizada, ingrese “UIControl” o selecciónelo en el menú desplegable.

Para que el teclado reconozca el fondo como un objeto que se puede tocar, debe convertirse en un control. Ahora, en el panel Utilidades, active el inspector de conexiones moviéndose a la barra de menú superior del software y seleccione Ver> Utilidades> Mostrar inspector de conexiones .

conectar evento de página

Así es como conectamos un evento de página (deslizar, tocar, mantener presionado, etc.) a una sola llamada de función. Mire la lista de eventos hasta que encuentre Touch Down . Haga clic en el pequeño círculo ubicado en el lado derecho del evento Touch Down , luego arrástrelo y suéltelo en el First View Controller . Se le darán 2 acciones para seleccionar: elija backgroundTouchedHideKeyboard y obtendrá un flash de confirmación.

evento de botón de conexión

Finalmente, haga clic para seleccionar el botón Convertir y asegúrese de que tenga un resaltado azul , similar a la captura de pantalla anterior pero sin seleccionar todo el Control de vista . En el Inspector de conexiones, arrastre el pequeño círculo de Touch Up Inside y luego suéltelo en el First View Controller nuevamente . Elija la función llamada degreeConvert , que solo se activará cuando el usuario toque el botón y lo suelte dentro de los límites establecidos.

6. Transferir 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 poder ingresar algunos valores en el campo de texto y presionar convertir para ver el resultado en grados Celsius. Si recibe algún error, intente descargar el proyecto de demostración en la última sección de este artículo para comparar las diferencias y corregir los errores.

Asumiré que ya ha creado el diseño para la segunda vista en la sección anterior. En lugar de generar 1 conversión (Fahrenheit> Celsius), nuestra Segunda Vista generará 2 valores ( Millas> Kilómetros y Millas> Unidades astronómicas ). Entonces, todo lo que tenemos que hacer es migrar el código Objective-C de First View y reorganizar todo para que funcione correctamente para nuestra Second View , luego terminar conectando el guión gráfico a nuestras nuevas acciones y salidas.

Deberíamos comenzar con el código del encabezado y pasar a la implementación. A continuación, agregué el código completo de mi archivo SecondViewController.h. Es básicamente un clon del encabezado del controlador de primera vista, pero con una propiedad adicional vinculada al segundo elemento UILabel.

Nuevamente, debe buscar el siguiente código en SecondViewController.h :

#import <UIKit / UIKit.h>

@interface SecondViewController: UIViewController

@fin

Reemplace el código anterior con el código siguiente :

#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) distanceConvert: (id) remitente;
- (IBAction) backgroundTouchedHideKeyboard: (id) remitente;
@fin

Puede notar que he cambiado todos los nombres de instancias para las acciones y salidas . distTextBox ahora mantendrá nuestra entrada de texto para la distancia. distResult es la primera etiqueta de resultado de distancia (kilómetros) y auResult tendrá 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 usando la jerarquía MVC para separar las funciones de la aplicación (implementación) del controlador entre los objetos del guión gráfico. Si su SecondViewController.h tiene el mismo aspecto que el mío anterior, guarde los cambios y seleccione SecondViewController.m . Volveré a dividir mi código en dos partes.

El siguiente código es de la parte superior de mi SecondViewController.m. Contiene la declaración @synthesize para crear setters y getters para cada variable de instancia. Sé que este concepto de sintetizar variables de instancia puede resultar muy confuso al principio. Recomiendo este hilo de StackOverflow que puede ayudar a aclarar las cosas.

Ahora, busque el código siguiente en SecondViewController.m :

#importar "SecondViewController.h"

@implementation SecondViewController

Reemplace el código anterior con el código siguiente :

#importar "SecondViewController.h"

@implementation SecondViewController
@synthesize distResult, auResult, distTextBox;

- (void) distanceConvert: (id) remitente
{
    millas dobles = [distTextBox.text doubleValue];
    doble km = millas * 1,61; // multiplica 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];
}

La nueva acción distanceConvert se llamará una vez que el usuario toque el botón Convertir. Las millas variables extraerán el número de distTextBox, mientras que km y au realizan algunas conversiones matemáticas básicas para obtener sus datos. Luego, usando 2 líneas, asignamos memoria para 2 objetos NSString que contienen la información de salida Kilómetro y AU. Usando la sintaxis de puntos, invocamos la propiedad .text para cambiar el texto de UILabel.

Ahora, busque el código a continuación:

- (vacío) viewDidUnload
{
    [super viewDidUnload];

    // Libera las subvistas retenidas de la vista principal.
    // por ejemplo, self.myOutlet = nil;
}

Reemplace el código anterior con el código siguiente :

- (vacío) viewDidUnload
{
    [super viewDidUnload];

    // Libera las subvistas retenidas de la vista principal.
    // por ejemplo, self.myOutlet = nil;
    self.distResult = nil;
    self.auResult = nil;
    self.distTextBox = nulo;
}

Y ahora el último fragmento de código que se encuentra al final de SecondViewController.m. viewDidUnload se llama después de que nuestra vista termina de compilarse y mostrarse. Establecemos las tres propiedades sintetizadas anteriormente en nil (nulo en Objective-C) y liberamos su instancia de la memoria. La aplicación está casi completa después de que terminamos de conectar el guión gráfico a los puntos de venta y las acciones.

7. Conexiones de la segunda vista

El proceso de creación de vistas es básicamente una repetición del paso 5, con pequeños pasos adicionales. Puede tratar esto como un ejercicio para fortalecer su memoria sobre cómo conectar el guión gráfico con medios y acciones, ya que pueden ser muy confusos en la mayoría de los casos.

Una vez más, ahorran tanto su SecondViewController.h y SecondViewController.m para asegurarse de que todo se actualiza. Luego, vuelva a hacer clic en el guión gráfico y observe el esquema del documento . Allí notará un orbe naranja que debería llamarse Controlador de segunda vista – Segundo .

conectar disttextbox

Haga clic en el orbe para seleccionarlo , y debería aparecer un contorno azul en su escena Second View. Ahora presione Ctrl y haga clic en el Controlador de segunda vista – Segundo para arrastrar al campo de texto , luego suéltelo .

Después de la acción, aparecerá una lista de puntos de venta . Seleccione “distTextBox” de la lista . Si la conexión es exitosa, el campo de texto parpadeará .

conectar distresult

Ahora presione Ctrl y haga clic en Second View Controller – Second nuevamente para arrastrar al campo Etiqueta y seleccionar “distResult” . Repita el proceso nuevamente para la segunda etiqueta ubicada debajo de la primera etiqueta, pero elija “auResult” para ella. Ambos puntos de venta están ahora conectados a estas variables y solo necesitamos conectar las acciones.

segunda vista: cambiar la clase personalizada

Haga clic en la flecha hacia la derecha del Controlador de la segunda vista – Segundo y verá un componente llamado Vistahaga clic para seleccionarlo . Abra su inspector de identidad en el panel de Utilidades, que también puede habilitar moviéndose a la barra de menú superior del software, y seleccione Ver> Utilidades> Mostrar inspector de identidad . En Clase personalizada, ingrese “UIControl” o selecciónelo en el menú desplegable.

Para que el teclado reconozca el fondo como un objeto que se puede tocar, debe convertirse en un control. Ahora, en el panel Utilidades, active el inspector de conexiones moviéndose a la barra de menú superior del software y seleccione Ver> Utilidades> Mostrar inspector de conexiones .

segunda vista: evento de página de conexión

Así es como conectamos un evento de página (deslizar, tocar, mantener presionado, etc.) a una sola llamada de función. Mire la lista de eventos hasta que encuentre Touch Down . Haga clic en el pequeño círculo ubicado en el lado derecho del evento Touch Down , luego arrástrelo y suéltelo en el controlador de segunda vista . Se le darán 2 acciones para seleccionar: elija backgroundTouchedHideKeyboard y obtendrá un flash de confirmación.

segunda vista: evento de botón de conexión

Finalmente, haga clic para seleccionar el botón Convertir y asegúrese de que tenga un resaltado azul , similar a la captura de pantalla anterior pero sin seleccionar todo el Control de vista . En el Inspector de conexiones, arrastre el pequeño círculo de Touch Up Inside y luego suéltelo en el Controlador de segunda vista nuevamente . Elija la función llamada distanceConvert , que solo se activará cuando el usuario toque el botón y lo suelte dentro de los límites establecidos.

Compile y ejecute para ver si su aplicación se compila correctamente. Si no hay errores, todo debería funcionar correctamente. Ahora puede dedicar tiempo a arreglar el texto y el diseño, o tal vez agregar un PNG de logotipo personalizado.

Gracias por seguir el tutorial y felicidades, ¡acaba de crear su primera aplicación para iPhone que funcione!

Descargar proyecto Xcode

¿No puedes lograr cierto paso? Aquí está el archivo de resultados para que pruebe y compare la diferencia.

Ultimas palabras

Para terminar, sería útil hacer una descripción general de los puntos clave de este tutorial. Comenzamos un nuevo proyecto de aplicación para iPhone Xcode con una navegación con pestañas . Esto incluye 2 UIViews a las que agregamos un campo de texto, un botón y etiquetas . Luego escribimos algo de código Objective-C para definir Variables de instancia (ivars) y Acciones (funciones) para procesar los números de las conversiones.

Después de todo esto, finalmente conectamos Objetos para cada Variable de Instancia . Esto permite que el código de implementación del backend de Objective-C apunte a un ID como tempTextBox y lo vincule a un objeto de guión gráfico .

Es de esperar que haya asimilado 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 de iOS después de este tutorial. De hecho, ¡aún puede estar profundamente confundido sobre muchos de estos temas! La programación de iOS se trata de práctica , así que no se sienta triste si no puede entender todo de inmediato. Intente descargar el archivo de proyecto de demostración que le proporcioné y mire para familiarizarse con este tutorial y los proyectos de Xcode en general. Un último consejo: ¡ nunca te rindas!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *