Crear programáticamente una UIView con múltiples etiquetas

Question

Problema con el generador de interfaces Xcode
Personalmente no me gusta la forma en que funciona el generador de interfaces en Xcode.En este ejemplo, intento crear un controlador de vista bastante complejo.Sobre el viewDidLoad del controlador de vista muestro una vista de alerta personalizada (como tal).En realidad, no es una vista de alerta, sino más bien una vista que muestra al usuario cierta información.Tengo una vista de fondo atenuada y una vista encima de esta.Si intento crear esto en el generador de interfaces, se vuelve demasiado complicado ya que no se pueden seleccionar las vistas en segundo plano y moverlas, etc. sin colocar subvistas en las vistas incorrectas, etc.

Guión
Lo que intento hacer es crear una Vista que contenga algunas etiquetas y un botón.El controlador de vista tiene una propiedad de dificultad basada en esto, tendrá texto diferente en las etiquetas/cantidad de etiquetas.
Es decir.Fácil: 3 etiquetas
Difícil: 4 etiquetas

Creo la vista atenuada y la vista de alerta (con estilo) de esta manera:

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

Luego creo las tres/cuatro etiquetas según alguna lógica y agrego las etiquetas necesarias al startingAlertView Basado también en la lógica.

La cuestión que salta a la vista es que en ningún momento se fija un marco para la vista.Esto significa que devuelve 0,0,0,0.Lo que me gustaría que sucediera es que la vista tomara la altura requerida según las etiquetas agregadas.

Estoy compilando para IOS7 y usando Auto Layout.¿Debería establecer restricciones que luego ajustarían posiblemente las alturas y ubicaciones relevantes en la vista?

Answer 1

Estoy compilando para IOS7 y usando Auto Layout.¿Debería establecer restricciones que luego ajustarían posiblemente las alturas y ubicaciones relevantes en la vista?

Sí.no usas initWithFrame: en diseño automático, o mejor dicho, puede hacerlo, pero el marco se ignora.Crea tu vista de atenuación con un marco de CGRectZero, configuración translatesAutoresizingMasksToConstraints a NO, agréguelo a su vista principal y cree restricciones fijándolo a todos los bordes de la supervista.

Luego, agregue su vista de alerta, nuevamente con un marco de cero y el translates... propiedad establecida en NO.Cree restricciones para centrar esta vista en su vista de atenuación.Esta vista obtendrá su tamaño de sus subvistas, ya que las etiquetas tienen un tamaño intrínseco.

Agregue sus etiquetas como subvistas de esta vista, con marco de cero y translates... establecido en NO.Dependiendo de su contenido, es posible que desee establecer el ancho máximo de diseño preferido o una restricción de ancho.

Cree restricciones fijando sus etiquetas en los bordes izquierdo y derecho de la supervista y alineando sus etiquetas en una 'pila' vertical.En cada caso, puede agregar relleno para darle a su alerta un poco de borde.

Esto puede parecer una gran cantidad de código, por lo que es posible que desees leer los artículos que escribí. formato visual para diseño automático y creando restricciones en el código, con el asociado categoría de conveniencia de diseño automático para hacerte la vida más fácil.

Answer 2

Si va a la ruta de diseño automático, puede agregar restricciones que mantendrán el espacio adecuado entre cada etiqueta y el espacio adecuado entre la parte superior e inferior de la vista con la primera y la última etiqueta.Sin embargo, si no está haciendo esto en Interface Builder, también puede omitir el uso del diseño automático, porque es bastante sencillo ajustar la altura de la vista a medida que agrega etiquetas.

Comenzaría estableciendo la altura de la vista al tamaño de los espacios superior e inferior que desea tener alrededor de las etiquetas.Luego, cada vez que agregues una etiqueta, agrégale la altura de la etiqueta más la altura del espacio que estás poniendo entre las etiquetas.

También puede esperar hasta haber agregado todas las etiquetas que desee y luego establecer la altura en la posición y de la etiqueta inferior más su altura más el espacio inferior que desea tener alrededor de las etiquetas.

Answer 3

Sí, al utilizar el diseño automático puede obtener los límites desde la vista principal.

Aquí hay un ejemplo rápido, observe que no estamos usando frame y usando CGRectZero para nuestras UILabels, el posicionamiento proviene de updateConstraints en cambio.estoy usando Lenguaje de formato visual para diseñar las etiquetas, lo cual recomiendo si lo hace mediante programación.

Aquí hacemos que las etiquetas tengan el ancho de la vista principal y luego las apilamos una encima de la otra.

#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