Wie kann ich die Größe der Übersicht ändern, um sie an alle Unteransichten mit Autolayout anzupassen?

Mein Verständnis von Autolayout ist, dass es die Größe der Übersicht verwendet und auf Einschränkungen und intrinsischen Größen basiert, die Positionen von Unteransichten berechnen.

Gibt es eine Möglichkeit, diesen Prozess umzukehren? Ich möchte die Größe der Übersicht auf der Grundlage von Einschränkungen und Eigengrößen ändern. Was ist der einfachste Weg, dies zu erreichen?

Ich habe eine in Xcode entworfene Ansicht, für die ich sie als Header verwende UITableView. Diese Ansicht enthält eine Beschriftung und eine Schaltfläche. Die Größe des Etiketts hängt von den Daten ab. Abhängig von den Einschränkungen drückt das Etikett die Schaltfläche erfolgreich nach unten, oder wenn zwischen der Schaltfläche und dem unteren Rand der Übersicht eine Einschränkung besteht, wird das Etikett komprimiert.

Ich habe einige ähnliche Fragen gefunden, aber sie haben keine guten und einfachen Antworten.

Die richtige API ist UIView systemLayoutSizeFittingSize:, entweder UILayoutFittingCompressedSizeoder zu übergeben UILayoutFittingExpandedSize.

Bei einer normalen UIViewVerwendung von Autolayout sollte dies nur funktionieren, solange Ihre Einschränkungen korrekt sind. Wenn Sie es für a verwenden möchten UITableViewCell(um beispielsweise die Zeilenhöhe zu bestimmen), sollten Sie es gegen Ihre Zelle aufrufen contentViewund die Höhe ermitteln.

Weitere Überlegungen bestehen, wenn Sie ein oder mehrere UILabels in Ihrer Ansicht haben, die mehrzeilig sind. Für diese ist es unbedingt erforderlich, dass die preferredMaxLayoutWidthEigenschaft korrekt festgelegt wird, sodass die Beschriftung eine korrekte Eigenschaft enthält intrinsicContentSize, die bei der systemLayoutSizeFittingSize'sBerechnung verwendet wird.

BEARBEITEN: Auf Anfrage wird ein Beispiel für die Höhenberechnung für eine Tabellenansichtszelle hinzugefügt

Die Verwendung von Autolayout für die Berechnung der Tabellenzellenhöhe ist nicht sehr effizient, aber sicher praktisch, insbesondere wenn Sie eine Zelle mit einem komplexen Layout haben.

Wie oben erwähnt, ist es bei Verwendung einer mehrzeiligen UILabelDatei unbedingt erforderlich, die preferredMaxLayoutWidthmit der Etikettenbreite zu synchronisieren . Ich benutze dazu eine benutzerdefinierte UILabelUnterklasse:

@implementation TSLabel

- (void) layoutSubviews
{
    [super layoutSubviews];

    if ( self.numberOfLines == 0 )
    {
        if ( self.preferredMaxLayoutWidth != self.frame.size.width )
        {
            self.preferredMaxLayoutWidth = self.frame.size.width;
            [self setNeedsUpdateConstraints];
        }
    }
}

- (CGSize) intrinsicContentSize
{
    CGSize s = [super intrinsicContentSize];

    if ( self.numberOfLines == 0 )
    {
        // found out that sometimes intrinsicContentSize is 1pt too short!
        s.height += 1;
    }

    return s;
}

@end

Hier ist eine erfundene UITableViewController-Unterklasse, die heightForRowAtIndexPath demonstriert:

#import "TSTableViewController.h"
#import "TSTableViewCell.h"

@implementation TSTableViewController

- (NSString*) cellText
{
    return @"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
}

#pragma mark - Table view data source

- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView
{
    return 1;
}

- (NSInteger) tableView: (UITableView *)tableView numberOfRowsInSection: (NSInteger) section
{
    return 1;
}

- (CGFloat) tableView: (UITableView *) tableView heightForRowAtIndexPath: (NSIndexPath *) indexPath
{
    static TSTableViewCell *sizingCell;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{

        sizingCell = (TSTableViewCell*)[tableView dequeueReusableCellWithIdentifier: @"TSTableViewCell"];
    });

    // configure the cell
    sizingCell.text = self.cellText;

    // force layout
    [sizingCell setNeedsLayout];
    [sizingCell layoutIfNeeded];

    // get the fitting size
    CGSize s = [sizingCell.contentView systemLayoutSizeFittingSize: UILayoutFittingCompressedSize];
    NSLog( @"fittingSize: %@", NSStringFromCGSize( s ));

    return s.height;
}

- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath
{
    TSTableViewCell *cell = (TSTableViewCell*)[tableView dequeueReusableCellWithIdentifier: @"TSTableViewCell" ];

    cell.text = self.cellText;

    return cell;
}

@end

Eine einfache benutzerdefinierte Zelle:

#import "TSTableViewCell.h"
#import "TSLabel.h"

@implementation TSTableViewCell
{
    IBOutlet TSLabel* _label;
}

- (void) setText: (NSString *) text
{
    _label.text = text;
}

@end

Und hier ist ein Bild der im Storyboard definierten Einschränkungen. Beachten Sie, dass das Etikett keine Höhen- / Breitenbeschränkungen enthält. Diese werden aus den folgenden Angaben abgeleitet intrinsicContentSize:

Der Kommentar von Eric Baker hat mich auf die Kernidee hingewiesen, dass der Inhalt einer Ansicht eine explizite Beziehung zur enthaltenen Ansicht haben muss, damit ihre Größe durch den darin enthaltenen Inhalt bestimmt wird, um ihre Höhe zu bestimmen (oder Breite) dynamisch . "Unteransicht hinzufügen" erstellt diese Beziehung nicht, wie Sie vielleicht annehmen. Sie müssen auswählen, welche Unteransicht die Höhe und / oder Breite des Containers bestimmen soll ... am häufigsten das UI-Element, das Sie in der unteren rechten Ecke Ihrer gesamten UI platziert haben. Hier sind einige Code- und Inline-Kommentare, um den Punkt zu veranschaulichen.

Beachten Sie, dass dies für diejenigen, die mit Bildlaufansichten arbeiten, von besonderem Wert sein kann, da es üblich ist, eine einzelne Inhaltsansicht zu entwerfen, die ihre Größe dynamisch bestimmt (und dies der Bildlaufansicht mitteilt), basierend auf dem, was Sie darin eingeben. Viel Glück, hoffe das hilft jemandem da draußen.

//
//  ViewController.m
//  AutoLayoutDynamicVerticalContainerHeight
//

#import "ViewController.h"

@interface ViewController ()
@property (strong, nonatomic) UIView *contentView;
@property (strong, nonatomic) UILabel *myLabel;
@property (strong, nonatomic) UILabel *myOtherLabel;
@end

@implementation ViewController

- (void)viewDidLoad
{
    // INVOKE SUPER
    [super viewDidLoad];

    // INIT ALL REQUIRED UI ELEMENTS
    self.contentView = [[UIView alloc] init];
    self.myLabel = [[UILabel alloc] init];
    self.myOtherLabel = [[UILabel alloc] init];
    NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(_contentView, _myLabel, _myOtherLabel);

    // TURN AUTO LAYOUT ON FOR EACH ONE OF THEM
    self.contentView.translatesAutoresizingMaskIntoConstraints = NO;
    self.myLabel.translatesAutoresizingMaskIntoConstraints = NO;
    self.myOtherLabel.translatesAutoresizingMaskIntoConstraints = NO;

    // ESTABLISH VIEW HIERARCHY
    [self.view addSubview:self.contentView]; // View adds content view
    [self.contentView addSubview:self.myLabel]; // Content view adds my label (and all other UI... what's added here drives the container height (and width))
    [self.contentView addSubview:self.myOtherLabel];

    // LAYOUT

    // Layout CONTENT VIEW (Pinned to left, top. Note, it expects to get its vertical height (and horizontal width) dynamically based on whatever is placed within).
    // Note, if you don't want horizontal width to be driven by content, just pin left AND right to superview.
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_contentView]" options:0 metrics:0 views:viewsDictionary]]; // Only pinned to left, no horizontal width yet
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_contentView]" options:0 metrics:0 views:viewsDictionary]]; // Only pinned to top, no vertical height yet

    /* WHATEVER WE ADD NEXT NEEDS TO EXPLICITLY "PUSH OUT ON" THE CONTAINING CONTENT VIEW SO THAT OUR CONTENT DYNAMICALLY DETERMINES THE SIZE OF THE CONTAINING VIEW */
    // ^To me this is what's weird... but okay once you understand...

    // Layout MY LABEL (Anchor to upper left with default margin, width and height are dynamic based on text, font, etc (i.e. UILabel has an intrinsicContentSize))
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_myLabel]" options:0 metrics:0 views:viewsDictionary]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[_myLabel]" options:0 metrics:0 views:viewsDictionary]];

    // Layout MY OTHER LABEL (Anchored by vertical space to the sibling label that comes before it)
    // Note, this is the view that we are choosing to use to drive the height (and width) of our container...

    // The LAST "|" character is KEY, it's what drives the WIDTH of contentView (red color)
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_myOtherLabel]-|" options:0 metrics:0 views:viewsDictionary]];

    // Again, the LAST "|" character is KEY, it's what drives the HEIGHT of contentView (red color)
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_myLabel]-[_myOtherLabel]-|" options:0 metrics:0 views:viewsDictionary]];

    // COLOR VIEWS
    self.view.backgroundColor = [UIColor purpleColor];
    self.contentView.backgroundColor = [UIColor redColor];
    self.myLabel.backgroundColor = [UIColor orangeColor];
    self.myOtherLabel.backgroundColor = [UIColor greenColor];

    // CONFIGURE VIEWS

    // Configure MY LABEL
    self.myLabel.text = @"HELLO WORLD\nLine 2\nLine 3, yo";
    self.myLabel.numberOfLines = 0; // Let it flow

    // Configure MY OTHER LABEL
    self.myOtherLabel.text = @"My OTHER label... This\nis the UI element I'm\narbitrarily choosing\nto drive the width and height\nof the container (the red view)";
    self.myOtherLabel.numberOfLines = 0;
    self.myOtherLabel.font = [UIFont systemFontOfSize:21];
}

@end

Sie können dies tun, indem Sie eine Einschränkung erstellen und über den Interface Builder verbinden

Siehe Erklärung: Auto_Layout_Constraints_in_Interface_Builder

raywenderlich Anfang-Auto-Layout

AutolayoutPG Artikel beschränken die Grundlagen

@interface ViewController : UIViewController {
    IBOutlet NSLayoutConstraint *leadingSpaceConstraint;
    IBOutlet NSLayoutConstraint *topSpaceConstraint;
}
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leadingSpaceConstraint;

Verbinden Sie diesen Constraint-Ausgang mit Ihren Unteransichten. Constraint oder verbinden Sie auch Super Views Constraint und stellen Sie ihn entsprechend Ihren Anforderungen ein

 self.leadingSpaceConstraint.constant = 10.0;//whatever you want to assign

Ich hoffe das klärt es.

Dies kann für ein normales subviewin einem größeren gemacht werden UIView, aber es funktioniert nicht automatisch für headerViews. Die Höhe von a headerViewwird durch die Rückgabe von bestimmt. tableView:heightForHeaderInSection:Sie müssen also heightdie Höhe heightdes UILabelPlus-Platzes für die UIButtonund die von paddingIhnen benötigten berechnen . Sie müssen so etwas tun:

-(CGFloat)tableView:(UITableView *)tableView 
          heightForHeaderInSection:(NSInteger)section {
    NSString *s = self.headeString[indexPath.section];
    CGSize size = [s sizeWithFont:[UIFont systemFontOfSize:17] 
                constrainedToSize:CGSizeMake(281, CGFLOAT_MAX)
                    lineBreakMode:NSLineBreakByWordWrapping];
    return size.height + 60;
}

Hier headerStringist die Zeichenfolge, die Sie füllen möchten UILabel, und die Nummer 281 ist die widthder UILabel(wie in eingerichtet Interface Builder).