Dé rienda suelta a su desarrollador de aplicaciones interno Parte 26: Resumen de diseño automático de Xcode 5

¿Tiene una idea para una aplicación pero no tiene los conocimientos de programación para comenzar a construirla? En esta serie de blogs semanales, lo llevaré a usted, el no programador, paso a paso a través del proceso de creación de aplicaciones para iPhone, iPod touch y iPad. Únase a mí cada semana en esta aventura y experimentará lo divertido que puede ser convertir sus ideas en realidad. Esta es la parte 26 de la serie. Si recién está comenzando, consulte el comienzo de la serie aquí.

En mi publicación anterior, repasamos los pasos para convertir el Escribir un comentario escena en iAppsReview a iOS 7 y Xcode 5. En esta publicación, actualizaremos algunas escenas más y aprenderemos aún más información importante sobre el diseño automático, el contenido de borde a borde predeterminado de iOS 7 y cómo especificar un tinte global para su aplicación. !

Puede obtener la versión más reciente del iAppsReview proyecto en este enlace. Te recomiendo que sigas los pasos de esta publicación para tener la mejor experiencia de aprendizaje, pero si te quedas atascado en el camino, puedes encontrar el proyecto terminado en este enlace.

Contenido de borde a borde de iOS 7

Uno de los mayores cambios que afecta a los proyectos que actualiza es el nuevo diseño de contenido de borde a borde de iOS 7. En iOS 7, Apple rediseñó todo el aspecto del sistema operativo con miras a elevar el contenido del usuario. Puede ver esto en aplicaciones integradas como Clima, Calendario y Música (Figura 1).

Figura 1: las aplicaciones integradas de iOS 7 actualizadas proporcionan contenido de borde a borde.

Como parte de este enfoque para el diseño de la interfaz de usuario, las barras de estado, las barras de navegación y las barras de herramientas ahora son translúcidas; y debido a esto, los controladores de vista ahora usan de forma predeterminada un diseño de pantalla completa. Para ver esto en acción, echemos un vistazo a revisión escena en el iAppsReview proyecto.

1. En Xcode, abra el iAppsReview proyecto.

2. Si el guión gráfico aún no está seleccionado, vaya al Navegador de proyectos y seleccione el MainStoryboard archivo.

3. Desplácese hasta el revisión escena como se muestra en Figura 2.

Figura 2 – La escena de la revisión

Si observa de cerca, puede ver que las etiquetas en la parte superior de la escena están ocultas debajo de la barra de navegación. En iOS 6, estas etiquetas se colocaron debajo de la barra de navegación, porque la vista principal se colocó debajo. En iOS 7, la vista se coloca en la parte superior de la escena debajo de la barra de navegación, ocultando las etiquetas. como podemos arreglar esto?

En iOS 7, los controladores de vista tienen una nueva edgeForExtendedLayout propiedad que especifica qué bordes (superior, inferior, izquierdo y derecho) de una vista deben extenderse hasta el borde de la pantalla. La configuración predeterminada es UIRectEdgeAll, que especifica que todos los bordes de la vista deben extenderse hasta el borde de la pantalla.

Tanto en iOS 6 como en iOS 7, la mayoría de las vistas suelen extenderse al borde izquierdo y derecho de la pantalla. En iOS 7, los bordes superior e inferior son los que normalmente desea cambiar. Puede escribir algún código para configurar el controlador de vista edgeForExtendedLayout propiedad en el viewDidLoad método de un controlador de vista, pero es mejor configurarlo en el Inspector de atributos. Hagámoslo ahora.

Modificar la escena de la revisión

Para comenzar, solucionemos el problema de que el contenido de la escena se oculta debajo de la barra de navegación.

1. En el guión gráfico, haga clic en la barra de estado en la parte superior de la revisión escena para seleccionar el controlador de vista de la escena. (Aparece un resaltado azul alrededor de la escena cuando la ha seleccionado correctamente).

2. Vaya al Inspector de atributos (el tercer botón desde la derecha en la barra de herramientas Inspectores) y en el Ver controlador sección puede ver los tres atributos para Extender bordes se muestra en la figura 3.

Figura 3 – Los atributos Extend Edges

3. Desmarcar la Debajo de las barras superiores y Debajo de las barras inferiores opciones. Al hacer esto, la vista principal en el revisión La escena se muestra debajo de la barra de navegación y las etiquetas ahora son visibles (Figura 4).

Figura 4 – La vista ubicada debajo de la barra de navegación

Desmarcar estas opciones tiene el mismo efecto que ejecutar la siguiente línea de código, que especifica que los lados izquierdo y derecho de la vista deben extenderse hasta el borde de la pantalla (pero la parte superior e inferior no deben):

self.edgesForExtendedLayout = UIRectEdgeLeft | UIRectEdgeRight;

los Debajo de barras opacas ajuste (Figura 4) entra en juego si ha cambiado la barra de navegación o las barras de herramientas de translúcidas a opacas. De forma predeterminada, esta configuración no está marcada, porque generalmente no tiene sentido extender una vista debajo de una barra superior o inferior que es opaca.

Ahora que tenemos la vista configurada correctamente, arreglemos el diseño de los controles de la interfaz de usuario.

1. Primero, eliminemos las restricciones existentes en el controlador de vista. Para hacer esto, deje el controlador de vista seleccionado y luego vaya al menú Diseño automático (barra de herramientas) en la esquina inferior derecha del panel de Interface Builder; y del Resolver problemas de diseño automático botón, seleccionar Borrar todas las restricciones en el controlador de vista de revisión (Figura 5).

Figura 5: borre todas las restricciones del controlador de vista.

2. Esta escena en particular está destinada a ser de solo lectura (el usuario puede leer una reseña anterior pero no editarla). Para no permitir la edición, seleccione el control de clasificación de estrellas (el rectángulo blanco grande debajo del Entretenimiento etiqueta) y luego vaya al Inspector de atributos y desmarcar la Interacción del usuario habilitada casilla de verificaciónFigura 6).

Figura 6 – Desmarque Interacción del usuario habilitada

3. A continuación, seleccione el UITextView control en el revisión escena. Vaya al Inspector de atributos y desmarque la casilla Editable opción (Figura 7).

Figura 7 – Desmarque la opción Editable

4. Ahora cambiemos el tamaño del control de clasificación por estrellas, que se volvió demasiado grande cuando movimos el proyecto a iOS 7. Seleccione el control de clasificación por estrellas en la superficie de diseño, vaya al Inspector de tamaño (el segundo botón de la derecha en la barra de herramientas del Inspector) y cambie el Altura a 60 (Figura 8).

Figura 8 – El inspector de tamaño

5. Ahora hagamos el revisión La pantalla refleja el diseño del Escribir un comentario pantalla. No proporcionaré instrucciones detalladas para esto ya que ya lo hice en mi publicación anterior, pero estos son los pasos principales que debe realizar. (A medida que mueva cada control, asegúrese de que las líneas de guía de puntos azules aparezcan horizontal y verticalmente cuando coloque los controles):

• Mueva el control de clasificación por estrellas debajo del Entretenimiento etiqueta.

• Mueva la vista de imagen a la derecha del control de clasificación por estrellas.

• Mueve el UITextView debajo de la clasificación de estrellas y los controles de visualización de imágenes, y luego aumente su altura arrastrando su borde inferior hasta que vea que la línea de guía horizontal aparece cerca de la parte inferior de la escena.

Cuando termines, la escena debería verse como Figura 9.

Figura 9 – Los controles reorganizados

6. Ahora permitamos que Xcode genere nuevas restricciones para la escena. Para hacer esto, haga clic en la barra de estado en la parte superior de la revisión escena para seleccionar el controlador de vista. A continuación, vaya al menú Diseño automático en la esquina inferior derecha del panel de Interface Builder, haga clic en el Resolver problemas de diseño automático y luego seleccione Restablecer las restricciones sugeridas en Review Controller en el menú emergente (Figura 10).

Figura 10 – Restablecer restricciones en el controlador de vista

7. los revisión El diseño de la escena es muy similar al de la Escribir un comentario escena. Necesitamos dar un paso más para que el control de clasificación de estrellas no cambie de tamaño cuando la orientación del dispositivo se cambie a horizontal. Vea si puede descubrir cómo hacer esto. Si necesitas una pista, puedes mirar mi publicación anterior para ver cómo se hizo (mira en la sección Ajustar las restricciones).

8. Ahora estamos listos para probar la escena. En el control de esquema en la parte superior izquierda de la ventana de Xcode, asegúrese de iPhone Retina (3,5 pulgadas) está seleccionado, y luego haga clic en Xcode Carrera botón.

9. Cuando la aplicación aparezca en el simulador, seleccione el Lea sus reseñas y luego haga clic en cualquiera de las revisiones de la lista. Tu revisión la escena debería verse como Figura 11.

Figura 11 – El actualizado revisión escena

10. En el menú Simulador, seleccione Hardware> Girar a la derecha, y tu revisión la escena debería verse como Figura 12.

Figura 12 – El revisión escena en orientación horizontal

11. Para ver cómo se ve esta escena en el factor de forma iPhone Retina de 4 pulgadas, regrese a Xcode y haga clic en el Detener botón. En el control de esquema, seleccione iPhone Retina (4 pulgadas)y luego haga clic en Xcode Carrera botón.

13. Cuando la aplicación aparezca en el simulador, seleccione el Lea sus reseñas opción y luego haga clic en cualquier revisión de la lista. Tu reseña debe verse como la imagen de la izquierda en Figura 13. Ahora, en el menú del Simulador, seleccione Hardware> Girar a la izquierda, y su reseña debe verse como la imagen de la derecha en Figura 13.

Figura 13 – El revisión escena en el simulador de iPhone Retina (4 pulgadas)

Actualización de las escenas restantes

En lugar de guiarlo paso a paso a través del proceso de actualización del Configuraciones, Contratary Realimentación escenas, simplemente las he actualizado en el proyecto completo de esta publicación, que puede obtener en este enlace. Figura 14 muestra la versión actualizada de cada una de estas escenas. (Te mostraré cómo cambiar esto en la siguiente sección). Te recomiendo que intentes cambiar estas escenas por tu cuenta para probar tus habilidades de diseño automático.

Figura 14 – El actualizado Configuraciones, Contratary Realimentación escenas

¿Y las otras escenas? No tenemos que cambiar nada sobre las otras escenas para que funcionen correctamente porque son controladores de vista de tabla simples que administran una vista de tabla única. Xcode actualiza automáticamente estas vistas correctamente cuando las mueve de iOS 6 a iOS 7.

Cambiar el color de tinte de la aplicación

En la interfaz de usuario minimalista de iOS 7, Apple hace un buen uso del color para distinguir entre las aplicaciones integradas. Por ejemplo, la Figura 15 muestra el tinte de la aplicación de Game Center (violeta), iTunes (aguamarina) y Calendario (rojo).

Figura 15: las aplicaciones integradas de Apple tienen diferentes matices para distinguirse de otras aplicaciones.

De forma predeterminada, el color de tinte de su aplicación está configurado en azul. Si desea cambiar el color, Xcode se lo pone muy fácil. Cambiemos el iAppsReview tinte para mostrarte cómo.

1. En el Navegador de proyectos, seleccione el MainStoryboard archivo.

2. Vaya al Inspector de archivos (el primer botón a la izquierda en la barra de herramientas del Inspector).

3. En la sección Documento de Interface Builder, haga clic en el selector de color para Tinte global ajuste (Figura 16) y seleccione el color deseado (seleccioné Mandarina en el cuadro de diálogo Crayones).

Figura 16 – Cambio del tinte global

Eso es todo, ahora todas las escenas en su guión gráfico usarán el nuevo Tinte global para el texto del botón.

Conclusión

Xcode 5 definitivamente ha facilitado mucho la creación de una interfaz de usuario que pueda adaptarse a una amplia variedad de tamaños y orientaciones de pantalla. Este es un cambio necesario y bienvenido de Xcode 4.x. No he cubierto todo lo que hay que saber sobre el diseño automático, pero a medida que avance en esta serie, le mostraré otros trucos y consejos para crear el mejor diseño de interfaz de usuario para sus aplicaciones.

<< Anterior Siguiente >>

Publicaciones relacionadas:

Cómo apagar, encender y reiniciar el iPhone X y posteriores Consejo: Qué hacer cuando no puede conectar su iPhone o iPad a Wi-Fi Soporte para escáner de iPhone Nueva aplicación y tienda de libros electrónicos de Google Revisión: agregue un alimentador de mascotas inteligente a su hogar inteligente Comentario: Elgato Wave: 3 Micrófono Revisión de la aplicación DragonVale Rastree todos sus paquetes en un solo lugar con la aplicación de entregas ¿Debería comprar una Mac 2020? El nuevo procesador M1 de Apple es una apuesta Próxima actualización de software Apple TVOS 9.2 para agregar dictado de voz en campos de texto Cómo usar las sugerencias de búsqueda en Safari y Chrome en su iPhone Revisión: el reloj Sandman también funciona como una estación de carga para múltiples dispositivos