Modification des contraintes avec la mise en page automatique

Question

J'ai une grille de boutons carrés dans une vue, qui correspond parfaitement à l'iPhone 5. Je veux maintenant qu'il soit bien sur l'écran de 3,5 pouces. J'utilise la mise en page automatique, et j'ai créé de nouvelles images pour les 3,5 pouces, qui ont une hauteur un peu plus petite, de sorte qu'ils vont s'adapter à l'écran (ils ne sont plus des carrés). D'après ce que j'ai compris, vous ne pouvez pas utiliser les cadres comme d'habitude lorsque vous utilisez la mise en page automatique? Au lieu de cela, vous devez utiliser des contraintes. Mais comment ferais-je cela?

Fondamentalement, ce que je dois faire est de changer la coordonnée y et la hauteur des boutons.

Voici un exemple de l'aspect de l'écran sur l'écran 4 pouces (barre d'onglets dans le bas).

Answer 1

Représentant cette VFL, ce que vous voulez est quelque chose comme:

Faire les boîtes rouges verticalement de façon uniforme taille verticale, couvrant la durée verticale de leur superview:

@"V:|-[subview1]-[subview2(==subview1)]-[subview3(==subview1)]-|" 
@"V:|-[subview4]-[subview5(==subview4)]-[subview6(==subview4)]-|" 

De même , faites les boîtes horizontalement de la même taille, en couvrant la portée horizontale de leur aperçu, aussi:

@"H:|-[subview1]-[subview4(==subview1)]-|" 
@"H:|-[subview2]-[subview5(==subview2)]-|" 
@"H:|-[subview3]-[subview6(==subview3)]-|" 

Cela rend les six sous-vues de taille égale et uniformément espacées dans leur aperçu. Et ceci illustre l'un des avantages de la mise en page automatique, car nous évitons toute référence aux valeurs y ou height. Nous avons seulement à définir la relation entre les vues, leurs frères et sœurs, et leur superview, et la mise en page automatique prend soin du reste.

Ce modèle s'applique si vous le faites par programme avec VFL comme ci-dessus, ou dans Interface Builder, mais j'espère que cela illustre le concept.

Vous pouvez également utiliser un UICollectionView, conçu pour espacer ces contrôles, et vous pouvez le configurer de sorte qu'il ajuste correctement la disposition pour le mode portrait et paysage.

---

Par exemple, pour ajouter six vues d'image à mon avis, je peux ajouter QuartzCore.framework à projeter (que je peux utiliser pour créer l'arrière-plan de vue de l'image rouge avec des coins arrondis), puis importer l'en-tête:

#import <QuartzCore/QuartzCore.h> // and 

Et puis dans viewDidLoad:

NSMutableArray *subviews = [NSMutableArray array]; 

for (NSInteger i = 0; i < 6; i++) 
{ 
    UIImageView *subview = [[UIImageView alloc] init]; 
    [subviews addObject:subview]; 
    subview.layer.cornerRadius = 10.0; 
    subview.backgroundColor = [UIColor redColor]; 
    subview.contentMode = UIViewContentModeCenter; 
    subview.translatesAutoresizingMaskIntoConstraints = NO; 
    [self.view addSubview:subview]; 
} 

NSDictionary *views = @{@"subview1": subviews[0], 
         @"subview2": subviews[1], 
         @"subview3": subviews[2], 
         @"subview4": subviews[3], 
         @"subview5": subviews[4], 
         @"subview6": subviews[5]}; 

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[subview1]-[subview2(==subview1)]-[subview3(==subview1)]-|" options:0 metrics:nil views:views]]; 
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[subview4]-[subview5(==subview4)]-[subview6(==subview4)]-|" options:0 metrics:nil views:views]]; 

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview1]-[subview4(==subview1)]-|" options:0 metrics:nil views:views]]; 
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview2]-[subview5(==subview2)]-|" options:0 metrics:nil views:views]]; 
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[subview3]-[subview6(==subview3)]-|" options:0 metrics:nil views:views]]; 

Ensuite, si j'utilise des images PNG avec un fond transparent, je peux définir la propriété image pour ces six vues d'image, laissant la mise en page automatique définir le frame, QuartzCore fera les coins bien arrondis, etc.