iOS: Jak można animować do nowego ograniczenia autoukładu (wysokość)

Nigdy wcześniej nie pracowałem z ograniczeniami autoukładu . Mam małą nową aplikację, nad którą pracuję i zauważyłem, że widoki NIB są domyślnie ustawione na automatyczne układanie. Pomyślałem więc, że skorzystam z okazji, aby z tym popracować i spróbuję dowiedzieć się, dokąd zmierza Apple.

Pierwsze wyzwanie:

Muszę zmienić rozmiar MKMapView i chcę go animować do nowej pozycji. Jeśli zrobię to w sposób, do którego przywykłem:

[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;
}];

... wtedy MKMapView „przyskoczy” z powrotem do swojej pierwotnej wysokości za każdym razem, gdy zostanie zaktualizowany widok rodzeństwa (w moim przypadku tytuł UISegmentedControl jest aktualizowany [myUISegmentedControl setTitle:newTitle forSegmentAtIndex:0]).

Więc, co mam myśleć chcę zrobić, to zmienić więzy MKMapView z równym obszyty widoku nadrzędnego do bycia w stosunku do górnej części UISegmentedControl że został obejmujące:V:[MKMapView]-(16)-[UISegmentedControl]

Chcę, aby wysokość MKMapView została skrócona, tak aby niektóre elementy sterujące pod widokiem mapy były widoczne. Aby to zrobić, myślę, że muszę zmienić ograniczenie ze stałego widoku w pełnym rozmiarze na taki, w którym dół jest ograniczony do góry UISegmentedControl ... i chciałbym, aby był animowany, gdy widok kurczy się do nowego rozmiaru.

Jak się do tego zabrać?

Edytuj - ta animacja nie jest animowana, chociaż dół widoku przesuwa się natychmiast w górę o 170:

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

    }];

a nibMapViewConstraintjest podłączony w IB do dolnego ograniczenia przestrzeni w pionie.

Po zaktualizowaniu ograniczenia:

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

Zastąp self.viewodwołaniem do widoku zawierającego.

To działa dla mnie (zarówno iOS7, jak i iOS8 +). Kliknij ograniczenie automatycznego układu, które chcesz dostosować (w konstruktorze interfejsu, np. Ograniczenie górne). Następnie uczyń z tego IBOutlet;

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

Animuj w górę;

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

Animuj z powrotem do pierwotnego miejsca

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

Istnieje bardzo dobry tutorial od Apple'a, który wyjaśnia, jak używać animacji z autoukładem. Skorzystaj z tego linku, a następnie znajdź film o nazwie „Automatyczny układ według przykładu” Zawiera on kilka interesujących informacji na temat automatycznego układu, a ostatnia część dotyczy korzystania z animacji.

Zrobiłem dostępny ten mały demo . Na bardzo prostym przykładzie pokazano, jak można zmieniać i animować ograniczenia automatycznego układu. Po prostu spójrz na DemoViewController.m .

Większość ludzi używa autoukładu do układania elementów w swoich widokach i modyfikowania ograniczeń układu w celu tworzenia animacji.

Łatwym sposobem na zrobienie tego bez dużej ilości kodu jest utworzenie UIView, który chcesz animować w Storyboard, a następnie utworzenie ukrytego UIView, w którym chcesz zakończyć UIView. Możesz użyć podglądu w xcode, aby upewnić się, że oba UIViews są tam, gdzie chcesz, aby były. Następnie ukryj końcowy UIView i zamień ograniczenia układu.

Istnieje podfile do zamiany ograniczeń układu o nazwie SBP, jeśli nie chcesz go pisać samodzielnie.

Oto samouczek .

Nie ma potrzeby używania więcej IBOutlet referenceograniczenia zamiast tego, można bezpośrednio accesslub updatejuż zastosować ograniczenie albo Programmaticallyz Interface Builderdowolnego widoku, albo z dowolnego widoku korzystającego z KVConstraintExtensionsMasterbiblioteki. Ta biblioteka zarządza również Cumulativezachowaniem NSLayoutConstraint.

Aby dodać ograniczenie wysokości do containerView

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

Aby zaktualizować ograniczenie wysokości w containerView z animacją

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

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