Aprende a programar juegos para iOS: conociendo Xcode (II)

Aprende a programar

Tras la pasada entrega, titulada aprende a programar juegos para iOS: Conociendo Xcode, y antes de adentrarnos en Cocos2d, vamos a profundizar un poco más en Xcode. En esta ocasión, interactuaremos con los elementos creados, en lugar de limitarnos a un simple “Hola mundo”.

Con ello, ganaréis destreza en el manejo de Xcode, y podréis hacer vuestras primeras aplicaciones “útiles” de forma rápida; al aprender el uso básico de botones y etiquetas de texto. Por ser esta clase algo más compleja que la anterior, tendréis disponible para descarga el ejemplo práctico al final de la entrada, para que podáis ejecutarlo y comprobar que funciona correctamente!

En primer lugar, abrimos Xcode y creamos un nuevo proyecto eligiendo la plantilla “single view application”, igual que en la clase anterior; esto nos creará un espacio de trabajo basado en una sola ventana, con su “asistente gráfico”. Una vez abierto, seleccionamos el archivo viewcontroller.xib (recordemos que es la “cara gráfica” de nuestra primera vista o escena, llamada viewcontroller, y cuya parte de “código” está en los archivos viewcontroller.m y viewcontroller.h), y nos dirigimos al cuadro de objetos, situado abajo a la derecha, para empezar a arrastrar componentes a nuestra escena: labels, botones… va a tener de todo!

Insertando objetos en xcode

Como vemos en la imagen, en esta ocasión hemos arrastrado lo siguiente:

  • Un objeto “label“, a modo de título. No va a interactuar con nada.
  • Otro objeto “label“, que albergará valores numéricos.
  • Un “stepper“, encargado de aumentar o disminuir el valor numérico del “label” anterior.
  • Un botón para comprobar que el “label” numérico coincide con un valor que nosotros habremos elegido previamente.

¿Sabéis ya de que se trata este ejercicio? Muy sencillo; tendremos que elegir nuestra edad (año a año con el “stepper”), y luego, mediante el botón comprobar, averiguar si somos mayores de edad. Tan absurdo como educativo, con este ejercicio vais a aprender de un plumazo varias cosas.

Personalizacion de etiquetas en xcode

Como veis en la imagen superior, el tamaño y color de los “label” se puede personalizar. Cada objeto tiene multitud de parámetros que podréis ir averiguando si investigáis un poco. Una vez hayáis dejado cada objeto con las características que más os gusten, es hora de hacer balance: por ahora hemos “dibujado” nuestra aplicación; nada interactúa con nada… necesitamos darle unidad.

Para ello, vamos a meternos con algo de código (muy básico, y explicado rudimentariamente); concretamente con el archivo viewcontroller.h, que alberga las definiciones básicas de la clase viewcontroller (nuestra principal ventana!). No ejecuta código ni acciones, tan solo plantea las bases y las funciones necesarias, para que viewcontroller.m pueda usarlas y hacer el trabajo duro… que veremos plasmado en viewcontroller.xib! Las tres caras de la misma moneda.

Explicado esto, podemos empezar a definir en el “código” todos los objetos que hemos definido visualmente. Nos dirigimos al archivo viewcontroller.h, y añadimos lo siguiente:

implementando variables en xcode

Existen varias formas de definir variables o elementos, pero en este caso, como necesitamos que un elemento acceda a ellos (nuestra ventana, la parte gráfica), los asignamos de esta forma (empezando por @property). Es un tema que abordaremos en futuras clases, por ahora vale con que sepáis intuir o identificar a que se refiere cada uno: un “label” (solo uno, ya que el título que creamos no va a interactuar con nada, y no necesitamos definirlo en el código), una variable de numeros enteros llamada “mayoriaDeEdad” (esta es nueva, no la pusimos en el apartado gráfico.. tan solo almacenará la mayoría de edad para hacer comparaciones),un “stepper” (llamado stepper1).

Además de lo anterior, también hay dos funciones (las dos que empiezan por un guión, son funciones); una de ellas se encargará de hacer algo cuando apretemos el stepper  (¿por ejemplo, hacer que el “label” cambie nuestra edad? exacto), y otra encargada de comparar la edad actual del “label” con la que nosotros hemos fijado.

Hasta ahora tenemos la parte gráfica definida, y también la parte de código. Sin embargo, ¿cómo le enseñamos a nuestra aplicación a qué corresponde cada variable o elemento del código, con su equivalente en la parte gráfica? Pues muy fácil. Hacemos click sobre viewcontroller.xib, y damos al botón redondo y gris con forma de “play” y texto “show document outline”, que encontramos debajo a la izquierda de la hoja cuadriculada. Con ello se desplegará un panel con los elementos de nuestra ventana.

Nos fijamos arriba, en “Placeholders”, que contiene dos cubos: uno amarillo (File’s owner), que es donde asociaremos los objetos con el código (labels, botones,etc); y otro rojizo (First Responder), donde asociaremos las funciones que hemos definido a diversas acciones (por ejemplo, que al pulsar un botón se ejecute una función).

Xcode menu de outlines

Empezamos con los objetos. Hacemos click derecho sobre el cubo “Files Owner”, y se desplegará un menu negro. Desplegamos el apartado “Outlets”, y veremos todos los elementos que hemos definido en el código (sólo hay dos, label y stepper1); tenemos que arrastrarlos hasta su correspondiente elemento gráfico: label con el label numerico que hemos creado, y stepper1 con el stepper.

Al arrastrarlo veremos como se crea un “tentáculo azul” que sigue nuestro ratón hasta el objeto que queremos asociar. (Nota: para empezar el proceso de arrastrar, hay que hacer click en los circulitos vacíos junto al nombre de cada objeto, como en la foto)

Asociando objetos en xcode

Ahora hay que hacer lo mismo con las funciones; un click derecho en “First Responder”, y hacemos lo siguiente:

  1. Hacemos click en “checkEdad”, y sin soltar, arrastramos hasta el botón de nuestra ventana gráfica, el de comprobar edad. Se abre un nuevo menú desplegable y elegimos “Touch down”.
  2. Hacemos lo mismo con “stepperValueChanged”, pero esta vez lo arrastramos hasta nuestro “stepper” gráfico, y en el menú desplegable elegimos “Value Changed”.

Asociando acciones en xcode

Ahora mismo solo queda añadir el “código real” a viewcontroller.m; tenemos que decirle qué debe hacer con cada accion que ocurra. Empezamos por indicarle que esté al tanto de las variables definidas en viewcontroller.h (la variable de edad legal, la variable del stepper, y la variable del label; ambas asociadas a su homólogo gráfico) mediante “@synthesize nombre_de_la_variable_u_elemento“, justo como vemos en la imagen:

Implementacion de variables en xcode

Sin salir de viewcontroller.m, nos dirigimos a la función viewDidLoad (al final del archivo), y justo debajo de lo que ya está escrito, pero antes del “}“, definimos cuál debe ser la mayoría de edad en nuestro país. En este caso, 18:

Funcion didload de xcode

Por último, vamos a crear y programar las funciones que hemos definido en viewcontroller.h (son sólo dos). Una se ejecutará cada vez que presionemos el stepper, y debe mostrar la edad que vaya cambiando, en nuestro “label”.

La otra, se ejecutará cuándo apretemos al botón de comprobar edad, y comprobará (valga la redundancia) si la edad que hemos introducido es igual o superior que la mayoría de edad: Si la respuesta es afirmativa, el fondo de la App cambiará a verde; si no lo es, se pondrá rojo. Ambas hay que colocarlas en el archivo viewcontroller.m; por ejemplo, inmediatamente antes de la función -(void) viewDidLoad.

funciones de la clase dos

Ahora llega lo mejor. ¡Hay que probarlo! Dirigíos al botón play de arriba, comprobando que esté elegido el “iPhone Simulator”, y dadle. Se os abrirá vuestra ventana, y podréis interactuar con ella!

foto del ejercicio dos

El ejercicio se podría hacer más complejo, pero con esto tenéis las bases para investigar por vuestra cuenta, y probar nuevas opciones. Para que sea más fácil seguir el tutorial, por curiosidad, o simplemente por si no conseguís hacerlo funcionar, aquí tenéis el proyecto en un archivo comprimido! Espero que os haya servido… hasta la próxima!

Más información – Aprende a programar: conociendo Xcode (I)

Descarga – Segunda clase de programacion para Xcode

Los mejores accesorios para tu iPhone
¿Buscas una funda nueva para tu iPhone? ¿Un accesorio para el Apple Watch? ¿Quizás un altavoz Bluetooth? No te pierdas estas ofertas en accesorios y saca el máximo partido al móvil de Apple:
Fundas iPhoneAltavoces BluetoothAccesorios Apple Watch

Categorías

Sin categoría
Etiquetas ,

Sergio Abril

Estudiante de Arquitectura, apasionado del diseño y de las tecnologías, y profundo admirador de Apple. Emprendedor por naturaleza, intento... Ver perfil ›

7 comentarios

  1.   Abeckoers dijo

    Perfecto, espero que no tardes es publicar mas cursos. Pero podrias especificar detallada mente que hace cada funcion, por ejemplo: “*)sender” y “Elegida: %d” ya que hay personas que no tenemos conocimientos en objetive-c. Muy buen post.

    Saludos Sergio Abril.

    1.    Sergio Abril dijo

      Hola!
      Muchas gracias, te explico brevemente, de una forma un poco “rápida” y “fácil”, ya que es una pregunta muy acertada:

      Generalmente cuando defines una función, tienes que añadir los parámetros que quieres enviar a dicha funcion, y con los que quieres trabajar en ella; en el caso de botones y steppers, los añadimos para que la funcion sepa que está llamandole cierto objeto (en el caso de una, un UIButton, y en el caso de otra, un UIStepper), al que ponemos el nombre que queramos para trabajar con el dentro de la funcion (en este caso ambos “sender”, pero vale cualquiera). De ahí que tras el nombre de la funcion, haya dos puntos, y luego (UIButton*)Sender.

      Para demostrarte que esas funciones están recibiendo “el objeto que las llama”, aunque es cierto que yo no lo he aprovechado, prueba lo siguiente:

      Sustituye en la funcion checkerValuechanged (dentro de viewcontroller.m), todos los “stepper1” que encuentres, por “sender”. Veras que sigue funcionando igual, y el resultado es el mismo (aunque en el caso de este ejercicio, no me he aprovechado de los datos que recibe y almacena “sender”, sino que he hecho referencia directa al stepper1 (que es lo mismo)… de ahí que surjan dudas.. así que bien preguntado!

      En cuanto a lo segundo, un NSLog no es mas que un “log” de pantalla, para que abajo en la consola de Xcode aparezca el texto que nosotros metamos entre las comillas. Si ademas, queremos que muestre determinados valores, para ver, por ejemplo en este caso, que valor tiene el stepper1 en cada momento, esa es la forma correcta de añadirlo; colocando donde queremos que vaya el valor un %d, y detras de las comillas, el nombre de la variable. (%d hace referencia a que es un valor entero. si fuera por ejemplo un decimal, habria que poner %f).

      En un momento podrias pensar que deberiamos poner NSLog(@”elegido: VARIABLE”);, pero como todo lo que va entrecomillas sale “literal”, no saldria el valor sino la palabra VARIABLE… y hay que recurrir a NSLog(@”elegido: %d”, VARIABLE), para que al detectar el “%” sepa que ahi va un valor que colocaremos despues de la coma.

      Es un poco lioso, pero espero haberme explicado 😉

      1.    dAnn dijo

        Gracias por tu generosidad; sigue asi 🙂

  2.   Santi_Xixon dijo

    Por favor no dejes de hacer el post, es muy útil y seguro que a mucha gente, me incluyo, le gusta.

  3. Excelentes los dos artículos que llevas hasta ahora Espero los próximos para seguir aprendiendo sobre este nuevo lenguaje. Una pregunta, ¿porque las funciones que se utilizaron son del tipo IBAction y no simplemente void?

  4.   VicT04- dijo

    Jamas avía programado algo y haces que todo sea tan sencillo muchas gracias por escribir estos artículos espero los demás con muchas ansias, disculpa pero algunos libros o paginas web para seguir estudiando del tema tengo mucha curiosidad por aprender a hacer aplicaciones no importa si están en ingles espero me puedas ayudar gracias.

  5.   Llusan dijo

    ¿habrá tercera parte?, ya estamos en marzo

Deja un comentario

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