wake-up-neo.com

iOS: Wie animiert man zu neuer Autolayout-Einschränkung (Höhe)

Ich habe noch nie mit autolayout constraints gearbeitet. Ich habe eine kleine neue App, an der ich arbeite, und habe festgestellt, dass die Ansichten der NIB standardmäßig auf Autolayout eingestellt sind. Also nahm ich an, dass ich die Gelegenheit nutzen würde,mitit zu arbeiten und herauszufinden, wohin Apple damit will.

Erste Herausforderung:

Ich muss die Größe einer MKMapView ändern und möchte sie an die neue Position animieren. Wenn ich das so mache, wie ich es gewohnt bin:

[UIView animateWithDuration:1.2f
     animations:^{
         CGRect theFrame = worldView.frame;
         CGRect newFrame = CGRectMake(theFrame.Origin.x, theFrame.Origin.y, theFrame.size.width, theFrame.size.height - 170);
         worldView.frame = newFrame;
}];

... dann wird die MKMapView bei jeder Aktualisierung einer Geschwisteransicht auf ihre ursprüngliche Höhe zurückgesetzt (in meinem Fall wird der Titel eines UISegmentedControls aktualisiert [myUISegmentedControl setTitle:newTitle forSegmentAtIndex:0]).

Ich möchtethinkalso die Einschränkungen von MKMapView so ändern, dass sie gleich der Höhe der übergeordneten Ansicht sind und sich relativ zum oberen Rand des UISegmentedControls befinden, daswarabdeckung: V:[MKMapView]-(16)-[UISegmentedControl]

Ich möchte, dass die MKMapView-Höhe verkürzt wird, sodass einige Steuerelemente unter der Kartenansicht angezeigt werden. Dazu muss ichthinkdie Einschränkung von einer festen Ansicht in voller Größe in eine Ansicht ändern, bei der der untere Rand auf den oberen Rand eines UISegmentedControl beschränkt ist ... und ich möchte, dass er animiert wird als Ansicht schrumpft auf neue Größe.

Wie geht man damit um?

Bearbeiten - diese Animation istnichtanimierend obwohl sich der untere Rand der Ansicht sofort nach oben bewegt:

    [UIView animateWithDuration:1.2f
         animations:^{
             self.nibMapViewConstraint.constant = -170;

    }];

und die nibMapViewConstraint ist in IB mit der unteren vertikalen Raumbeschränkung verbunden.

121
Meltemi

Nachdem Sie Ihre Einschränkung aktualisiert haben:

[UIView animateWithDuration:0.5 animations:^{[self.view layoutIfNeeded];}];

Ersetzen Sie self.view durch einen Verweis auf die enthaltende Ansicht.

172
Ed McManus

Dies funktioniert für mich (sowohl iOS7 als auch iOS8 +). Klicken Sie auf die automatische Layout-Einschränkung, die Sie anpassen möchten (im Schnittstellen-Builder, z. B. oberste Einschränkung). Machen Sie anschließend ein IBOutlet.

@property (strong, nonatomic) IBOutlet NSLayoutConstraint *topConstraint;

Animiere nach oben;

    self.topConstraint.constant = -100;    
    [self.viewToAnimate setNeedsUpdateConstraints]; 
    [UIView animateWithDuration:1.5 animations:^{
        [self.viewToAnimate layoutIfNeeded]; 
    }];

Animiere zurück zum ursprünglichen Ort

    self.topConstraint.constant = 0;    
    [self.viewToAnimate setNeedsUpdateConstraints];  
    [UIView animateWithDuration:1.5 animations:^{
        [self.viewToAnimate layoutIfNeeded];
    }];
84
DevC

Es gibt ein sehr gutes Tutorial von Apple selbst, das erklärt, wie man Animationen mit Autolayout verwendet Folgen Sie diesem link und suchen Sie dann das Video mit dem Namen "Auto layout by example" .__ und im letzten Teil geht es um die Verwendung von Animationen.

11
Glenn

Ich habe diese kleine Demo zur Verfügung gestellt . Es zeigt, wie Einschränkungen für das automatische Layout in einem einfachen Beispiel geändert und animiert werden können. Schauen Sie sich einfach die DemoViewController.m an.

3
Jens Schwarzer

Die meisten Benutzer verwenden das automatische Layout, um Elemente in ihren Ansichten zu gestalten und die Layoutbeschränkungen zu ändern, um Animationen zu erstellen. 

Eine einfache Möglichkeit, dies ohne viel Code auszuführen, besteht darin, die UIView zu erstellen, die Sie im Storyboard animieren möchten, und dann eine versteckte UIView zu erstellen, an der die UIView enden soll. Sie können die Vorschau in xcode verwenden, um sicherzustellen, dass beide UIViews dort sind, wo Sie sie haben möchten. Blenden Sie danach die End-UIView aus und tauschen Sie die Layouteinschränkungen aus. 

Es gibt eine Pod-Datei zum Austauschen von Layout-Einschränkungen, die als SBP bezeichnet wird, wenn Sie sie nicht selbst schreiben möchten. 

Hier ist ein Tutorial .

1
Arjay Waran

Es ist nicht notwendig, mehr IBOutlet reference der Einschränkung zu verwenden. Stattdessen können Sie access oder update direkt angewendete Einschränkung verwenden, die entweder von Programmatically oder von Interface Builder in jeder Ansicht mit der Bibliothek KVConstraintExtensionsMaster angewendet wird. Diese Bibliothek verwaltet auch das Cumulative-Verhalten von NSLayoutConstraint.

So fügen Sie die Höhenbeschränkung für containerView hinzu 

 CGFloat height = 200;
 [self.containerView applyHeightConstrain:height];

So aktualisieren Sie die Höhenbeschränkung von containerView mit der Animation 

[self.containerView accessAppliedConstraintByAttribute:NSLayoutAttributeHeight completion:^(NSLayoutConstraint *expectedConstraint){
        if (expectedConstraint) {
            expectedConstraint.constant = 100;

            /* for the animation */ 
            [self.containerView  updateModifyConstraintsWithAnimation:NULL];
      }
    }];
0