ios - example - Ocultar una vista UIV mediante restricciones de AutoLayout

nslayoutconstraint swift 4

Question

De vez en cuando tengo una subvista que me gustaría eliminar de un diseño. No solo debe estar oculto, sino que no debe considerarse parte del ''flujo'' de la vista, por así decirlo. Un ejemplo:

Estoy buscando una estrategia para ocultar la vista naranja mediante programación. El diseño de las cajas, y su contenido, es a través de autolayout. Dos cosas a tener en cuenta:

• El cuadro naranja está definiendo su altura vertical según el contenido, más algunas compensaciones superiores / inferiores para los márgenes. Por lo tanto, establecer el texto de las etiquetas en nulo solo "reducirá" la vista a sus márgenes internos, no tendrá una altura de 0.
• De manera similar, el espacio vertical entre los tres cuadros significa que incluso si la altura del cuadro naranja es 0, el espacio entre el rojo y el amarillo será el doble de lo necesario.

Una posible solucion

Mi mejor sugerencia es agregar una restricción al cuadro naranja, estableciendo su altura en 0. Para que esto funcione, necesito usar prioridades no requeridas para todas las restricciones verticales dentro del cuadro naranja. Al mismo tiempo, el contenedor debe actualizar la constante para la restricción que separa los cuadros. No me gusta mucho este enfoque ya que la clase de caja naranja está definiendo sus limitaciones internas teniendo en cuenta el comportamiento de supervisión. Tal vez podría vivir con él si la vista del cuadro naranja expone un método de ''colapso'' que agrega la restricción de altura 0 en sí.

¿Hay un mejor enfoque?

Answer 1

En iOS 9 puedes usar UIStackView para esto. También hay polyfills para versiones anteriores: TZStackView y OAStackView

Answer 2

Lo que podría hacer es tener la restricción de altura de la vista naranja como una salida (para poder acceder a ella). Entonces anima el colapso así:

[UIView animateWithDuration:0.3 animations:^{
    orangeHeightConstraint.constant = 0;
    [self.view layoutIfNeeded]
}];

La vista naranja deberá tener una restricción superior a la vista roja y una restricción inferior a la vista amarilla. También asegúrese de revisar las subvistas de clips en IB o [orangeView clipsToBounds] programáticamente

Answer 3

Puede hacer esto agregando una restricción adicional entre las vistas amarilla y roja de una prioridad más baja y ajustando las prioridades en el código.

La restricción de guiones cortos (orangeToRedCon es la salida) tiene una prioridad de 999 (no se puede cambiar una prioridad requerida a una no requerida, por eso no es 1000). La restricción de guiones largos (yellowToRedCon) tiene una prioridad de 500 y una constante de 20. En el código, puede ocultar la vista naranja e intercambiar esos niveles de prioridad, y eso hará que la vista amarilla se mueva hacia cualquier valor que haya establecer para el valor constante de yellowToRedCon.

-(void)changePriorities {
    self.yellowToRedCon.priority = 999;
    self.orangeToRedCon.priority = 500;
    [UIView animateWithDuration:.5 animations:^{
        self.orangeView.alpha = 0;
        [self.view layoutIfNeeded];
    }];
}

Este método no requiere ningún cambio en la altura de la vista naranja.

Answer 4

Resolvería esto incluyendo todos los espacios "necesarios" de una subvista como parte de la subvista en sí. De esta manera, 1. Altura de vista roja = parte roja visible + espacio inferior 2. Altura de vista naranja = parte naranja visible + espacio inferior 3. Altura de vista amarilla = amarillo visible + espacio inferior

Cuando configura la Altura de la vista naranja en 0 mediante Autolayout, también reducirá automáticamente el espacio inferior a 0.