Creare a livello di programmazione un UIView con più etichette

Question

Xcode Interface Builder Problema
Personalmente non mi piace il modo in cui il costruttore di interfaccia funziona in Xcode. In questo esempio sto cercando di creare un controller di visualizzazione abbastanza complesso. Sul viewDidLoad del controller di visualizzazione I mostrano una visualizzazione di avviso personalizzata (come tale). In realtà non è una vista di avviso ma più di una vista che mostra l'utente alcune informazioni. Ho una vista di sfondo oscurata e una vista sopra questo. Se provo a creare questo in Interface Builder, è eccessivamente complicato, poiché non è possibile selezionare le viste in background e spostarle, ecc. Senza cadere sottoviews nelle viste sbagliate e così su ...

Scenario
Quello che sto cercando di fare è creare una vista che contiene alcune etichette e un pulsante. Il controller di visualizzazione ha una proprietà di difficoltà basata su questo, avrà un testo diverso nelle etichette / quantità di etichette.
Cioè EASY - 3 Etichette
Hard - 4 etichette

Creo la vista Dimmedview e Alert (Styled) In questo modo:

// 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];

.

Creco quindi le tre / quattro etichette basate su una logica e aggiungono le etichette necessarie al startingAlertView basate sulla logica.

Il problema ovvio è che non è impostato un frame per la vista. Ciò significa che sta tornando a 0,0,0,0. Quello che vorrei accadere è il punto di vista per prendere l'altezza richiesta in base alle etichette aggiunte.

Sto costruendo per iOS7 e utilizzando il layout automatico. Dovrei configurare vincoli che avrebbero quindi regolato le altezze e le posizioni pertinenti nella vista possibilmente?

Answer 1

.

Sto costruendo per iOS7 e utilizzando il layout automatico. Dovrei configurare vincoli che avrebbero quindi regolato le altezze e le posizioni pertinenti nella vista possibilmente?

Sì. Non si utilizza initWithFrame: sotto layout automatico, o meglio, puoi, ma il telaio viene ignorato. Creare la vostra vista Dimming con un fotogramma di CGRectZero, impostare translatesAutoresizingMasksToConstraints a No, aggiungilo alla tua visualizzazione principale e creare vincoli che lo fissano a tutti i bordi della supervisione.

Quindi, aggiungi la vostra vista di avviso, di nuovo con un fotogramma di zero e la proprietà translates... impostata su No. Crea vincoli per centrare questa visione nella vostra vista Dimming. Questa vista otterrà le sue dimensioni dalle sue sottoviews, poiché le etichette hanno una dimensione intrinseca.

Aggiungi le tue etichette come sottoviews di questa vista, con il fotogramma di zero e translates... impostato su no. A seconda del loro contenuto, potresti voler impostare la larghezza del layout massima preferita o un vincolo di larghezza.

Creare vincoli che fissano le tue etichette ai bordi sinistro e destro della supervisione e rivestire le etichette in una "pila" verticale. In ogni caso potresti aggiungere imbottitura per dare il tuo avviso un po 'di confine.

Questo può sembrare una grande quantità di codice, quindi potresti voler leggere gli articoli che ho scritto su Formato visivo per layout automatico e Creazione di vincoli nel codice , con l'associazione Categoria di comodità AutoLayout per semplificare la tua vita.

Answer 2

Se stai andando alla rotta del layout automatico, puoi aggiungere vincoli che mantengono lo spazio appropriato tra ogni etichetta e lo spazio corretto tra la parte superiore e inferiore della vista con la prima e l'ultima etichetta.Tuttavia, se non stai facendo questo nel costruttore di interfaccia, potrebbe anche saltare utilizzando anche il layout automatico, perché è abbastanza semplice regolare semplicemente l'altezza della vista mentre aggiungi etichette.

Avresti iniziato impostando l'altezza della vista sulla dimensione degli spazi superiore e inferiore che si desidera avere intorno alle etichette.Quindi ogni volta che aggiungi un'etichetta, aggiungi ad esso l'altezza dell'etichetta più l'altezza dello spazio che stai mettendo tra le etichette.

Puoi anche aspettare fino a quando non hai aggiunto tutte le etichette che desideri, quindi impostare l'altezza nella posizione Y in basso etichetta più la sua altezza più lo spazio inferiore che si desidera avere intorno alle etichette.

Answer 3

Sì, usando AutoLayout è possibile ottenere i limiti dalla vista genitore.

Ecco un rapido esempio, notare che non utilizziamo il telaio e usando Corgrectzero per i nostri uilabels, il posizionamento proviene da updateConstraints.Sto usando Lingua del formato visivo aLayout le etichette che consiglio se lo stai facendo in modo programmatico.

Qui stiamo facendo le etichette la larghezza della vista genitore e poi impilati uno sopra l'altro.

#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

.