Saltar al contenido principal
Version: Next

iOS Storyboard

Ahora es el momento de crear su interfaz iOS de formulario listado con Xcode.

Este es el resultado que queremos lograr:

Storyboard custom listform

Para cada celda, vamos a añadir:

  • Una foto de perfil
  • Título
  • Subtitulo

Abrir el archivo storyboard con Xcode

Primero, abra su archivo storyboard en Xcode.

Empty storyboard custom template

Está vacío, así que vamos a agregar algo de contenido.

Añadir una "Image View"

Desde la Object library (la librería de objetos), arrastre y suelte una Image View (una vista de imagen) en una celda. Puede buscar una "Image View" en la barra de búsqueda en la parte inferior de la librería de objetos.

Add Image View storyboard

Desde el Size inspector (al lado derecho del Interface Builder), defina el ancho de la imagen en 110 y su altura en 110. Luego, defina el valor de X en 8 y el valor de Y en 3.

Image View position height and width

A continuación, agregue una restricción (Leading: 8) haciendo clic en el botón Add New Constraints button (en la parte inferior de la ventana del Generador de interfaz). Agregue también restricciones de ancho y alto, como se muestra:

Image View leading space width height

Haga clic en el botón Align(en la parte inferior del Interface Builder) y marque la casilla "Vertically in Container".

Image View align vertically

Su vista Imagen ahora está bien ubicada.

Image View final

Ahora, vamos a trabajar en las etiquetas de celdas.

Añadir etiquetas de título y subtítulo

Comencemos por agregar una vista. Busque "View" en la Librería de objetos y arrastre la vista al contenedor de celdas.

Add View Storyboard

Desde el panel Size inspector (al lado derecho del Interface Builder), defina el ancho de la imagen en 277 y su altura en 94. Luego, defina el valor de X en 126 y el valor de Y en 10.

View position height and width

Para la vista de imagen, agregue cuatro restricciones haciendo clic en el botón Add New Constraints (Trailing: 11, Leading: 8, Top: 11, y Bottom: 10.67) para posicionarla correctamente como se muestra a continuación:

View contraints Storyboard

Arrastre y suelte una etiqueta en la Vista que acaba de agregar desde la Librería de objetos.

Add label Storyboard

Desde el panel Size inspector, defina el valor de ancho de etiqueta vista en 269 y el valor de alto en 32. A continuación, defina el valor de X en 8 y el valor de Y en 8.

Duplique la etiqueta y en el panel Size inspector, defina el valor de X en 8 y el valor de Y en 48.

Duplicate the label

Seleccione las dos etiquetas y añada cuatro restricciones haciendo clic en el botón Add New Constraints (Trailing: 0, Leading: 8, Top:, y Bottom: Multiple) como se muestra a continuación:

Labels contraints storyboard

Con una etiqueta seleccionada, haga doble clic en Height constraint para editarla.

Label height constraint edition

Cambie la relación "Equal" por Greater Than or Equal para que pueda tener una altura variable (para manejar etiquetas multilíneas).

Change relation label height constraint

Repita el proceso para la segunda etiqueta.

Personalizar la etiqueta

Desde el inspector de atributos (al lado derecho de la ventana del Interface Builder), puede personalizar los colores de fuente de su etiqueta. Apliquemos el color Dark Grey Color a la segunda etiqueta:

Label color dark grey

También puede seleccionar el color principal de su aplicación:

Label color background color

Desde el inspector de atributos, también puede personalizar la fuente. Seleccione las dos etiquetas y seleccione Font > Custom > Helvetica Neue:

Label font custom

Para finalizar las personalizaciones, seleccione ambas etiquetas y en la ventana del inspector ingrese el valor 0 en Lines. Esto permite que el número de líneas sea ilimitado.

Label lines number

:::nota

El Storyboard se optimiza para tener una altura de celda variable en función del contenido de cada celda.

:::

Row height tableview cell

Cómo obtener datos en sus celdas

Image View

Seleccione su Vista imagen y vaya a Identity inspector > User Defined Runtime Attributes. Haga clic en el botón + para añadir una línea.

User defined runtime attributes

  • Key Path: comience con bindTo para activar la unión del componente. Introduzca bindTo.record.___FIELD_1___

  • Type: siempre String

  • Value: nombre del atributo. Introduzca ___FIELD_1_BINDING_TYPE___

Identity inspector storyboard

Etiquetas

Seleccione la primera etiqueta y agregue una línea en el área "Defined Runtime Attributes":

  • Key Path: bindTo.record.___FIELD_2___

  • Tipo: Cadena

  • Value: ___FIELD_2_BINDING_TYPE___

Field 2 Binding

Seleccione la segunda etiqueta y agregue una línea en el área "Defined Runtime Attributes":

  • Key Path: bindTo.record.___FIELD_3___

  • Tipo: Cadena

  • Value: ___FIELD_3_BINDING_TYPE___

Field 3 Binding

Puede cambiar las etiquetas del storyboard para tener una mejor visibilidad:

  • Haga doble clic en la primera etiqueta para editarla e ingresar ___FIELD_2_LABEL___
  • Haga doble clic en la segunda etiqueta para editarla e ingresar ___FIELD_3_LABEL___

Storyboard label display names

Vaya al editor de su proyecto y seleccione su plantilla de formulario listado en la sección Formularios, luego haga clic en Crear y Ejecutar.

Este es el el resultado del simulador:

Simulator result

Personalice su aplicación

El último paso es agregar un radio de esquina a la vista de imagen para tener un mejor diseño.

Seleccione su Vista imagen y añada las dos líneas siguientes en el área User Defined Runtime Attributes:

  • Key Path: cornerRadius

  • Type: Number

  • Value: 12

y

  • Key Path: layer.masksToBounds

  • Type: Boolean

  • Value: seleccione la casilla

ImageView corner Radius

¡Ahora puede crear su proyecto desde el editor de proyectos!

Custom template final result

¿Qué hacer ahora?

En este tutorial, hemos cubierto los conceptos básicos para crear plantillas con iOS. Ahora puede crear plantillas simples por su cuenta utilizando los recursos del proyecto Starter. También puede ver cómo construir plantillas de formularios detallados.

Descargue la carpeta lista de la plantilla terminada: