iOS Visual Basic Basics: contraintes dans le code!


Exemple

HVFL est un langage conçu pour contraindre les éléments de l'interface utilisateur de manière simple et rapide. En général, VFL a un avantage sur la personnalisation de l'interface utilisateur traditionnelle dans Interface Builder, car il est beaucoup plus lisible, accessible et compact.

Voici un exemple de VFL, dans lequel trois UIViews sont contraintes de gauche à droite, remplissant superView.width , avec aGradeView

"H:|[bgView][aGradeView(40)][bGradeView(40)]|"

Il y a deux axes dans lesquels on peut contraindre les objets d'interface utilisateur, horizontalement et verticalement.

Chaque ligne de VFL commence toujours par H: ou V: Si aucun n'est présent, l'option par défaut est H:

En passant, nous avons un pipeline. | Ce symbole, ou le tuyau, fait référence à la superview. Si vous regardez de plus près l'extrait de code VFL ci-dessus, vous remarquerez deux de ces pipelines.

Cela signifie les deux extrémités horizontales de la superview, les limites extérieures et extérieures.

Ensuite, vous verrez des crochets, dans le premier ensemble de crochets, nous avons bgView . Quand nous avons des crochets, cela fait référence à un élément d'interface utilisateur, maintenant vous pourriez vous demander comment établir un lien entre le nom et l'élément d'interface utilisateur réel, un exutoire peut-être?

Je couvrirai cela à la fin du post.

Si vous regardez la deuxième paire de crochets [aGradeView(50)] , nous avons des parenthèses encapsulées à l'intérieur, lorsque cela est présent, il définit la largeur / hauteur en fonction des axes, qui est dans ce cas de 50 pixels en largeur.

Les premiers crochets [bgView] n’ont pas de largeur explicitement définie, ce qui signifie qu’ils vont s’étendre le plus possible.

Bon, c'est tout pour les bases, plus sur les choses avancées dans un autre exemple.


par exemple:
VFL_demo

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // horizontal
    NSArray *blueH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:@{@"blueView" : blueView}];
    [self.view addConstraints:blueH];

    // vertical
    NSArray *blueVandRedV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllTrailing metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:blueVandRedV];

    NSLayoutConstraint *redW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redW];