Animierte UIView-Änderungen mit automatischen Layouteinschränkungen

Question

Angenommen, ich habe ein Projekt, das wie folgt aussieht:

Es gibt zwei UIViews - einer hat angerufen yellowBox und der andere rief redBox.Die Auto-Layout-Einschränkungen schreiben vor, dass die yellowBox ist 60 Punkte vom oberen Rand der Übersicht entfernt, mit 350 Punkten vor- und nachgestellten Leerzeichen (d. h.links und rechts der Ansicht).Der redBox hat die gleichen Platzbeschränkungen am Anfang und Ende.Es gibt eine vertikale Abstandsbeschränkung zwischen den beiden Kästchen von 0, um anzuzeigen, dass der untere Rand des yellowBox sollte immer direkt oben liegen redBox.

Wenn der Benutzer auf die Schaltfläche „Gelbes Feld erweitern“ tippt, möchte ich die Höhe des yellowBox zu erhöhen und infolgedessen die redBox bewegt sich nach unten, um weiterhin die vertikale Platzbeschränkung zu erfüllen (dass die yellowBox ist immer oben redBox).Hier ist der Animationscode:

- (IBAction)expandYellowBox:(id)sender {

    [UIView animateWithDuration:0.5
                     animations:^{
                         CGRect newFrame = self.yellowBox.frame;
                         newFrame.size.height += 50;
                         self.yellowBox.frame = newFrame;
                     }];

}

Es ist mir jedoch nicht gelungen, dies ordnungsgemäß zum Laufen zu bringen.Wie Sie am roten Symbol erkennen können, liegt derzeit ein Problem mit den Einschränkungen vor:

Das ist völlig in Ordnung, da es für das automatische Layout keine Möglichkeit gibt, die Höhe der Boxen zu ermitteln.Ich weiß jedoch nicht, wie ich dieses Problem so lösen kann, dass die Größe der Boxen geändert und verschoben werden kann.Wenn ich beispielsweise eine Höhenbeschränkung für die festlege yellowBox dann wird dadurch verhindert, dass die Größe geändert wird.Wenn ich die Höhenbeschränkung auf festlege größer als oder gleich (um das zu ermöglichen yellowBox Höhe erhöhen), dann erhalte ich einen anderen Einschränkungsfehler:

Alle Einschränkungen wurden mithilfe von Xcode im Storyboard festgelegt – keine davon wurde im Code geschrieben.

Jede Hilfe wird sehr geschätzt.

---

BEARBEITEN: Wie sich herausstellt, ist die yellowBox wächst, wenn auf die Schaltfläche geklickt wird – ich konnte es nur nicht sagen, weil es hinter dem erscheint redBox.Ich bemerkte es erst, nachdem ich etwa vier Mal darauf geklickt hatte, und es begann unten im Bild zu erscheinen redBox.Es bleibt jedoch immer noch die gleiche Frage: Wie bekomme ich das? redBox immer an der Unterseite des bleiben yellowBox.

Answer 1

Probieren Sie es wie beschrieben aus shwet-solanki, aber fügen Sie die folgende Zeile hinzu, nachdem Sie die Einschränkung geändert haben:

[self.view layoutIfNeeded];

Die IBAction würde so aussehen:

- (IBAction)expandYellowBox:(id)sender {

[UIView animateWithDuration:0.5
                 animations:^{
                     self.yellowBoxHeightConstraint.constant += 50;
                     [self.view layoutIfNeeded];
                 }];
}

Wo yellowBoxHeightConstraint ist der IBOutlet für Höhenbeschränkung von yellowBox.Hoffe das hilft.

Answer 2

1. Fügen Sie beiden Ansichten eine Höhenbeschränkung hinzu
2. Erstellen Sie ein IBOutlet für die Höhenbeschränkung der Yellowbox
3. Anstatt nun die Höhe der Yellowbox im Button-Presse-Ereignis zu ändern, ändern Sie lieber den Wert der Höhenbeschränkung.Nehmen wir also an, Ihr IBOutlet-Einschränkungsname lautet yellowBoxHeightConstraint yellowBoxHeightConstraint.constant += 50;

Ich hoffe, das funktioniert für Sie.

Answer 3

//
//  WPViewController.h
//  AutoLayoutTEst
//
//  Created by VASANTH K on 09/01/14.
//  
//

#import <UIKit/UIKit.h>

@interface WPViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIButton *button1;
- (IBAction)buttClicked:(id)sender;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *heightConstrain;

@property (strong, nonatomic) IBOutlet UIButton *button2;
@end

Klicken Sie auf Ereignis

- (IBAction)buttClicked:(id)sender {


    self.heightConstrain.constant=100;


}

Hier müssen Sie das einstellen heightConstrain für die gelbe Schaltfläche erstellen Sie dann einen Referenzausgang für diese Schaltfläche und aktualisieren Sie dann die heightConstrain Um die Größe dieser Schaltfläche zu aktualisieren, wird Ihre rote Schaltfläche automatisch nach unten verschoben.

https://github.com/vasanth3008/AutoLayoutHeighDemo

Siehe mein Beispiel-Demoprojekt