Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi; Parte 1

February 17|1 Vistas|

Resumen: Esta es una entrada del blog del miembro del equipo de Tutorial de iOS, Adam Burkepile, consultor de software a tiempo completo e independiente desarrollador de iOS. Echa un vistazo a su última aplicación Pocket No Agenda, o seguirlo en Twitter. ¡Ord

Advertisement

Esta es una entrada del blog del miembro del equipo de Tutorial de iOS, Adam Burkepile, consultor de software a tiempo completo e independiente desarrollador de iOS. Echa un vistazo a su última aplicación Pocket No Agenda, o seguirlo en Twitter.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

¡Ordena algunos Storyboards y bloques en este tutorial!

Los bloques son una extensión increíblemente potente de C / Objective-C. Ellos le permiten envolver trozos de código en unidades autónomas y pasarlas como objetos.

Más y más APIs están requiriendo bloques en iOS, así que realmente necesitas entenderlos para hacer casi cualquier cosa. Sin embargo, la sintaxis y los aspectos sutiles a menudo confunden a los principiantes. No temas, ¡ahí es donde entra este tutorial! :]

En esta serie de tutoriales en dos partes, vas a crear un pequeño proyecto iOS llamado iOS Diner. La aplicación en sí será simple: los usuarios eligen los elementos de un menú para crear un pedido, como si estuvieran a punto de comer en un restaurante. ¡Tenga cuidado, este proyecto podría hacer que usted tenga hambre!

En esta primera parte del tutorial, crearemos la interfaz de usuario de la aplicación. Esta será una revisión de iOS 5 Storyboards, incluyendo una breve actualización de cómo crear y usar servicios web para descargar el menú diner en formato JSON.

Nota: Si usted ya es bastante cómodo con guiones gráficos y Interface Builder, es posible que desee omitir la parte 1 e ir directamente a la parte 2, donde empezamos usando bloques. Esta parte se centra sólo en Storyboards e Interface Builder.

La segunda parte del tutorial hará uso extensivo de bloques para codificar la lógica de la aplicación. Demuestra el uso de bloques para procesamiento asincrónico, tareas en segundo plano, alternativas a API estándar y mucho más.

Si tiene hambre de saber más, siga leyendo!

Empezando

En primer lugar, vamos a abrir Xcode abierto e iniciar un nuevo proyecto con la plantilla de aplicación iOS \ Application \ Single View.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Introduzca "iOSDiner" para el nombre del producto, introduzca el identificador de empresa que utilizó al crear su ID de aplicación e ingrese "IOD" para el prefijo de clase.

Establezca la familia de dispositivos sólo en el iPhone. Asegúrese de que Use Storyboard y Use Automatic Reference Counting estén marcados, pero que las Unidades de prueba de inclusión y cualquier otra casilla de verificación están desmarcadas.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

La siguiente pantalla le pregunta dónde desea guardar el proyecto. Puede guardarlo en cualquier lugar.

Déle una carrera rápida y debería ver una pantalla en blanco.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

En la sección Orientaciones de dispositivo admitidas del menú Información de implementación de iPhone / iPod (en la ficha Resumen), desactive el modo Retrato para que la aplicación sólo se ejecute en modo horizontal.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Lo primero que harás es configurar la vista. Para hacer esto, necesitamos algunos gráficos. Hemos recibido algunos maravillosos arte de la esposa de Ray, Vicki - puedes descargarlo aquí. Necesitamos agregar los recursos de arte al proyecto.

Nunca me ha gustado mucho cómo Xcode maneja los archivos coincidentes en el proyecto y en el sistema de archivos, así que agrego recursos manualmente en el sistema de archivos la mayoría del tiempo. Para ello, utilice Finder para navegar hasta la carpeta del proyecto. Cree una carpeta llamada "Recursos" dentro de la carpeta del proyecto. A continuación, cree una carpeta denominada "Imágenes" dentro de la carpeta Recursos.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Copie la ilustración del archivo ZIP que descargó en la carpeta Imágenes y, a continuación, arrastre la carpeta Recursos en la carpeta iOSDiner en Xcode, tal como se muestra en la captura de pantalla de abajo.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Asegúrese de que el siguiente cuadro de diálogo para agregar archivos esté configurado según la siguiente captura de pantalla y haga clic en "Finalizar" para agregar los archivos.
Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Ahora deberías ver una carpeta de Recursos dentro de Xcode que tiene una subcarpeta Imágenes dentro de ella y que a su vez contiene las imágenes que has descargado - exactamente de la misma manera que las carpetas están estructuradas bajo el sistema de archivos.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Adición de imágenes

Seleccione MainStoryboard.storyboard.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Si no ve la segunda columna que dice "Ver escena del controlador", haga clic en el botón Expandir en la parte inferior (como se indica en la imagen de abajo).

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Usted va a agregar las imágenes al storyboard en la forma de UIImageViews y UIButtons. Para facilitar las cosas, expanda la barra lateral Utilidades y seleccione la Biblioteca multimedia.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Aquí vemos todas las imágenes que hemos agregado al proyecto anteriormente. Te darás cuenta de que hay dos de cada imagen. Esto se debe a que hay una versión normal y una retina (@ 2x) de cada imagen.

Sólo nos interesan las versiones normales. Puede comprobar qué es lo que selecciona una imagen y presiona la barra de espacio. Verá una ventana emergente. Las imágenes sin @ 2x en el nombre son las versiones normales.

Arrastre "bg_wall.png" en la vista raíz y colóquela como se indica a continuación. Si no está seguro de que la imagen se coloca correctamente, puede cambiar al Inspector de tamaño (la quinta pestaña de la barra lateral Utilidades) para especificar las coordenadas X e Y exactas.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Ahora haga lo mismo con las siguientes imágenes:

  • Persona.png
  • Sign_theiOSdiner.png
  • Chalkboard.png
  • Bg_counter.png
  • Total_field.png
  • Food_box.png

Tenga en cuenta que puede hacer que una imagen vea las dimensiones exactas de una imagen seleccionando la vista de imagen y vaya a Editor \ Size to Fit Conent (o use el atajo de teclado Command-Equals).

A medida que arrastra y posiciona las imágenes, su vista debe desarrollarse según las siguientes imágenes:

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Una vez que haya terminado, dé al proyecto otra ejecución.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

¡Oye! Casi parece una aplicación!

A continuación, vamos a agregar las porciones de la interfaz de usuario. En la barra lateral Utilidades de Xcode, cambie a la biblioteca de objetos.

Arrastre un "botón Rect Ronda" en el centro de la vista, por encima del monitor. Haga doble clic en el botón que acaba de colocar y ajuste el texto a "-1".

En la barra lateral Utilidades, seleccione el Inspector de atributos. Asegúrese de que el botón que acaba de colocar es el elemento seleccionado actualmente. Establezca el atributo Background en "button_silver.png"

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Mantenga presionada la tecla Opción / Alt y arrastre el botón -1 a la derecha. Esto creará una copia de ese objeto. Haga doble clic en este nuevo botón y establezca el texto en "+1".

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Arrastre otro "botón redondo de Rect" justo a la izquierda del monitor. Establezca el Tipo de botón en Personalizado y el atributo de fondo de este botón en button_arrow_left.png. "

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Hmm. Eso no parece muy correcto. El problema es que cuando se establece la imagen como imagen de fondo para el botón, Xcode estira la imagen al tamaño del botón.

Si observa el archivo en sí, verá que las dimensiones son 19 × 33. Así que todo lo que necesita hacer es establecer el tamaño del botón para que coincida con el tamaño de la imagen.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Seleccione el botón. Seleccione el Inspector de tamaño y establezca el Ancho y la Altura en 19 y 33, respectivamente.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

¡Eso se parece más a él! Ahora necesitas un botón de flecha derecha en el otro lado, así que presiona Option / Alt y arrastra ese botón al otro lado. Cambie el fondo del nuevo botón a button_arrow.png.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

¡Un último botón para agregar! Arrastre otro "botón redondo de Rect" debajo de la pizarra.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Establezca el tipo de botón en Personalizado y el atributo de fondo en total_field.png.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

De nuevo, necesitamos configurar el tamaño para que coincida con la imagen, así que selecciona el Inspector de tamaño. Establezca Width y Height en 134 y 51, respectivamente. A continuación, haga doble clic en el botón y establezca el texto en "Total".

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Proporcione al proyecto otra ejecución.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Se ve muy bien! Lo siguiente que tenemos que añadir al storyboard son las etiquetas y el cuadro de vista previa.

Seleccione de nuevo la biblioteca de objetos. Arrastre un UILabel en la imagen de la pizarra. Utilice las manijas de cambio de tamaño para que sea del mismo tamaño que la pizarra.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

En el Inspector de atributos, establezca Líneas en 0 (que habilite etiquetas de varias líneas), cambie el Color de texto a blanco y cambie la Fuente a Marker Felt 17.0 (haga clic en el símbolo "T", seleccione Personalizado y luego Marker Felt). Normalmente, encuentro a Marker Felt un crimen contra los globos oculares, pero en este caso parece encajar.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Arrastre un UIImageView sobre el monitor en el centro y cambie su tamaño para que coincida con el tamaño del monitor.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

En el inspector de atributos, cambie el modo a Aspect Fit.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Arrastre otro UILabel sobre el signo en la parte inferior derecha. Cambie el tamaño para que sea aproximadamente igual que la región gris y establezca la alineación en Centrado.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Configuración de IBOutlets e IBActions

Ahora necesitamos establecer la conexión entre la interfaz de usuario que acabamos de crear y nuestro código. Aquí es donde IBOutlets e IBActions vienen. La parte IB aquí se refiere a Interface Builder que se utiliza para crear interfaces de usuario en Xcode.

  • Un IBOutlet es básicamente una conexión entre un elemento de interfaz de usuario (por ejemplo, una etiqueta o un botón) y la referencia a ese elemento en nuestro código.
  • Un IBAction es una acción (o un método, si se prefiere) en nuestro código que puede ser conectado a un evento específico (tocando un botón, por ejemplo) en la interfaz diseñamos.

Así que vamos a escribir algún código para conectar los diversos elementos de la interfaz de usuario a través de IBOutlets e IBActions.

Cierre la barra lateral Utilidades y abra el editor Asistente. Dependiendo de cómo el editor asistente esté configurado para mostrar, la pantalla podría (o no) parecer la siguiente captura de pantalla. Si desea cambiar la forma en que se muestra el editor Asistente, puede hacerlo a través de la opción de menú Ver - Editor de Asistente.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Comencemos con los botones. Seleccione el botón "-1", mantenga presionada la tecla Control y arrástrela al código en la vista Editor. Esto automatizará la creación de un IBOutlet para el botón.

Para este objeto, todo lo que necesitas hacer es nombrarlo. Me gusta prefijar todos mis puntos de venta con "ib" por lo que hace más fácil encontrar todos mis puntos de venta en Xcode autocomplete. Nombre este objeto "ibRemoveItemButton" y haga clic en Conectar.

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Ahora haga lo mismo para el botón "+1", y el nombre de "ibAddItemButton".

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

A continuación, configure los puntos de venta para los botones de flecha roja. Nombre de ellos "ibPreviousItemButton" y "ibNextItemButton".

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Configure una salida para el botón total denominado "ibTotalOrderButton".

Ahora configure las salidas para las etiquetas y la vista de la imagen. De izquierda a derecha, nombrarlos:

  • IbChalkboardLabel
  • IbCurrentItemImageView
  • IbCurrentItemLabel

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Su IODViewController.h debería tener el siguiente aspecto:

  @interface IODViewController: UIViewController @property (débil, no atómico) IBOutlet UIButton * ibRemoveItemButton;  @property (débil, no atómico) IBOutlet UIButton * ibAddItemButton;  @property (débil, no atómico) IBOutlet UIButton * ibPreviousItemButton;  @property (débil, no atómico) IBOutlet UIButton * ibNextItemButton;  @property (débil, no atómico) IBOutlet UILabel * ibChalkboardLabel;  @property (débil, no atómico) IBOutlet UIImageView * ibCurrentItemImageView;  @property (débil, no atómico) IBOutlet UILabel * ibCurrentItemLabel;  @fin 

Finalmente, vamos a agregar las IBAcciones para los UIButtons. Estos son los métodos que se llaman en respuesta a ciertos eventos (Touch Up Inside, Touch Up, Touch Cancel, etc.). Con botones, la mayor parte del tiempo estamos usando Touch Up Inside.

Seleccione de nuevo el botón "-1". Control-arrastre hacia el archivo .h de nuevo.

Asegúrese de recordar cambiar el tipo de conexión a la acción.

Esto es un IBAction, por lo que prefijo el mío con "iba." Si desea seguir esta convención, el nombre de esta salida "ibaRemoveItem". A continuación, haga clic en Conectar ".

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Haga lo mismo para el botón "+1", nombrando la acción "ibaAddItem" ...

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

... y para el botón Triángulo Izquierdo Rojo, nombrando la acción "ibaLoadPreviousItem" ...

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

... y no olvide el botón Rojo del triángulo derecho. Llame a la acción "ibaLoadNextItem":

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Finalmente, agregue una IBAction para el botón "Total" en la parte inferior izquierda, y denomínelo "ibaCalculateTotal".

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Configuración del servicio web

Antes de llegar a la codificación, es hora de configurar el servicio web. No voy a explicar esto en demasiados detalles, ya que ya hay varios tutoriales en este sitio que hacen un buen trabajo que cubre servicios web (Cómo escribir un simple PHP / MySQL Web Service para una aplicación iOS y cómo escribir un IOS que utiliza un servicio web).

El siguiente código muestra cómo se verá el código PHP para el servicio web:

  <$ Php function getStatusCodeMessage ($ status) {$ codes = Array (100 => 'Continuar', 101 => 'Conmutación de protocolos', 200 => 'OK', 201 => ' , 203 => 'Contenido parcial', 300 => 'Múltiples opciones', 301 => 'Movido permanentemente', 203 => 'Información no autorizada' , 302 => 'Encontrado', 303 => 'Ver Otros', 304 => 'No Modificado', 305 => 'Usar Proxy', 306 => ' 404 => 'No se ha encontrado', 405 => 'Método no permitido', 406 => 'No se ha autorizado', 402 => ' 407 => 'Tiempo de espera de la petición', 409 => 'Conflicto', 410 => 'Gone', 411 => 'Longitud requerida', 412 => 'Precondition Failed' , 413 => 'Solicitud de entidad demasiado grande', 414 => 'Solicitud URI demasiado larga', 415 => 'Tipo de soporte no admitido', 416 => 'Rango solicitado no satisfactorio', 417 => 'Expectativa fallada' => 'Error de servidor interno', 501 => 'No implementado', 502 => 'Mala puerta de enlace', 503 => 'Servicio no disponible', 504 => 'Gateway Timeout' ;  Return (isset ($ codes [$ status]))?  $ Codes [$ status]: '';  } // Método auxiliar para enviar un código de respuesta HTTP / función de mensaje sendResponse ($ status = 200, $ body = '', $ content_type = 'text / html') {$ status_header = 'HTTP / 1.1'.  $ Estado.  Unesdoc.unesco.org unesdoc.unesco.org  GetStatusCodeMessage (estado $);  Encabezado ($ status_header);  Encabezado ('Content-type:'. $ Content_type);  Echo $ cuerpo;  } Class InventoryAPI {function getInventory () {$ inventario = array (array ("Nombre" => "Hamburger", "Precio" => 0.99, "Image" => "food_hamburger.png" > "Cheeseburger", "Price" => 1.20, "Image" => "food_cheeseburger.png"), array ("Name" => "Fries", "Price" => 0.69. Png "), matriz (" Name "=>" Anillos de cebolla "," Price "=> 0.69," Image "=>" food_onion-rings.png " "=> 0.75," Image "=>" food_soda.png "), matriz (" Nombre "=>" Shake "," Precio "=> 1.20," Image "=)  SendResponse (200, json_encode ($ inventario));  }} Sueño (5);  $ Api = nuevo InventoryAPI;  $ Api-> getInventory ();  ?> 

Mi servicio web es un script PHP bastante simple que devuelve una matriz que ha sido codificada por JSON. La matriz contiene lo que se conoce como arrays asociativos en PHP (denominados diccionarios bajo Objective-C), que contienen el nombre, precio y nombre del archivo de imagen para el elemento.

La única otra cosa de la nota en el código anterior es la declaración de sueño (5) 3 líneas desde el fondo. Estoy utilizando esto para simular un servicio web lento, a fin de mostrar mejor cómo los bloques pueden ayudar a realizar operaciones asíncronas.

Puede copiar el código anterior en un archivo con la extensión .php y alojarlo en alguna parte o simplemente usar el mío en http://adamburkepile.com/inventory/.

¿A dónde ir desde aquí?

Un ejemplo de proyecto para esta parte del tutorial se puede descargar aquí.

Wow, eso era un montón de cosas que no tenían nada que ver con bloques! Pero ahora que terminamos de configurar la vista y el servicio web, podemos llegar a la parte divertida en la próxima entrega: codificación!

Así que ponte a la segunda parte, donde usaremos bloques para que nuestra aplicación diner funcione completamente.

Hasta entonces, únase a la discusión del foro a continuación con sus preguntas, comentarios y sugerencias!

Cómo utilizar bloques en iOS 5 Tutorial && num; 8211 & semi;  Parte 1

Esta es una entrada del blog del miembro del equipo de Tutorial de iOS, Adam Burkepile, consultor de software a tiempo completo e independiente desarrollador de iOS. Echa un vistazo a su última aplicación Pocket No Agenda, o seguirlo en Twitter.

Etiqueta:

Artículos relacionados

Popular

Último