¿Qué es ‘Vary for Traits’ en Xcode 8?

Estoy usando las clases AutoLayout y Size, pero con el lanzamiento de iOS 10 y el nuevo Xcode 8.0, hay una nueva opción Vary for Traits . Es este reemplazo de Size Classe para diferentes ancho y alto de dispositivos.

enter image description here

Al seleccionar la checkbox de width , muestra la varying 14 compact width devices .

enter image description here

Al seleccionar la checkbox de height , muestra varying 18 compact height devices .

enter image description here

Al seleccionar ambas casillas, muestra varying 11 compact width regular height devices .

enter image description here

¿Cómo hacer uso de estas opciones? ¿Podemos usar AutoLayout con clases de tamaño como Xcode7.0? Si alguien tiene un conocimiento profundo, explíquelo.

Esta es solo una extensión de cómo usar “Vary Traits” rápidamente en su proyecto para agregar diferentes diseños para iPad y iPhone.

Por favor, lea esto para comprender más sobre las clases de tamaño.

https://developer.apple.com/reference/uikit/uitraitcollection

enter image description here

Si se saltea el ejemplo que se muestra a continuación, lea el Resumen al final.


  • OBJETIVO:

Necesita un botón con diferentes anchuras en iPhone y iPad. El primero tiene un ancho de 80 y el último tiene un ancho de 300.

  • MÉTODO 1 :

Varíe por los rasgos con restricciones múltiples según lo instalado.

  • PASOS:

    1. Agregue las restricciones comunes primero, como centrar el botón horizontal y verticalmente.

enter image description here

  1. Elija VaryForTraits y para las pantallas de iPhone según las pautas de clase de tamaño, una clase de tamaño C * R se ajusta al modelo y esto verificamos las marcas de Ancho y alto en PopUp. Descarte la ventana emergente haciendo clic en cualquier lugar de la pantalla.

enter image description here enter image description here

  1. Agregue la constante de ancho y verifique si la restricción se agrega para la clase de tamaño C * R. Después de agregar restricciones, elija el botón Done Varying.

enter image description here enter image description here

  1. Para pantallas de iPad, seleccione de nuevo cualquier dispositivo de iPad y elija VaryForTraits y, esta vez al hacer clic en alto-ancho, debe mostrar la variación de R * R.

enter image description here enter image description here

  1. De nuevo, agregue una restricción de ancho, la última restricción de ancho de iPhone agregado no debe estar resaltada como en la captura de pantalla. El valor agregado será para el tamaño clase R * R esta vez.

enter image description here enter image description here

  1. Vuelve al diseño de iPhone y toma 80 como ancho y iPad tomará 300.

enter image description here

CONCLUSIÓN:

Tenga en cuenta que hay un total de dos restricciones añadidas y en ambas restricciones, los valores difieren según la clase de tamaño elegida.


  • MÉTODO 2:

Variar por los rasgos con restricción única, múltiples tamaños de clase instalados

  • PASOS:
    1. Agregue la restricción de ancho normal. Luego seleccione esa restricción y elija el botón + además del valor Constante.

enter image description here

  1. Agregue variación de rasgo, y para iPhone elegimos C * R y establecemos el valor constante como 100.

enter image description here enter image description here

  1. De nuevo para iPad, que sigue una variación de rasgo como R * R, agregamos otra variación haciendo clic nuevamente en el botón + y configuramos el valor como 300.

enter image description here enter image description here

  1. Seleccione un iPad y el ancho se tomará automáticamente como 300 y regresando a iPhone toma 100 como valor.

enter image description here

CONCLUSIÓN:

Esta parece ser una opción mejor en lugar de agregar dos restricciones cuando solo se requiere una restricción única y el valor constante es diferente.

CUÁNDO UTILIZAR, QUÉ USAR:

Ambos enfoques básicamente están haciendo lo mismo, estableciendo valores para Size-classes.

Pero, # Method1 se usa cuando desea agregar una restricción específicamente para un dispositivo o decir size-class. Por ejemplo, en iPhone, el botón debe ser de los 50 mejores puntos y en iPad debe estar centrado horizontal y verticalmente. En tales situaciones, necesita usar VaryForTraits ya que abre puertas para agregar restricciones para una clase de tamaño específico.

# Method2 se usa cuando desea diferentes valores constantes para un mismo tipo de restricción.

PD: A TODOS LOS QUE NO PUEDEN OBTENER EL EJEMPLO DE TRABAJO

Asegúrese de agregar solo las restricciones necesarias como Instalado. La checkbox contra Installed solo debe aparecer para la restricción que necesita para una clase de tamaño. Esa es la clave!

enter image description here

Simplemente agregue una restricción superior y un guiño a un uiButton en una vista. Seleccione la restricción superior y desmarque la opción Instalado básico con el signo Más. Ahora, al hacer clic en el signo Más, agregue la variación a C R y marque esa opción. Ahora, cambie el dispositivo de iPhone a iPad con varias combinaciones de orientación. Esta restricción se aplicará solo para la clase de tamaño C R, que es iPhone en orientación vertical. Si se marcó la checkbox contra el Instalado básico (el que tiene el símbolo Plus), significa que la restricción debe aplicarse a todas las clases de tamaño.

RESUMEN :

La variación de rasgos es un cambio en la presentación de su interfaz de usuario que se basa en la configuración de un dispositivo. Las variaciones de rasgos de la interfaz de usuario no se limitan a las restricciones, sino que se pueden aplicar a muchas más. Como cambiar el color del fondo y otros elementos cuando el dispositivo está configurado en un estilo oscuro. Se puede aplicar una variación a un elemento de la interfaz de usuario, como eliminar una restricción, o a una propiedad de una clase de vista o restricción, como la fuente de una etiqueta. Puedes variar:

  • Tamaño o posición de una vista

  • Instalación de una vista

  • Instalación de una restricción

  • Constante de restricción

  • Fuente

  • Color para la fuente, el tinte o el fondo

  • Márgenes de diseño

  • Archivo de imagen

El conjunto específico de propiedades que puede variar depende de la clase del elemento. En el ejemplo, hemos demostrado el uso de: instalación de una restricción y – constante de restricción. Otros son bastante simples y pueden inferirse fácilmente.

Variar por los rasgos es la evolución de la opción de clases de tamaño que estaba presente en la versión anterior de Xcode. Permite una variación mucho más ingeniosa y precisa en función de los rasgos. Por supuesto, no se limita a las variaciones de iPad / iPhone solamente, pero también puede especificar variaciones en función de la orientación y los diferentes dispositivos.

Otras respuestas en este hilo tienen algunas carencias e inexactitudes, quizás la forma más eficiente de dar una respuesta es hacer un ejemplo. En aras de la claridad, limitaremos nuestro ejemplo a solo un botón y dos diseños. Sin embargo, como se explica a continuación, puede extender el siguiente ejemplo como lo desee. Nuestro objective es ajustar la posición de un botón entre dos diseños diferentes: paisaje y retrato en todos los dispositivos.

Nota: Si no se habilita la opción “variar para rasgos”, todos los ajustes de diseño y interfaz de la interfaz de usuario se refieren a todos los rasgos (es decir, todas las clases de tamaño).

Figura 1

Comencemos poniendo un botón en nuestro guión gráfico. Como “variar para rasgos” no está habilitado, el botón estará presente en todos los diseños diferentes. Si, en cambio, hubiéramos habilitado variar para rasgos, el botón se referiría solo al rasgo particular seleccionado.

Figura 2

Ahora, habilitemos “variar para el rasgo” y elija una variación basada en la altura. Debería ver que la pantalla inferior se volverá azul y, de acuerdo con la selección, verá afectado todo el dispositivo. Hasta aquí todo bien.

Fig. 3

Seleccione de nuevo el botón y agregue las restricciones ad habituales. En nuestro ejemplo, agregaremos el espacio delantero superior e izquierdo, así como el ancho y alto. Después de eso, haga clic en “Done Varying”. Verás que la parte inferior de la pantalla se volverá gris. Lo que está sucediendo es que le hemos dicho a Interface Builder que agregue las restricciones anteriores solo para las clases (w: C h: R).

fig4

Ahora selecciona el modo horizontal en la parte inferior de la pantalla. Verá que el botón está en rojo, porque carece de las restricciones que ha agregado solo para algunos rasgos. Seleccione nuevamente para los rasgos y seleccione de nuevo la variación de altura. Agregue las siguientes restricciones:

fig5

y presione hecho variando. Ahora el botón está bien identificado en la pantalla tanto para el paisaje como para el retrato.

fig6

Construir y correr Verá que el botón cambiará según la orientación de la pantalla.

Puede crear diseños más avanzados siguiendo este patrón. Por ejemplo, puede seleccionar al principio una variable para rasgos y soltar objetos UIKit solo para un rasgo específico. Este objeto estará presente solo en la variante especificada y se atenuará en los otros, lo que le permitirá crear interfaces de usuario completamente diferentes en función de los rasgos.

No es más size classes , pero con una representación diferente. hasta xcode 7 usamos clases de tamaño y consideramos height-width en forma regular,compact and any manera, en vary for traits concepto de vary for traits es el mismo, pero xcode específicamente explica el exact device . En la versión anterior, sabemos que for every iphone in portraint etc., ¡tipo de información en la que podemos conocer el dispositivo exacto!

Verifique las capturas de pantalla a continuación,

enter image description here

enter image description here

¡Debería consultar wwdc2016 – video para obtener más información!

Referencia: This So Post