Píldora xCode #4: Cómo crear botones personalizados tipo Custom Button (iPhone XCode 4 UIButton Custom programming)

Probablemente nada delate tanto a una aplicación iPhone/iPad de amateur como el uso de los botones estándar del Xcode.

Por tanto, una de las primeras cosas que debemos aprender -si queremos que nuestra aplicación iOS tenga un aspecto profesional- es a crear botones personalizados.

Básicamente, tenemos dos vías:

a) Crear el aspecto personalizado de nuestro botón mediante llamadas Cocoa para crear líneas, fondos, degradados, etc. Es el camino más flexible, pues nos permite tener botones totalmente adaptables a diversas resoluciones sin pérdida de calidad. Sin embargo, también es el más costoso, ya que tenemos que hacer un trabajo que es básicamente gráfico, a través de llamadas de la API.

b) Diseñar nuestros botones en un programa gráfico, exportarlos en formato PNG y aplicar los gráficos creados a un botón personalizado. Es, sin duda, la opción más flexible, ya que podemos usar toda la potencia gráfica de nuestro programa favorito (Photoshop, Fireworks, Xara, ...).

En este tutorial, vamos a mostrar esta segunda opción que, como veremos, es muy fácil de implementar, una vez que tenemos diseñados los gráficos de los botones.

Para este ejemplo, he creado tres imágenes PNG, una para cada estado, según vemos a continuación:

Selected/Default (okButton-SELECTED.png, 100 pix X 50 pix)

Highlighted (okButton-HIGHLIGHTED .png, 100 pix X 50 pix )

Disabled ( okButton-DISABLED.png, 100 pix X 50 pix)

Hay que tener en cuenta que, tras la aparición de los dispositivos con pantalla retina (iPhone 4 y siguientes, iPad 3 y siguientes, iPod Touch de nueva generación), es necesario incorporar versiones de alta resolución de cada una de las imágenes. Para ello, no tenemos más crear, para cada una de las imágenes, otra de doble resolución vertical y horizontal, y asignarle el mismo nombre del fichero original, pero terminado en @2x, tal como vemos a continuación:

Selected/Default (okButton-SELECTED@2x.png, 200 pix X 100 pix)

Selected/Default (okButton-HIGHLIGHTED@2x.png, 200 pix X 100 pix)

Disabled ( okButton-DISABLED @2x.png, 200 pix X 100 pix)

Según vemos en el vídeo, debemos importar las dos versiones de cada una de las imágenes, pero asignar solamente las versiones de baja resolución. Al ejecutarse la aplicación en un dispositivo retina, el framework Cococa ya se encarga automáticamente de reemplazar cada imagen por su versión de doble resolución (la que acaba en @2x).


En la próxima píldora (Píldora xCode #5), veremos cómo activar el estado Disabled, aprovechando la explicación de los controles tipo switch: