Interface Builder: ¿Para qué sirven los Deltas de iOS 6/7 de diseño de UIView?


111

Acabo de notar la propiedad Delta de iOS 6/7 que se encuentra bajo el diseño de estructuras de UIView.

¿Para qué es esto y por qué falta en AutoLayout?

ingrese la descripción de la imagen aquí

Respuestas:


83

En realidad, esto se refiere a la posición delta entre el diseño de iOS6 a iOS7.

En iOS7, algunas vistas pueden ocultar la barra de estado o hacerla transparente y, de hecho, se superponen en la parte superior de la vista. Entonces, si coloca un elemento de IU en (0.0, 0.0) en iOS6, aparecerá debajo de la barra de estado, pero en iOS7 aparecerá parcialmente cubierto debajo de la barra de estado. Entonces, en ese caso, querría un delta que coincida con la altura de la barra de estado (20.0 puntos) para que el diseño se vea igual en iOS6 e iOS7.

Creo que esto no es necesario si usa el diseño automático, pero, por supuesto, perderá la compatibilidad con iPad1, lo que muchos de nosotros no estamos dispuestos a ceder en este momento.


27
Para mí, descubrí que es el delta de iOS 7 a iOS 6. Bajé mis elementos 20 puntos, luego configuré un -20 para Delta Y.
guptron

esto es particularmente útil con UIProgressView, que es mucho más delgado en iOS 7
Lee Probert

108

Nota: me di cuenta de esta pregunta hace un tiempo, pero solo estoy publicando mi respuesta ahora porque se ha levantado el NDA

¿Por qué no aparece para AutoLayout?

Como habrás notado, iOS 7 ofrece un aspecto completamente nuevo. El aspecto de los elementos de la interfaz de usuario ha cambiado, pero también algunos de sus tamaños (o métricas en general). Esto puede hacer que el diseño de la interfaz para adaptarse tanto a iOS 7 como a sus predecesores sea un poco molesto.

La línea oficial de Apple es usar AutoLayout para resolver esto; esto debería evitarle la molestia de diseñar los elementos de la interfaz de usuario. A veces, incorporar esto no es fácil, especialmente si aún debe admitir iOS 5 por razones comerciales, o sus interfaces se administran de una manera que dificulta la implementación de AutoLayout. Como tal, Apple parece haber brindado una manera de hacer su trabajo un poco más fácil si cae en esta categoría de nicho, y lo han llamado Deltas iOS 6/7.

Ok entonces, ¿qué hace?

Si bien la etiqueta en Interface Builder no es clara en cuanto a lo que significa 'Delta' en este contexto, el código contenido en el archivo .xib que corresponde a esta característica es un poco más claro:

<inset key="insetFor6xAndEarlier" minX="-50" minY="-100" maxX="-50" maxY="300"/>

El nombre de la clave insetFor6xAndEarlierestablece explícitamente lo que hace; puede proporcionar inserciones alternativas para los elementos de la interfaz de usuario cuando se ejecuta en los predecesores de iOS 7. Por ejemplo, lo anterior define el siguiente cambio delta:

x: 50
y: 100
width: -100
height: 200

Si bien los valores almacenados en .xib no se corresponden directamente con los valores cotizados, existe una correlación entre ellos.

x: -minX
y: -minY
width: minX + maxX
height: minY + maxY

Las imágenes a continuación muestran este cambio visualmente. Es un ejemplo bastante extremo, pero es para demostrar su capacidad. En la práctica, solo esperaría tener cambios delta de solo unos pocos píxeles.

Vista de iOS7

Vista de iOS6

Puede notar que los valores son inversos para la vista de iOS 6; esto se debe a que los deltas son relativos al tipo de vista con la que está trabajando. Si está editando para iOS 6, los deltas existen para transformar el elemento correctamente para iOS 7 (lo contrario del ejemplo anterior).

Para ver los diferentes estilos, puede cambiar la forma en que Interface Builder lo presenta en función del sistema operativo en el que se ejecutará. Esto está contenido en el Inspector de archivos-> Documento de Interface Builder (primera pestaña en la barra derecha), así:

Interruptor de estilo de interfaz

¿Existe esto si me gusta codificar mi interfaz a mano?

No directamente, pero puede lograr fácilmente el mismo efecto si tiene verificaciones condicionales de la versión del sistema operativo dentro de su código y establece la posición / tamaño correctos en consecuencia. La capacidad delta existe en Interface Builder porque no habría una forma sencilla de tener un posicionamiento condicional sin tener código para hacerlo, y el objetivo de Interface Builder es sacar tanto código como sea posible para la interfaz de usuario.

En general...

Apple recomienda encarecidamente que utilice AutoLayout, le facilita la vida en la mayoría de los casos. Si no puede usarlo (por las razones mencionadas anteriormente), los deltas le brindan la flexibilidad de colocar los elementos de la interfaz de usuario de manera adecuada, según las métricas del sistema operativo actual, sin la necesidad de reposicionarlos manualmente en el código. Un buen ejemplo es ajustar la falta de barra de estado, pero hay muchos otros casos de uso.

Naturalmente, si solo está desarrollando para iOS7 y superior, no necesita conocer esta función / no la descubrirá. Solo si necesita tener dispositivos iOS6 ejecutando su aplicación cuando está construido con el SDK de iOS7, sin diseño automático, necesita deltas.

En el momento de escribir este artículo (21 de agosto), no puedo encontrar ninguna documentación sobre esta función, ni menciones en el material de la WWDC. He jugado y, después de investigar un poco, eso es lo que descubrí.


2
Muchas gracias WDUK
Kamar Shad

No hay propiedades hasta ahora, eso es lo que necesitaba saber
Jasper

30

Sé que esto ya ha sido respondido, solo agregué una pequeña variante con la esperanza de que también pudiera ayudar a aquellos que no usan el diseño automático y aún desean admitir iOS 6.1 y versiones anteriores.

Lea esta Guía de transición de Apple: compatible con la versión anterior

Elija 'Ver como' a 'iOS 7.0 y posterior'

ingrese la descripción de la imagen aquí

Interfaz de usuario base para iOS 7. Para iOS 6, proporcione el valor delta adecuado. Use la vista previa para ver cómo se representará en dispositivos iOS 7 y iOS 6.

ingrese la descripción de la imagen aquí

Pasos rápidos:

Seleccione cada hijo inmediato de la vista raíz individualmente y agregue 20px a su valor 'Y'.

ingrese la descripción de la imagen aquí

Luego, seleccione todos los hijos inmediatos colectivamente y dé delta Y como -20px. También puede hacer esto por lotes o individualmente.

ingrese la descripción de la imagen aquí


9

AutoLayout requiere al menos iOS 6.0. Si desea admitir iOS 5.0, no puede usar AutoLayout.

Y esos deltas se utilizan para ayudarlo a ajustar la posición de la vista en diferentes versiones de iOS (principalmente iOS 7 y versiones de iOS inferiores a 7).

Utilizo esos valores para ayudarme a que me guste esta imagen. ingrese la descripción de la imagen aquí


1
Cuando cambio estos no pasa nada, ¿hay otro paso involucrado?
Acero reciclado

@RecycledSteel vea mi respuesta aquí: enlace
Riskov

3

Para ver iOS 6/7 Delta en acción, haré una demostración con un SegmentedControl que aparece correctamente en los dispositivos iOS 6 e iOS 7.

Primero, seleccione su .Xib o ViewController en Storyboard. Desmarca Usar diseño automático y selecciona " Ver como iOS 7 y posterior ".

ingrese la descripción de la imagen aquí

En el lienzo de Interface Builder, coloque su SegmentedControl de modo que su origin.y sea ​​20. En iOS 6/7 Delta, elija -20 para DeltaY

ingrese la descripción de la imagen aquí

Esto hará que su SegmentedControl se coloque debajo de la barra de estado en dispositivos iOS 6 y iOS 7

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

Otras citas útiles de la Guía del desarrollador de la barra de estado de iOS 7

Los deltas se pueden configurar individualmente para cada vista y funcionan como es de esperar. Si su guión gráfico o plumilla está configurado para verse como iOS 6, la configuración de los deltas hará que esa vista se cambie y / o cambie de tamaño según la cantidad delta establecida cuando se ejecute en iOS 7. Alternativamente, si su guión gráfico o plumilla está configurado para ver en iOS 7, los deltas se aplicarán cuando se ejecute en iOS 6


0

Si está utilizando AutoLayout, Delta no está disponible. Pruebe esto (probado en iPhone 4s con iOS6):

- (void) viewWillLayoutSubviews {

//iOS 6 workaround offset
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7) {

    self.view.clipsToBounds = YES;
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenHeight = 0.0;
    screenHeight = screenRect.size.width;
    CGRect screenFrame = CGRectMake(0, -20, self.view.frame.size.width,self.view.frame.size.height+10);

    self.view.frame = screenFrame;
}
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.