iOS: diseños automáticos

Los diseños automáticos se introdujeron en iOS 6.0.Cuando usamos diseños automáticos, nuestro objetivo de implementación debe ser 6.0 y superior. Los diseños automáticos nos ayudan a crear interfaces que se pueden usar para múltiples orientaciones y múltiples dispositivos.

Objetivo de nuestro ejemplo

Agregaremos dos botones que se colocarán a cierta distancia del centro de la pantalla. También intentaremos agregar un campo de texto redimensionable que se colocará desde una cierta distancia por encima de los botones.

Nuestro Enfoque

Agregaremos un campo de texto y dos botones en el código junto con sus restricciones. Las restricciones de cada elemento de la interfaz de usuario se crearán y agregarán a la supervista. Tendremos que deshabilitar el cambio de tamaño automático para cada uno de los elementos de la interfaz de usuario que agreguemos para obtener el resultado deseado.

Pasos involucrados

Step 1 - Cree una aplicación sencilla basada en vistas.

Step 2 - Editaremos solo ViewController.m y es el siguiente -

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) UIButton *leftButton;
@property (nonatomic, strong) UIButton *rightButton;
@property (nonatomic, strong) UITextField *textfield;

@end
@implementation ViewController

- (void)viewDidLoad {
   [super viewDidLoad];
   UIView *superview = self.view;

   /*1. Create leftButton and add to our view*/
   self.leftButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
   self.leftButton.translatesAutoresizingMaskIntoConstraints = NO;
   [self.leftButton setTitle:@"LeftButton" forState:UIControlStateNormal];
   [self.view addSubview:self.leftButton];

   /* 2. Constraint to position LeftButton's X*/
   NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
   constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
   NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];

   /* 3. Constraint to position LeftButton's Y*/
   NSLayoutConstraint *leftButtonYConstraint = [NSLayoutConstraint 
   constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterY 
   relatedBy:NSLayoutRelationEqual toItem:superview attribute:
   NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];

   /* 4. Add the constraints to button's superview*/
   [superview addConstraints:@[ leftButtonXConstraint,
   leftButtonYConstraint]];

   /*5. Create rightButton and add to our view*/
   self.rightButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
   self.rightButton.translatesAutoresizingMaskIntoConstraints = NO;
   [self.rightButton setTitle:@"RightButton" forState:UIControlStateNormal];
   [self.view addSubview:self.rightButton];

   /*6. Constraint to position RightButton's X*/
   NSLayoutConstraint *rightButtonXConstraint = [NSLayoutConstraint 
   constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterX 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
   NSLayoutAttributeCenterX multiplier:1.0 constant:60.0f];

   /*7. Constraint to position RightButton's Y*/
   rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh;
   NSLayoutConstraint *centerYMyConstraint = [NSLayoutConstraint 
   constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterY 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
   NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
   [superview addConstraints:@[centerYMyConstraint,
   rightButtonXConstraint]];

   //8. Add Text field
   self.textfield = [[UITextField alloc]initWithFrame:
   CGRectMake(0, 100, 100, 30)];
   self.textfield.borderStyle = UITextBorderStyleRoundedRect;
   self.textfield.translatesAutoresizingMaskIntoConstraints = NO;
   [self.view addSubview:self.textfield];

   //9. Text field Constraints
   NSLayoutConstraint *textFieldTopConstraint = [NSLayoutConstraint 
   constraintWithItem:self.textfield attribute:NSLayoutAttributeTop 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview 
   attribute:NSLayoutAttributeTop multiplier:1.0 constant:60.0f];
   NSLayoutConstraint *textFieldBottomConstraint = [NSLayoutConstraint 
   constraintWithItem:self.textfield attribute:NSLayoutAttributeTop 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.rightButton 
   attribute:NSLayoutAttributeTop multiplier:0.8 constant:-60.0f];
   NSLayoutConstraint *textFieldLeftConstraint = [NSLayoutConstraint 
   constraintWithItem:self.textfield attribute:NSLayoutAttributeLeft 
   relatedBy:NSLayoutRelationEqual toItem:superview attribute:
   NSLayoutAttributeLeft multiplier:1.0 constant:30.0f];
   NSLayoutConstraint *textFieldRightConstraint = [NSLayoutConstraint 
   constraintWithItem:self.textfield attribute:NSLayoutAttributeRight 
   relatedBy:NSLayoutRelationEqual toItem:superview attribute:
   NSLayoutAttributeRight multiplier:1.0 constant:-30.0f];
   [superview addConstraints:@[textFieldBottomConstraint ,
   textFieldLeftConstraint, textFieldRightConstraint, 
   textFieldTopConstraint]];
}

- (void)didReceiveMemoryWarning {
   [super didReceiveMemoryWarning];
   // Dispose of any resources that can be recreated.
}
@end

Puntos a tener en cuenta

En los pasos marcados 1, 5 y 8, simplemente agregamos programáticamente dos botones y un campo de texto respectivamente.

En el resto de los pasos, creamos restricciones y agregamos esas restricciones a las respectivas super vistas, que en realidad son vistas propias. Las restricciones de uno de los botones de la izquierda son las que se muestran a continuación:

NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];

Tenemos constraintWithItem y toItem que deciden entre qué elementos de la interfaz de usuario estamos creando la restricción. El atributo decide sobre qué base se vinculan los dos elementos. "relatedBy" decide cuánto efecto tienen los atributos entre los elementos. El multiplicador es el factor de multiplicación y la constante se sumará al multiplicador.

En el ejemplo anterior, la X de leftButton es siempre mayor o igual a -60 píxeles con respecto al centro de la supervista. De manera similar, se definen otras restricciones.

Salida

Cuando ejecutamos la aplicación, obtendremos el siguiente resultado en el simulador de iPhone:

Cuando cambiamos la orientación del simulador a paisaje, obtendremos el siguiente resultado:

Cuando ejecutamos la misma aplicación en el simulador de iPhone 5, obtendremos el siguiente resultado:

Cuando cambiamos la orientación del simulador a paisaje, obtendremos el siguiente resultado: