Mitte zwei Ansichten vertikal mit NSLayoutConstraint

Stellen Sie sich das folgende Szenario. Sie haben eine UIImageView und einen UIButton. Die erste ist 300x360, die zweite ist 210x70. Die imageview enthält einen Katalog Bild, das button sagt "Katalog öffnen".

Ich würde gerne die position der Elemente in der Hauptansicht, die nach diesen Anforderungen:

die beiden Elemente werden horizontal zentriert, nämlich in der Mitte.x-Koordinaten sollten alle gleich (Blick, Bild und button);
die beiden Elemente werden vertikal zentriert in der folgenden Weise: separator (flexibel) - Bildansicht - separator (fixed, sagen wir, 30 pts) - button - separator (flexibel). Dem obersten und dem untersten separator sollte die gleiche Größe besitzen (dies ist die Bedeutung von,, zentriert).

Kann ich nicht machen dies, um die Arbeit mit NSLayoutConstraint.

So weit, was ich Tat, wurde die Zentrierung der X-Koordinate der beiden Elemente mit NSLayoutAttributeCenterX und NSLayoutRelationEqual den gleichen view Attribut.

Den letzten Teil, nach meiner Idee, zu befestigen Ihre vertikale Ausrichtung.
Ich habe versucht, mit @"V:|-[imageview(360)]-[button(70)]-|" aber es funktioniert nicht (Unable to simultaneously satisfy constraints.).

Wenn ich @"V:|-[imageview(360)]-[button]-|" ich alles bekommen, was teilweise ok. Nämlich, der Obere Teil ist perfekt, aber der button ist gestreckt, so dass die Lücke zwischen den internen separator und dem unteren Rand der Ansicht.

Wie kann ich diese Elemente mit fester Größe und lassen Sie Auto-layout, um nur herauszufinden, wie man Sie in den Blick?

In iOS 9, Blick auf UIStackView und UILayoutGuide für die Lösung dieser Art von Problemen.

InformationsquelleAutor Fabiano Francesconi | 2013-06-25

War ich in der Lage, es zu tun von etwas wie dies:

NSNumber *sepHeight = @60.0F;

//Center the two views horizontally
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1
                                                       constant:0]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1
                                                       constant:0]];

//Position the two views one below the other, using the separator height defined above
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageview]-sepHeight-[button]"
                                                                  options:0
                                                                  metrics:NSDictionaryOfVariableBindings(sepHeight)
                                                                    views:views]];

//Force the button distance from the bottom to be the half of the size of the content
CGFloat constant = (imageview.frame.size.height + button.frame.size.height + [sepHeight floatValue]) / 2.0;
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button
                                                      attribute:NSLayoutAttributeBottom
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterY
                                                     multiplier:1
                                                       constant:constant]];

Der schwierige Teil ist der Konstante Wert. Dieser Wert ist die Hälfte der Höhe aller Ansichten, einschließlich Ihrer Trennzeichen. Dies bedeutet, dass, wenn die Bildansicht Höhe ist 360, die Taste, die Höhe ist 70 und der separator-60, die Konstante wird (360 + 70 + 60)/2 = 245.

Sollte es eine intelligentere Art und Weise, in der Tat, aber für jetzt ich denke, das ist ok.

Clever! Gutes Beispiel für die Nutzung der indirectness der Auto-Layout-denken, und die Koeffizienten und Konstanten. Also, eine Möglichkeit zu beschreiben, ist es-Koeffizient = 0.5 Konstant = (imageHeightConstant + imageButtonVerticalSpaceConstant + buttonHeightConstant ) Oder habe ich da etwas verpasst...? Die Konstanten gespeichert werden können als CGFloat Variablen oder Eigenschaften und angepasst für die entsprechenden Größen... 🙂
Nein, der Multiplikator angewendet wird, um das selbst.Blick.frame.Herkunft.y-Wert und die Konstante Hinzugefügt wird Z-Wert. Ich werde jetzt umschreiben, dass es die Verwendung von Variablen.
Dies funktioniert bei mir auch, danke!

InformationsquelleAutor Fabiano Francesconi

Es gibt zwei Möglichkeiten, dies zu nähern.

Als @uchuugaka schon sagt, Stelle deine Bildansicht und button in einem container anzeigen. Sie haben nicht die gleiche Zentrierung problem, wenn die Untersichten sind fixiert, die Kanten der container (die Sie die Größe entsprechend der Höhe wäre 360 + 30 + 70 == 460. Dann können Sie center container ist in Ihrer Ansicht mit einem einfachen align-center-Y-Einschränkung.
Können Sie spacer Ansichten. Durch hinzufügen von zwei versteckte Ansichten können Sie Einschränkungen angeben, um Sie zu fixieren oben/unten deine Bildansicht und Knopf, mit gleichen Höhen wie Sie wirken als Federn. Hier ist der code, der dies tut, mit Ihren Dimensionen:


- (void) viewDidLoad
{
    [super viewDidLoad];

    UIView* imageview = [UIView new];
    imageview.backgroundColor = [UIColor blueColor];
    imageview.translatesAutoresizingMaskIntoConstraints = NO;

    UIView* button = [UIView new];
    button.backgroundColor = [UIColor greenColor];
    button.translatesAutoresizingMaskIntoConstraints = NO;


    UIView* spacer1 = [UIView new];
    spacer1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent: 0.5];
    spacer1.translatesAutoresizingMaskIntoConstraints = NO;
    spacer1.hidden = YES; //comment out to show spacer!

    UIView* spacer2 = [UIView new];
    spacer2.backgroundColor = [[UIColor redColor] colorWithAlphaComponent: 0.5];
    spacer2.translatesAutoresizingMaskIntoConstraints = NO;
    spacer2.hidden = YES; //comment out to show spacer!

    [self.view addSubview: imageview];
    [self.view addSubview: button];
    [self.view addSubview: spacer1];
    [self.view addSubview: spacer2];

    NSDictionary* views = NSDictionaryOfVariableBindings( imageview, button, spacer1, spacer2 );

    NSArray* constraints;
    constraints = [NSLayoutConstraint constraintsWithVisualFormat: @"V:|[spacer1(==spacer2)][imageview(360)]-30-[button(70)][spacer2(==spacer1)]|"
                                                          options: 0
                                                          metrics: nil
                                                            views: views];
    [self.view addConstraints: constraints];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageview
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:NSLayoutAttributeNotAnAttribute
                                                         multiplier:1
                                                           constant:300]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:NSLayoutAttributeNotAnAttribute
                                                         multiplier:1
                                                           constant:210]];


    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageview
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1
                                                           constant:0]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1
                                                           constant:0]];
}

Ich mag die spacer Blick Idee. Außer, dass es erinnert mich an 90 ' s HTML-spacer-gifs 😉
Spacer Ansichten oder einen extra-container anzeigen, es sei denn, Sie wissen, die (festen) Höhe im Voraus. Oh, gut. 🙂

InformationsquelleAutor TomSwift

0

Sie brauchen, um Ihre vertikalen Abstände, die gleich oder größer als oben auf dem Bild Sicht-und Unterseite der Taste.
Aber das klingt auch so, als wäre es einfacher, einfach auf weitere anzeigen, enthält Ihr Bild und button. Dann-center, die anzeigen V und H in der super Aussicht.

Auto-Layout bedeutet immer noch container Ansichten manchmal.

Das sollte ok sein, aber das problem ist, dass, wenn Sie einen container erstellen, Sie haben das gleiche problem in den container 🙂
Überhaupt nicht. Der container kann eingeschränkt werden, um oben auf der ein sub-view und unten der andere.
Sind Sie richtig. Wenn Sie die Höhe des Containers auf die Summe aller Höhen (und die Separatoren), dann bekommen Sie eine gute Lösung gibt. Ich weiß nicht, wie sehr Sie die Idee, eine Ergänzende Sicht gibt, aber ich denke, die Lösung ist vielleicht einfacher zu verstehen, im Vergleich zu mir.
Ich kann nicht sagen, einer ist besser. Es gibt trade-offs der jeweiligen Lösung. Auto-layout ist noch jung.

InformationsquelleAutor uchuugaka

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.