ios xcode8 ios10 ios-autolayout

ios - ¿Qué es ''Variar para los rasgos'' en Xcode 8?



xcode8 ios10 (3)

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 anchos y alturas de dispositivos.

Al seleccionar la casilla de verificación de width , muestra varying 14 compact width devices .

Al seleccionar la casilla de verificación de height , muestra varying 18 compact height devices .

Al seleccionar ambas casillas de verificación, muestra varying 11 compact width regular height devices .

¿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.

Esto es solo una extensión de cómo usar "Variar rasgos" rápidamente en su proyecto para agregar diferentes diseños para iPad y iPhone.

Lea esto para comprender más sobre las clases de Tamaño.

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

Si omite el ejemplo que sigue a continuación, lea el Resumen al final.

  • OBJETIVO

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

  • MÉTODO 1 :

Varíe los rasgos con restricciones múltiples según esté instalado.

  • PASOS

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

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

  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 Listo variable.

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

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

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

CONCLUSIÓN

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

  • MÉTODO 2:

Variar para rasgos con restricción única, múltiples clases de tamaño instaladas

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

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

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

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

CONCLUSIÓN

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

CUANDO UTILIZAR, QUE USAR:

Básicamente, ambos enfoques están haciendo lo mismo, estableciendo valores en Clases de tamaño.

Pero, # Método1 se usa cuando desea agregar una restricción específicamente para un dispositivo o decir clase de tamaño. Por ejemplo, en iPhone, el botón debe estar entre los 50 puntos principales y en iPad debe estar centrado horizontal y verticalmente. En tales situaciones, debe usar VaryForTraits ya que abre puertas para agregar restricciones para una clase de tamaño específica.

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

PD: A TODAS LAS PERSONAS QUE NO PUEDEN OBTENER EL EJEMPLO DE TRABAJO

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

Simplemente agregue una restricción superior y una guía a un uiButton en una vista. Seleccione la restricción superior y desactive la opción básica Instalada con el signo más. Ahora, al hacer clic en el signo más, agregue 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 casilla de verificación contra el Instalado básico (el que tiene el símbolo Más), eso significa que la restricción debe aplicarse a todas las clases de tamaño.

RESUMEN :

La variación del rasgo 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 solo se limitan a restricciones, sino que se pueden aplicar a mucho 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 o restricción de vista, 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, tinte o 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 se pueden inferir fácilmente.

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

Verifique las capturas de pantalla a continuación,

¡Debe consultar wwdc2016 - video para obtener más información!

Referencia: This So Post

Variar para los rasgos es la opción de evolución de las clases de tamaño que estaba presente en la versión anterior de Xcode. Permite una variación mucho más ingeniosa y precisa basada en rasgos. Por supuesto, no se limita solo a variaciones de iPad / iPhone, sino que también puede especificar variaciones basadas en la orientación y el dispositivo diferente.

Otras respuestas en este hilo tienen algunas carencias e imprecisiones, quizás la forma más eficiente de dar una respuesta es dar 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 ampliar el siguiente ejemplo como lo desee. Nuestro objetivo es ajustar la posición de un botón entre dos diseños diferentes: horizontal y vertical en todos los dispositivos.

Nota: Si no está habilitada la opción "variar según los rasgos", todos los ajustes de diseño e interfaz de usuario se refieren a todos los rasgos (es decir, todas las clases de tamaño).

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

Ahora, habilitemos "variar para rasgo" y elegir una variación basada en la altura. Debería ver que la pantalla inferior se volverá azul y, según la selección, verá todos los dispositivos afectados. Hasta ahora tan bueno.

Seleccione nuevamente el botón y agregue las restricciones como de costumbre. En nuestro ejemplo, agregaremos el espacio inicial superior e izquierdo, así como el ancho y la altura. Después de eso, haga clic en "Hecho variable". Verá que la parte inferior de la pantalla se volverá gris nuevamente. 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).

Ahora seleccione 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 variar para los rasgos y seleccione nuevamente la variación de altura. Agregue las siguientes restricciones:

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

Construye y corre. Verá que el botón cambiará de acuerdo con la orientación de la pantalla.

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