Auto Layout es un sistema para crear interfaces adaptables a diferentes pantallas mediante el uso de relaciones y constraints entre los elementos de la interfaz. Permite especificar attributes como leading, trailing, top y bottom constraints para posicionar elementos y también height, width y constant constraints para especificar tamaños. Size Classes permite adaptar la interfaz para diferentes tipos y orientaciones de dispositivos usando categorías como Any, Compact y Regular en lugar de verificar el modelo de dispositivo específico.

1. Auto Layout
It never works!

2. Auto Layout
Hay alguna forma de obviarlo?

3. Auto Layout
Hora de aprender!

8. Entrando al tema…

12. view.frame =
CGRectMake(20, 10, 50,
100);

13. points = resolution

14. points = resolution * 2
Para pantallas que soportan resolución Retina

18. Código para UI
if (IPHONE4) {
…
} else if (IPHONE 5){
…
} else if (IPHONE6) {
…
} else if (IPHONE6PLUS) {
…
} else if (IPAD) {
…
}

20. La Solución de Apple para
esto es:
Auto Layout y Size Classes

21. Auto Layout
Sistema descriptivo de relaciones entre elementos

22. Constraints
Relaciones entre elementos

23. Leading Constraint
A la Izquierda

24. Trailing Constraint
A la Derecha

25. Top Constraint
Arriba

26. Bottom Constraint
Abajo

27. Height and Width Constraint
Altura y Ancho

28. ?

29. Constant
Tamaño del Constraint
30

30. Constant
Tamaño del Constraint
60

31. Constant
Tamaño del Constraint
= 60

32. Constant
Tamaño del Constraint
>= 60

33. Constant
Tamaño del Constraint
<= 60

34. Otros conceptos
• Constraint Priority: prioridad, si dos constraints están en
conflictos el que tiene mayor prioridad gana
• Intrinsic Size: tamaño mínimo de un elemento (view) para
que se vea completamente
• Hugging Priority: cuanto los constraint van a reducir el
taño del elemento hasta tocar su Intrinsic Size
• Compression Resistance Priority: cuando varios elementos
compiten por el espacio y alguno tiene que ser reducido
mas allá de su Intrinsic Size, el que tenga menor prioridad
sera reducido y el de mayor prioridad no lo hará

35. Size Classes
Any, Compact y Regular

36. Código para UI (antes)
if (IPHONE4) {
…
} else if (IPHONE 5){
…
} else if (IPHONE6) {
…
} else if (IPHONE6PLUS) {
…
} else if (IPAD) {
…
}

37. Código para UI usando Size
Classes
if (Any) {
…
} else if (Regular) {
…
} else if (Compact) {
…
}
Podemos especificar diferentes orientaciones
usando Horizontal Size Class y Vertical Size Class