iOS - Dispositions automatiques

Les mises en page automatiques ont été introduites dans iOS 6.0.Lorsque nous utilisons des dispositions automatiques, notre objectif de déploiement doit être 6.0 et supérieur. Les mises en page automatiques nous aident à créer des interfaces qui peuvent être utilisées pour plusieurs orientations et plusieurs appareils.

But de notre exemple

Nous ajouterons deux boutons qui seront placés à une certaine distance du centre de l'écran. Nous allons également essayer d'ajouter un champ de texte redimensionnable qui sera placé à une certaine distance du dessus des boutons.

Notre approche

Nous ajouterons un champ de texte et deux boutons dans le code ainsi que leurs contraintes. Les contraintes de chaque élément de l'interface utilisateur seront créées et ajoutées à la super vue. Nous devrons désactiver le redimensionnement automatique pour chacun des éléments de l'interface utilisateur que nous ajoutons afin d'obtenir le résultat souhaité.

Étapes impliquées

Step 1 - Créez une application simple basée sur la vue.

Step 2 - Nous n'éditerons que ViewController.m et c'est comme suit -

#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

Points à noter

Dans les étapes 1, 5 et 8, nous avons simplement ajouté par programme deux boutons et un champ de texte respectivement.

Dans le reste des étapes, nous avons créé des contraintes et ajouté ces contraintes aux super vues respectives, qui sont en fait des auto-vues. Les contraintes de l'un des boutons de gauche sont comme indiqué ci-dessous -

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

Nous avons constraintWithItem et toItem qui décident entre quels éléments d'interface utilisateur nous créons la contrainte. L'attribut décide sur quelle base les deux éléments sont liés. "relatedBy" décide de l'effet des attributs entre les éléments. Le multiplicateur est le facteur de multiplication et la constante sera ajoutée au multiplicateur.

Dans l'exemple ci-dessus, le X de leftButton est toujours supérieur ou égal à -60 pixels par rapport au centre de la super vue. De même, d'autres contraintes sont définies.

Production

Lorsque nous exécutons l'application, nous obtenons la sortie suivante sur le simulateur iPhone -

Lorsque nous changeons l'orientation du simulateur en paysage, nous obtiendrons la sortie suivante -

Lorsque nous exécutons la même application sur le simulateur iPhone 5, nous obtiendrons la sortie suivante -

Lorsque nous changeons l'orientation du simulateur en paysage, nous obtiendrons la sortie suivante -