Criando programaticamente um UIView com vários rótulos

Question

Problema do Xcode Interface Builder
Pessoalmente, não gosto da maneira como o construtor de interface funciona no Xcode.Neste exemplo, estou tentando criar um controlador de visualização bastante complexo.No viewDidLoad do controlador de visualização, mostro uma visualização de alerta personalizada (como tal).Na verdade, não é uma visualização de alerta, mas sim uma visualização que mostra ao usuário algumas informações.Eu tenho uma visualização de fundo esmaecida e uma visualização acima disso.Se eu tentar criar isso no construtor de interface, ficará muito complicado, pois você não poderá selecionar as visualizações em segundo plano e movê-las, etc., sem colocar as subvisualizações nas visualizações erradas e assim por diante...

Cenário
O que estou tentando fazer é criar uma visualização que contenha alguns rótulos e um botão.O controlador de visualização possui uma propriedade de dificuldade baseada nisso, ele terá texto diferente nos rótulos/quantidade de rótulos.
Ou sejaFácil – 3 rótulos
Difícil - 4 rótulos

Eu crio o dimmedView e o alert(styled)View assim:

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

Em seguida, crio os três/quatro rótulos com base em alguma lógica e adiciono os rótulos necessários ao startingAlertView baseado na lógica também.

A questão óbvia é que em nenhum momento é definido um quadro para a visualização.Isso significa que está retornando 0,0,0,0.O que eu gostaria que acontecesse é a visualização para obter a altura necessária com base nos rótulos adicionados.

Estou construindo para IOS7 e usando Auto Layout.Devo configurar restrições que ajustariam possivelmente as alturas e locais relevantes na visualização?

Answer 1

Estou construindo para IOS7 e usando Auto Layout.Devo configurar restrições que ajustariam possivelmente as alturas e locais relevantes na visualização?

Sim.você não usa initWithFrame: no layout automático, ou melhor, você pode, mas o quadro é ignorado.Crie sua visualização de escurecimento com uma moldura de CGRectZero, contexto translatesAutoresizingMasksToConstraints como NO, adicione-o à sua visualização principal e crie restrições fixando-o em todas as bordas da supervisão.

Em seguida, adicione sua visualização de alerta, novamente com um quadro zero e o translates... propriedade definida como NÃO.Crie restrições para centralizar esta visualização em sua visualização de escurecimento.Essa visualização obterá seu tamanho a partir de suas subvisualizações, já que os rótulos possuem um tamanho intrínseco.

Adicione seus rótulos como subvisualizações desta visualização, com quadro zero e translates... definido como NÃO.Dependendo do conteúdo, você pode definir a largura máxima de layout preferida ou uma restrição de largura.

Crie restrições fixando seus rótulos nas bordas esquerda e direita da supervisão e alinhando seus rótulos em uma 'pilha' vertical.Em cada caso, você pode adicionar preenchimento para dar uma borda ao seu alerta.

Isso pode parecer uma grande quantidade de código, então você pode ler os artigos que escrevi sobre formato visual para layout automático e criando restrições no código, com o associado categoria de conveniência de layout automático para tornar sua vida mais fácil.

Answer 2

Se você estiver seguindo a rota de layout automático, poderá adicionar restrições que manterão o espaço adequado entre cada rótulo e o espaço adequado entre a parte superior e inferior da visualização com o primeiro e o último rótulo.No entanto, se você não estiver fazendo isso no Interface Builder, você também pode pular o uso do layout automático, porque é bastante simples apenas ajustar a altura da visualização conforme você adiciona rótulos.

Você começaria definindo a altura da visualização para o tamanho dos espaços superior e inferior que deseja ter ao redor dos rótulos.Então, cada vez que você adicionar um rótulo, adicione a altura do rótulo mais a altura do espaço que você está colocando entre os rótulos.

Você também pode esperar até adicionar todos os rótulos desejados e definir a altura para a posição y do rótulo inferior mais sua altura mais o espaço inferior que deseja ter ao redor dos rótulos.

Answer 3

Sim, usando o autolayout você pode obter os limites da visualização pai.

Aqui está um exemplo rápido, observe que não estamos usando frame, e usando CGRectZero para nossos UILabels, o posicionamento vem de updateConstraints em vez de.estou usando Linguagem de formato visual para fazer o layout dos rótulos que eu recomendo se você estiver fazendo isso de forma programática.

Aqui estamos fazendo os rótulos com a largura da visualização pai e, em seguida, empilhados uns sobre os outros.

#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