iOS: layout automatici

I layout automatici sono stati introdotti in iOS 6.0.Quando utilizziamo layout automatici, il nostro obiettivo di distribuzione dovrebbe essere 6.0 e versioni successive. I layout automatici ci aiutano a creare interfacce che possono essere utilizzate per più orientamenti e più dispositivi.

Obiettivo del nostro esempio

Aggiungeremo due pulsanti che verranno posizionati ad una certa distanza dal centro dello schermo. Proveremo anche ad aggiungere un campo di testo ridimensionabile che verrà posizionato da una certa distanza sopra i pulsanti.

Il nostro approccio

Aggiungeremo un campo di testo e due pulsanti nel codice insieme ai loro vincoli. I vincoli di ogni elemento dell'interfaccia utente verranno creati e aggiunti alla super visualizzazione. Dovremo disabilitare il ridimensionamento automatico per ciascuno degli elementi dell'interfaccia utente che aggiungiamo per ottenere il risultato desiderato.

Passaggi coinvolti

Step 1 - Crea una semplice applicazione basata sulla visualizzazione.

Step 2 - Modificheremo solo ViewController.m ed è il seguente -

#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

Punti da notare

Nei passaggi contrassegnati 1, 5 e 8, abbiamo aggiunto solo a livello di programmazione rispettivamente due pulsanti e un campo di testo.

Nel resto dei passaggi, abbiamo creato i vincoli e li abbiamo aggiunti alle rispettive super viste, che in realtà sono auto-viste. I vincoli di uno dei pulsanti di sinistra sono come mostrato di seguito:

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

Abbiamo constraintWithItem e toItem che decidono tra quali elementi dell'interfaccia utente stiamo creando il vincolo. L'attributo decide su quale base i due elementi sono collegati insieme. "relatedBy" decide quanto effetto hanno gli attributi tra gli elementi. Il moltiplicatore è il fattore di moltiplicazione e la costante verrà aggiunta al moltiplicatore.

Nell'esempio precedente, la X di leftButton è sempre maggiore o uguale a -60 pixel rispetto al centro della super view. Allo stesso modo, vengono definiti altri vincoli.

Produzione

Quando eseguiamo l'applicazione, otterremo il seguente output sul simulatore di iPhone:

Quando cambiamo l'orientamento del simulatore in orizzontale, otterremo il seguente output:

Quando eseguiamo la stessa applicazione sul simulatore di iPhone 5, otterremo il seguente output:

Quando cambiamo l'orientamento del simulatore in orizzontale, otterremo il seguente output: