Colocacin de los elementos visuales

Master en Ingeniera Informtica Programacin en el entorno Apple-iOS

Orientaciones y tamaos

Los dispositivos mviles

pueden adoptar diferentes
orientaciones

Asimismo hay dispositivos de

tamaos

De la mayora de las
aplicaciones se espera que se
muestren bien en diferentes
orientaciones y tamaos
2

Diseo dinmico de la interfaz de usuario

Recolocacin programtica exacta (Frame based

layout)
Mscaras de ajuste de tamao (Autoresizing masks)
Restricciones de colocacin (Autolayout)
Stack views

Qu es el Autolayout?

Permite configurar interfaces

verstiles creando descripciones
matemticas de las relaciones
entre los elementos que la
forman

Se basa en establecer
restricciones (constraints) que
indican los tamaos y posiciones,
absolutos o relativos, que
queremos para los distintos
elementos de la interfaz
4

Componentes de una restriccin

Una restriccin de autolayout establece una relacin (=, <=, >=) entre un atributo de un tem y un
atributo de otro tem (o del mismo) mediante una formula que incluye un multiplicador y una
constante aditiva
5

Autolayout attributes

Cmo se ponen
restricciones de
Autolayout?

En el Interface Builder:

Arrastrando el ratn de un elemento a otro, con ctrl apretado, en el

canvas o el Outline view

Usando el men Editor

Con los botones que aparecen en la parte inferior del Interface builder

Programticamente

Cuntas restricciones necesito?

Cada vista necesita 2 restricciones de igualdad por

cada dimensin para determinar de forma no
ambigua su tamao y posicin

Si se usan restricciones de desigualdad, se necesitan

2 por cada restriccin de igualdad que se quite

El tamao de algunas vistas puede quedar

determinado pro su intrinsic content size

El sistema intenta hallar una disposicin que

satisfaga todas las restricciones al mismo tiempo. Si
no puede satisface primero las de mayor prioridad
8

La opcin Preview del

Assistant editor permite
ver la apariencia de la
escena en distintos
dispositivos y
orientaciones

Layout Preview
Puedo
previsualizar el
resultado del
Autolayout?
El signo + de la parte inferior permite aadir
nuevos dispositivos
9

Size classes (1)

Vertical size class
regular
compact

Horizontal size class

compact
regular
iPhone 6 plus en horizontal
iPhones 4-5-6 en horizontal
iPhones en vertical

iPads en cualquier
orientacin

Las size classes son

abstracciones que
representan el espacio
horizontal y vertical
disponible para cada
orientacin y tamao de
dispositivo
Para cada dimensin hay
dos posibles valores:
compact y regular

10

 Las diferentes combinaciones de valores para

cada size class se pueden seleccionar en la
parte inferior del Interface builder
Ello permite fijar layouts diferentes para cada
combinacin

Size classes (2)

Lo normal, es
comenzar con la
combinacin
wAny hAny y
hacer ajustes para
las otras cuando
sea necesario

11

Size Classes (3)

El size inspector se puede

usar para seleccionar las

combinaciones para las
que una vista o restriccin
est instalada

12

Size classes por cdigo

Por cdigo, se pueden conocer los valores actuales

de las size classes de una escena accediendo a la

propiedad traitCollection

Se pueden recibir notificaciones cuando cambian

los valores de las size classes redefiniendo los

mtodos

- traitCollectionDidChange:
- willTransitionToTraitCollection:withTransitionCoordinator:
13

Stack views

Una Stack view muestra un conjunto de

vistas en disposicin lineal ejecutando las
restricciones necesarias para satisfacer
unos parmetros de alineacin,
distribucin y espaciado determinados

Las subvistas de una Stack View pueden

ser Stack Views, permitiendo contruir
interfaces complejas

Las Stack Views no se adaptan bien a la

instalacin y desinstalacin dinmica de
vistas: la opcin es ocultar/mostrar vistas
programticamente

14

Autolayout por cdigo

Lo mas apropiado es acceder a las propiedades de

anclaje (anchor) de las vistas (clase

NSLayoutAnchor, subclases NSLayoutDimension,
NSLayoutXAxisAnchor, NSLayoutYAxisAnchor)

Tambin se pueden crear restricciones

directamente con la clase NSLayoutConstraint

15

Ejemplo: NSConstraint vs anchors

// Usando NSLayoutconstraint
NSLayoutConstraint(item: view1,
attribute: .Height,
relatedBy: NSLayoutRelation.Equal,
toItem: view1,
attribute: .Width,
multiplier: 2.0,
constant: 1.0).active = true
// Usando anchors
view1.heightAnchor.constraintEqualToAnchor(view1.widthAnchor,
multiplier: 2.0,
constant: 1.0)
16

Lecturas recomendadas

Auto Layout Guide

(https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/Autolay
outPG/index.html)

iOS Human Interface Guidelines: Adaptivity and Layout

(https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHI
G/LayoutandAppearance.html)

Size Class Design Help (https://developer.apple.com/library/ios/recipes/xcode_helpIB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html)

View Controller Programming Guide for iOS: Adaptivity and size changes
(https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/TheA
daptiveModel.html#//apple_ref/doc/uid/TP40007457-CH19-SW1)

17

Colocacin de los elementos visuales

Master en Ingeniera Informtica Programacin en el entorno Apple-iOS