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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Apple presenta los nuevos iPhone 11, iPhone 11 Pro y iPhone 11 Pro Max
Apple presentará el nuevo iPhone 11 el próximo 10 de Septiembre
Como instalar facilmente iOS 13 en iPhone y iPad
Cómo ver el último episodio de Juego de Tronos gratis en iPhone y iPad
Apple presenta un nuevo iPad de 10,2 pulgadas más barato y con nuevas prestaciones
Apple presenta una nueva versión de iPad Air y iPad mini 2019
Apple presenta los nuevos iPad Pro con pantalla Face ID
iPad 2018, así es la nueva tablet educativa de Apple
Apple presenta su nuevo Apple Watch Series 5
Como instalar la beta de watchOS 6 para Apple Watch
Apple presenta el nuevo WatchOS 6 lleno de novedades
Cómo hacer un electrocardiograma con la app ECG en Apple Watch Series 4
Apple presenta su nuevo Apple Watch Series 5
Apple renueva la gama de MacBook Air y MacBook Pro para la próxima vuelta al cole
Lista de Mac compatibles con macOS Catalina 10.15
Como instalar la beta de watchOS 6 para Apple Watch
WinX DVD Ripper Platinum: Como convertir tus DVD a iPhone y iPad rapidamente
EaseUS Data Recovery Wizard: software gratuito para recuperar los datos de tu Mac
IOTransfer 3, la mejor forma de transferir los archivos de tu iPhone
iSkysoft Data Recovery, software de recuperación de datos para Mac & Pc
Tweaks
El Jailbreak del iPhone 7 con iOS 10.3.1 es mostrado por Pangu
Cómo restaurar el iPhone y iPad a iOS 10.2 sin perder el Jailbreak
Cydia ya es compatible con iOS 10 en dispositivos con Jailbreak
Los Sims 4 gratis por tiempo limitado para MAC
Descubre cuáles son los juegos de moda para iPhone
Dragon Ball Legends para iOS ya está disponible en App Store
INKS. – App de la Semana en iTunes
Koogeek: productos de cuidado personal compatibles con iOS en oferta
Nuevas fundas para iPhone 7 y nuevas correas para Apple Watch
Baratos.Online las mejores gangas en dispositivos iOS y accesorios Apple
¿Dónde comprar cables Lightning certificados (MFi) para iPhone y iPad barato?
Cómo activar el modo oscuro para macOS Mojave
Cómo convertir un archivo de Pages a PDF en Mac
Cómo hacer un electrocardiograma con la app ECG en Apple Watch Series 4
Como utilizar Apple Watch para desbloquear un Mac