Programmgesteuertes Erstellen einer UIView mit mehreren Labels

Question

Problem mit dem Xcode Interface Builder
Mir persönlich gefällt die Art und Weise, wie der Interface Builder in Xcode funktioniert, nicht.In diesem Beispiel versuche ich, einen ziemlich komplexen View-Controller zu erstellen.Auf der viewDidLoad des View Controllers zeige ich eine benutzerdefinierte Alarmansicht (als solche).Es handelt sich eigentlich nicht um eine Alarmansicht, sondern eher um eine Ansicht, die dem Benutzer einige Informationen anzeigt.Ich habe eine abgeblendete Hintergrundansicht und eine Ansicht darüber.Wenn ich versuche, dies im Interface Builder zu erstellen, wird es übermäßig kompliziert, da man die Ansichten im Hintergrund nicht auswählen und verschieben kann usw., ohne Unteransichten in die falschen Ansichten usw. einzufügen ...

Szenario
Ich versuche, eine Ansicht zu erstellen, die einige Beschriftungen und eine Schaltfläche enthält.Der Ansichtscontroller verfügt über eine Schwierigkeitseigenschaft, die darauf basiert, dass die Beschriftungen bzw. die Anzahl der Beschriftungen unterschiedliche Texte enthalten.
D.h.Einfach – 3 Etiketten
Schwer – 4 Etiketten

Ich erstelle die dimmedView und die warning(styled)View wie folgt:

// Setup the dimmedView
UIView *dimmedView = [[UIView alloc] initWithFrame:self.view.frame];
dimmedView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.6];

// Setup the startingAlertView
UIView *startingAlertView = [[UIView alloc] init];
startingAlertView.backgroundColor = [UIColor whiteColor];

Anschließend erstelle ich die drei/vier Beschriftungen basierend auf einer Logik und füge die erforderlichen Beschriftungen hinzu startingAlertView auch auf Logik basierend.

Das offensichtliche Problem besteht darin, dass zu keinem Zeitpunkt ein Rahmen für die Ansicht festgelegt wird.Das bedeutet, dass 0,0,0,0 zurückgegeben wird.Ich möchte, dass die Ansicht die erforderliche Höhe basierend auf den hinzugefügten Beschriftungen annimmt.

Ich baue für IOS7 und verwende Auto Layout.Sollte ich Einschränkungen einrichten, die dann möglicherweise die relevanten Höhen und Positionen in der Ansicht anpassen?

Answer 1

Ich baue für IOS7 und verwende Auto Layout.Sollte ich Einschränkungen einrichten, die dann möglicherweise die relevanten Höhen und Positionen in der Ansicht anpassen?

Ja.Du nutzt es nicht initWithFrame: unter Auto-Layout, oder besser gesagt, Sie können, aber der Rahmen wird ignoriert.Erstellen Sie Ihre verdunkelnde Ansicht mit einem Rahmen aus CGRectZero, Einstellung translatesAutoresizingMasksToConstraints auf NEIN, fügen Sie es Ihrer Hauptansicht hinzu und erstellen Sie Einschränkungen, um es an allen Kanten der Übersichtsansicht anzuheften.

Fügen Sie dann Ihre Alarmansicht hinzu, wiederum mit einem Rahmen von Null und dem translates... Eigenschaft auf NO gesetzt.Erstellen Sie Einschränkungen, um diese Ansicht in Ihrer Dimmansicht zu zentrieren.Diese Ansicht erhält ihre Größe von ihren Unteransichten, da Beschriftungen eine intrinsische Größe haben.

Fügen Sie Ihre Beschriftungen als Unteransichten dieser Ansicht mit dem Rahmen Null und hinzu translates... auf NEIN gesetzt.Abhängig von ihrem Inhalt möchten Sie möglicherweise die bevorzugte maximale Layoutbreite oder eine Breitenbeschränkung festlegen.

Erstellen Sie Einschränkungen, indem Sie Ihre Beschriftungen am linken und rechten Rand der Übersicht anheften und Ihre Beschriftungen in einem vertikalen „Stapel“ anordnen.In jedem Fall könnten Sie eine Polsterung hinzufügen, um Ihrer Warnung eine Art Rahmen zu geben.

Dies kann wie eine große Menge Code aussehen. Vielleicht möchten Sie die Artikel lesen, über die ich geschrieben habe visuelles Format für das automatische Layout Und Erstellen von Einschränkungen im Code, mit dem dazugehörigen Kategorie „Autolayout-Komfort“. um Ihnen das Leben zu erleichtern.

Answer 2

Wenn Sie sich für die automatische Layout-Route entscheiden, können Sie Einschränkungen hinzufügen, die den richtigen Abstand zwischen den einzelnen Beschriftungen sowie den richtigen Abstand zwischen der Ober- und Unterseite der Ansicht mit der ersten und der letzten Beschriftung beibehalten.Wenn Sie dies jedoch nicht im Interface Builder tun, können Sie auch auf die Verwendung des automatischen Layouts verzichten, da es ziemlich einfach ist, beim Hinzufügen von Beschriftungen nur die Höhe der Ansicht anzupassen.

Sie würden damit beginnen, die Höhe der Ansicht auf die Größe der oberen und unteren Abstände einzustellen, die Sie um die Beschriftungen herum haben möchten.Fügen Sie dann jedes Mal, wenn Sie ein Etikett hinzufügen, die Höhe des Etiketts plus die Höhe des Abstands hinzu, den Sie zwischen den Etiketten einfügen.

Sie können auch warten, bis Sie alle gewünschten Etiketten hinzugefügt haben, und dann die Höhe auf die Y-Position des unteren Etiketts plus seine Höhe plus den unteren Abstand einstellen, den Sie um die Etiketten herum haben möchten.

Answer 3

Ja, mit Autolayout können Sie die Grenzen aus der übergeordneten Ansicht abrufen.

Hier ist ein kurzes Beispiel. Beachten Sie, dass wir keinen Frame verwenden und CGRectZero für unsere UILabels verwenden, von denen die Positionierung stammt updateConstraints stattdessen.ich benutze Visuelle Formatsprache um die Beschriftungen zu gestalten, was ich empfehle, wenn Sie es programmgesteuert tun.

Hier machen wir die Beschriftungen auf die Breite der übergeordneten Ansicht und stapeln sie dann einfach übereinander.

#import "View.h"

@implementation View{
    UILabel *_label1;
    UILabel *_label2;
    UILabel *_label3;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _label1 = [[UILabel alloc] initWithFrame:CGRectZero];
        _label1.translatesAutoresizingMaskIntoConstraints = NO;
        _label1.text = @"LABEL 1";

        _label2 = [[UILabel alloc] initWithFrame:CGRectZero];
        _label2.translatesAutoresizingMaskIntoConstraints = NO;
        _label2.text = @"LABEL 2";

        _label3 = [[UILabel alloc] initWithFrame:CGRectZero];
        _label3.translatesAutoresizingMaskIntoConstraints = NO;
        _label3.text = @"LABEL 3";

        [self addSubview:_label1];
        [self addSubview:_label2];
        [self addSubview:_label3];
    }


    [self updateConstraintsIfNeeded];

    return self;
}

-(void)updateConstraints
{
    [super updateConstraints];

    NSDictionary *_viewsDictionary = NSDictionaryOfVariableBindings(_label1,_label2,_label3);


    // Set the contraintsto span the entire width of the super view
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_label1]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];

    [self addConstraints:constraints];

    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_label2]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];
    [self addConstraints:constraints];

    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_label3]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];

    [self addConstraints:constraints];


    // Last setup the vertical contraints other wise they will end up in a random place
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[_label1]-[_label2]-[_label3]"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];
    [self addConstraints:constraints];
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

@end