Iniciación al SDK del iPhone 3G – Parte 3

Seguimos:

Diseño de la interfaz:

La parte de código la acabamos de completar, ahora pasaremos a definir la interfaz.

Para empezar, pulsaremos dos veces encima del archivo Mi_ProyectoViewController.xib dentro del explorador de archivos. Este archivo es el que define la vista de nuestro controlador.

A continuación se ejecutará la segunda herramienta que más usaremos en estos tutoriales : Interface Builder.

Seguramente esta sea vuestra primera experiencia con el SDK. Creerme, habéis hecho bien. Para los ansiosos que hemos estado trasteando con el SDK en su primera versión os comentaré que esta parte era una pesadilla. La interfaz gráfica la teníamos que crear con código puro y duro. Daban ganas de llorar cada que vez creabas una botón porque se te iban fácilmente 5 líneas de código en solo definir su posición y aspecto. Ahora comprobareis lo fácil que es crear una interfaz para el iPhone.

14

De izquierda a derecha describiremos los componentes más importantes de un archivo xib.

Vista: Este componente es lo que realmente veremos en el iphone. Aquí es donde diseñaremos la interfaz.

File´s Owners: Objeto responsable de controlar la vista. En este caso nuestro controlador Mi_ProyectoViewController.

Atributos: Atributos del objeto que seleccionamos.

Library: Librería de objetos junto con su descripción: botones, etiquetas….

Bueno, pues manos a la obra. Empezaremos arrastrando los componentes necesarios, recordemos:

– Imagen de fondo: Elegimos el objeto Image View y lo arrastramos a la ventana.

15

En la ventana “Image View Attributes”, elegimos como valor para “Image” la imagen Background.png.

– Titulo y petición del nombre: Elegimos el objeto Label para quede de esta forma:

16

– Campo de texto donde el usuario introducirá el nombre: Seleccionamos TextField.

17

– Botón: de tipo Rounded Buttom.

18

– Saludo: Etiqueta vacía.

19

– Imagen para el saludo: de tipo Image View asociada a la imagen “Hello.png” como hicimos con la imagen de fondo. Seleccionaremos también la propiedad “Hidden”.

20

Muy bien, a continuación enlazaremos la interfaz con el código. Para ello, seleccionamos File´s Owner y manteniendo pulsado el botón Ctrl arrastramos el ratón hacia los componentes diseñados.

Ahora toca con los componentes. Solo lo haremos con aquellos que hemos definido en el código.

Primero enlazamos el campo de texto:

21

Enlazamos la etiqueta vacía:

22

Enlazamos la imagen del saludo:

23

Para enlazar el botón con el método hacemos la siguiente: click sobre el ratón con la tecla ctrl. Presionada. Nos aparecen todos los eventos relacionados con el botón. Con el ctrl. pulsado hacemos click sobre “Touch Up Inside” y lo arrastramos hacia File`s Owner seleccionando “clickSaludo”.

24

Ahora, para que nuestro teclado desaparezca al introducir el nombre, además de la función que implementamos en el código necesitamos que nuestro controlador sea el “delegate” del campo de texto. Para ello lo enlazamos desde el campo de texto hacia nuestro controlador:

25

Por último, para asociar un icono a nuestra aplicación seleccionamos el archivo “Info.plist” dentro de Xcode. El campo “Icon” lo completamos con el nombre de la imagen que queramos añadir.

26

Con esto ya hemos terminado el desarrollo del proyecto. Ahora solo nos queda probarlo. Para ello, una vez guardado el archivo de Interface Builder, volvemos a Xcode y pulsamos el Buid and Go!.

27

Tutorial por Yanpi

Dudas en el foro.

Añadir Comentario

mejores-ofertas-black-friday-apple
Consigue las mejores ofertas de Black Friday en productos Apple
iphone-6s-apple-cambiara-gratis-bateria
iPhone 6s: Apple cambiará gratis la batería de los dispositivos
iphone-se-2-no-llegar-2017
El iPhone SE 2 podría no llegar en 2017
como-usar-siri-saber-quien-llama
Cómo usar Siri para saber quien te llama al iPhone
ipad-mini-2-vs-ipad-mini-4-comparativa
iPad mini 2 vs. iPad mini 4 ¿Cuál comprar? (Comparativa)
ipad-pro-apple-presenta-oficialmente
iPad Pro, Apple lo presenta oficialmente
que-esperar-ipad-mini-4
¿Qué podemos esperar del iPad mini 4?
ipad-vende-menos-sigue-cima
iPad vende menos unidades pero sigue en la cima
apple-pay-disponible-espana
Apple Pay ya está disponible en España
black-friday-2016-apple-store
Black Friday 2016: Llegan las ofertas de Apple Store
ios-10-2-beta-2-disponible-iphone-ipad
iOS 10.2 Beta 2 está disponible para iPhone y iPad
como-desbloquear-mac-apple-watch
Como desbloquear el Mac, iMac y MacBook con el Apple Watch
apple-music-estudiantes-espana
Apple Music para estudiantes a 5€ al mes llega a España
apple-pay-disponible-espana
Apple Pay ya está disponible en España
black-friday-2016-apple-store
Black Friday 2016: Llegan las ofertas de Apple Store
tim-cook-matando-apple
Tim Cook está matando a Apple, según Jason Calacanis
google-maps-informacion-trafico
Google Maps: llega la información del tráfico en widgets y más
netflix-descargar-peliculas-series-iphone
Netflix permite descargar películas y series para verlas offline en iPhone
youtube-nueva-version-iphone-musica
YouTube, nueva versión para iPhone y iPad
apps-musica-imprescindibles-iphone-7
5 Apps de Música imprescindibles para el iPhone 7
Tweaks
jailbreak-video-iphone-7-ios-10-1
Jailbreak: un vídeo lo muestra en un iPhone 7 con iOS 10.1
consiguen-jailbreak-ios-10
Consiguen hacer el Jailbreak a iOS 10 (Vídeo)
tweaks-compatibles-jailbreak-ios-9-2-9-3-3
Tweaks compatibles con el Jailbreak de iOS 9.2/9.3.3
toca-hair-2-app-gratis-semana
Toca Hair Salon 2 – App Gratis de la Semana en iTunes
artie-lapiz-magico-app-gratis-semana
Artie y el Lápiz Mágico – App Gratis de la Semana en iTunes
perchang-app-gratis-semana
Perchang – App Gratis de la Semana en iTunes
pokemon-go-bonos-diarios
Pokémon GO: llegan los bonos diarios y mucho más
7-mejores-fundas-iphone-7
Las 7 mejores fundas para iPhone 7
iphone-se-mejores-fundas-nuevo-movil-apple
iPhone SE: Mejores fundas para el nuevo móvil de Apple
convierte-iphone-se-iphone-6s
Convierte tu iPhone SE en un iPhone 6s
5-fundas-iphone-6-6s-regalar-navidad-reyes
5 Fundas para iPhone 6s y iPhone 6s Plus para regalar en Navidad y Reyes
iphone-6s-comprobar-cambiar-bateria-gratis
iPhone 6s: Cómo comprobar si nos pueden cambiar la batería gratis
5-trucos-dropbox-iphone-ipad
5 Trucos de Dropbox para iPhone y iPad
como-usar-filtros-fotos-iphone
Cómo usar los filtros en las fotos de tú iPhone 7
portadas-post-tip
Cómo configurar el iPhone 7 y iPhone 7 Plus