¿Cómo usar el diseño automático para mover otras vistas cuando una vista está oculta?

Agregar o eliminar restricciones durante el tiempo de ejecución es una operación pesada que puede afectar el rendimiento. Sin embargo, hay una alternativa más simple.

Para la vista que desea ocultar, configure una restricción de ancho. Restringir los otros puntos de vista con una brecha horizontal principal a ese punto de vista.

Para ocultar, actualice el .constant de la restricción de ancho a 0.f. Las otras vistas se moverán automáticamente a la izquierda para asumir su posición.

Vea mi otra respuesta aquí para más detalles:

Cómo ¿para cambiar las restricciones de etiqueta durante el tiempo de ejecución?

Para aquellos que solo soportan iOS 8+, hay una nueva propiedad booleana activa. Ayudará a habilitar dinámicamente las restricciones solo necesarias

P.d. Salida de restricción debe ser fuerte , no débil

Ejemplo:

@IBOutlet weak var optionalView: UIView!
@IBOutlet var viewIsVisibleConstraint: NSLayoutConstraint!
@IBOutlet var viewIsHiddenConstraint: NSLayoutConstraint!

func showView() {
    optionalView.isHidden = false
    viewIsVisibleConstraint.isActive = true
    viewIsHiddenConstraint.isActive = false
}

func hideView() {
    optionalView.isHidden = true
    viewIsVisibleConstraint.isActive = false
    viewIsHiddenConstraint.isActive = true
}

También para corregir un error en storyboard, deberá desmarcar la casilla Installed para una de estas restricciones.

UIStackView (iOS 9+)
Una opción más es envolver sus vistas en UIStackView. Una vez la vista está oculta UIStackView actualizará el diseño automáticamente

UIStackView reposiciona sus vistas automáticamente cuando la propiedad hidden se cambia en cualquiera de sus subviews (iOS 9+).

UIView.animateWithDuration(1.0) { () -> Void in
   self.mySubview.hidden = !self.mySubview.hidden
}

Saltar a 11:48 en este video de WWDC para una demostración:

Misterios del Diseño automático, Parte 1

Mi proyecto utiliza una subclase personalizada @IBDesignable de UILabel (para garantizar la consistencia en el color, la fuente, las inserciones, etc.) y he implementado algo como lo siguiente:

override func intrinsicContentSize() -> CGSize {
    if hidden {
        return CGSizeZero
    } else {
        return super.intrinsicContentSize()
    }
}

Esto permite que la subclase label participe en el Diseño automático, pero no ocupa espacio cuando está oculta.

Para los Googlers: basándome en la respuesta de Max, para resolver el problema del relleno que muchos han notado, simplemente aumenté la altura de la etiqueta y usé esa altura como separador en lugar del relleno real. Esta idea podría ampliarse para cualquier escenario con vistas contenedoras.

He aquí un ejemplo sencillo:

En este caso, mapeo la altura de la etiqueta Autor a un IBOutlet apropiado:

@property (retain, nonatomic) IBOutlet NSLayoutConstraint* authorLabelHeight;

Y cuando establezco la altura de la restricción a 0.0f, conservamos el "relleno", porque la altura del botón Play lo permite.

Lo que terminé haciendo fue crear 2 xibs. Uno con la vista izquierda y otro sin ella. Registré ambos en el controlador y luego decidí cuál usar durante cellForRowAtIndexPath.

Usan la misma clase UITableViewCell. La desventaja es que hay cierta duplicación del contenido entre los xibs, pero estas celdas son bastante básicas. La ventaja es que no tengo un montón de código para administrar manualmente la eliminación de vistas, la actualización de restricciones,etc.

En general, esto es probablemente una mejor solución, ya que son diseños técnicamente diferentes y, por lo tanto, deben tener diferentes xibs.

[self.table registerNib:[UINib nibWithNibName:@"TrackCell" bundle:nil] forCellReuseIdentifier:@"TrackCell"];
[self.table registerNib:[UINib nibWithNibName:@"TrackCellNoImage" bundle:nil] forCellReuseIdentifier:@"TrackCellNoImage"];

TrackCell *cell = [tableView dequeueReusableCellWithIdentifier:(appDelegate.showImages ? @"TrackCell" : @"TrackCellNoImage") forIndexPath:indexPath];

Conecte la restricción entre uiview y labels como IBOutlet y establezca priority member en un valor menor cuando se establezca hidden = YES

En este caso, mapeo la altura de la etiqueta de Autor a un IBOutlet apropiado:

@property (retain, nonatomic) IBOutlet NSLayoutConstraint* authorLabelHeight;

Y cuando establezco la altura de la restricción a 0.0 f, conservamos el "relleno", porque la altura del botón de reproducción lo permite.

cell.authorLabelHeight.constant = 0;

Use dos UIStackView Horizontal y Vertical, cuando alguna vista subview en la pila está oculta, otras subviews de la pila se moverán, use Distribution - > Fill Proportionally para la pila Vertical con dos UILabels y necesite establecer las constantes de ancho y alto para la primera UIView

En mi caso, establezco la constante de la restricción de altura a 0.0f y también establezco la propiedad hidden a YES.

Para mostrar la vista (con las subviews) de nuevo hice lo contrario: establecí la constante de altura a un valor distinto de cero y establecí la propiedad hidden a NO.

Prueba esto, he implementado el siguiente código,

Tengo una vista en ViewController en la que se agregaron otras tres vistas, Cuando cualquier vista está oculta otras dos vistas se moverán,Siga los pasos a continuación. ,

1.ViewController.h File

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIView *viewOne;
@property (strong, nonatomic) IBOutlet UIView *viewTwo;
@property (strong, nonatomic) IBOutlet UIView *viewThree;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewOneWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewTwoWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewThreeWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewBottomWidth;
@end

2.ViewController.m

 #import "ViewController.h"
 @interface ViewController ()
{
  CGFloat viewOneWidthConstant;
  CGFloat viewTwoWidthConstant;
  CGFloat viewThreeWidthConstant;
  CGFloat viewBottomWidthConstant;
}
@end

@implementation ViewController
@synthesize viewOne, viewTwo, viewThree;

- (void)viewDidLoad {
  [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a 
  nib.

  /*
   0  0   0
   0  0   1
   0  1   0
   0  1   1
   1  0   0
   1  0   1
   1  1   0
   1  1   1
   */

  //    [viewOne setHidden:NO];
  //    [viewTwo setHidden:NO];
  //    [viewThree setHidden:NO];

  //    [viewOne setHidden:NO];
  //    [viewTwo setHidden:NO];
  //    [viewThree setHidden:YES];

  //    [viewOne setHidden:NO];
  //    [viewTwo setHidden:YES];
  //    [viewThree setHidden:NO];

  //    [viewOne setHidden:NO];
  //    [viewTwo setHidden:YES];
  //    [viewThree setHidden:YES];


  //    [viewOne setHidden:YES];
  //    [viewTwo setHidden:NO];
  //    [viewThree setHidden:NO];

  //    [viewOne setHidden:YES];
  //    [viewTwo setHidden:NO];
  //    [viewThree setHidden:YES];

 //    [viewOne setHidden:YES];
 //    [viewTwo setHidden:YES];
 //    [viewThree setHidden:NO];

//    [viewOne setHidden:YES];
//    [viewTwo setHidden:YES];
//    [viewThree setHidden:YES];

 [self hideShowBottomBar];
  }

- (void)hideShowBottomBar
{
  BOOL isOne = !viewOne.isHidden;
  BOOL isTwo = !viewTwo.isHidden;
  BOOL isThree = !viewThree.isHidden;

  viewOneWidthConstant = _viewOneWidth.constant;
  viewTwoWidthConstant = _viewTwoWidth.constant;
  viewThreeWidthConstant = _viewThreeWidth.constant;
  viewBottomWidthConstant = _viewBottomWidth.constant;

   if (isOne && isTwo && isThree) {
    // 0    0   0
    _viewOneWidth.constant = viewBottomWidthConstant / 3;
    _viewTwoWidth.constant = viewBottomWidthConstant / 3;
    _viewThreeWidth.constant = viewBottomWidthConstant / 3;
    }
    else if (isOne && isTwo && !isThree) {
     // 0    0   1
    _viewOneWidth.constant = viewBottomWidthConstant / 2;
    _viewTwoWidth.constant = viewBottomWidthConstant / 2;
    _viewThreeWidth.constant = 0;
    }
   else if (isOne && !isTwo && isThree) {
    // 0    1   0
    _viewOneWidth.constant = viewBottomWidthConstant / 2;
    _viewTwoWidth.constant = 0;
    _viewThreeWidth.constant = viewBottomWidthConstant / 2;
    }
    else if (isOne && !isTwo && !isThree) {
    // 0    1   1
    _viewOneWidth.constant = viewBottomWidthConstant;
    _viewTwoWidth.constant = 0;
    _viewThreeWidth.constant = 0;
   }
   else if (!isOne && isTwo && isThree) {
    // 1    0   0
    _viewOneWidth.constant = 0;
    _viewTwoWidth.constant = viewBottomWidthConstant / 2;
    _viewThreeWidth.constant = viewBottomWidthConstant / 2;
   }
   else if (!isOne && isTwo && !isThree) {
    // 1    0   1
    _viewOneWidth.constant = 0;
    _viewTwoWidth.constant = viewBottomWidthConstant;
    _viewThreeWidth.constant = 0;
   }
   else if (!isOne && !isTwo && isThree) {
    // 1    1   0
    _viewOneWidth.constant = 0;
    _viewTwoWidth.constant = 0;
    _viewThreeWidth.constant = viewBottomWidthConstant;
   }
   else if (isOne && isTwo && isThree) {
    // 1    1   1
    _viewOneWidth.constant = 0;
    _viewTwoWidth.constant = 0;
    _viewThreeWidth.constant = 0;
   }
  }

 - (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
 }
 @end

Espero que esta lógica ayude a alguien.

Como sugirió no_scene, definitivamente puede hacer esto cambiando la prioridad de la restricción en tiempo de ejecución. Esto fue mucho más fácil para mí porque tenía más de una vista de bloqueo que tendría que ser eliminado.

Aquí hay un fragmento usando ReactiveCocoa:

RACSignal* isViewOneHiddenSignal = RACObserve(self.viewModel, isViewOneHidden);
RACSignal* isViewTwoHiddenSignal = RACObserve(self.viewModel, isViewTwoHidden);
RACSignal* isViewThreeHiddenSignal = RACObserve(self.viewModel, isViewThreeHidden);
RAC(self.viewOne, hidden) = isViewOneHiddenSignal;
RAC(self.viewTwo, hidden) = isViewTwoHiddenSignal;
RAC(self.viewThree, hidden) = isViewThreeHiddenSignal;

RAC(self.viewFourBottomConstraint, priority) = [[[[RACSignal
    combineLatest:@[isViewOneHiddenSignal,
                    isViewTwoHiddenSignal,
                    isViewThreeHiddenSignal]]
    and]
    distinctUntilChanged]
    map:^id(NSNumber* allAreHidden) {
        return [allAreHidden boolValue] ? @(780) : @(UILayoutPriorityDefaultHigh);
    }];

RACSignal* updateFramesSignal = [RACObserve(self.viewFourBottomConstraint, priority) distinctUntilChanged];
[updateFramesSignal
    subscribeNext:^(id x) {
        @strongify(self);
        [self.view setNeedsUpdateConstraints];
        [UIView animateWithDuration:0.3 animations:^{
            [self.view layoutIfNeeded];
        }];
    }];

En caso de que esto ayude a alguien, construí una clase helper para usar formato visual restricciones. Lo estoy usando en mi aplicación actual.

AutolayoutHelper

Puede ser un poco adaptado a mis necesidades, pero puede que le resulte útil o puede que desee modificarlo y crear su propio ayudante.

Tengo que agradecer a Tim por su respuesta anterior, esta respuesta sobre UIScrollViewy también este tutorial.

Así es como me gustaría volver a alinear mis uiviews para obtener su solución:

1. Arrastre una vista UIImageView y colóquela a la izquierda.
2. Arrastre una UIView y colóquela a la derecha de UIImageView.
3. Arrastre y suelte dos UILabels dentro de esa UIView cuyas restricciones iniciales y finales son cero.
4. Establezca la restricción inicial de UIView que contiene 2 etiquetas en superview en lugar de UIImagView.
5. SI UIImageView está oculto, establezca la constante de restricción principal en 10 px a superview. DE lo contrario, establezca la constante de restricción principal en 10 px + UIImageView.ancho + 10 px.

He creado una regla de oro propia. Siempre que tenga que ocultar / mostrar cualquier uiview cuyas restricciones podrían verse afectadas, agregue todas las subviews afectadas / dependientes dentro de una uiview y actualice su constante de restricción inicial / final / superior / inferior mediante programación.

Esta es una vieja pregunta, pero aún así espero que ayude. Viniendo de Android, en esta plataforma tienes un práctico método isVisible para ocultarlo de la vista pero también no tener el marco considerado cuando el diseño automático dibuja la vista.

Usando extension y" extend " uiview podría hacer una función similar en ios (no estoy seguro de por qué no está en UIKit ya) aquí una implementación en swift 3:

    func isVisible(_ isVisible: Bool) {
        self.isHidden = !isVisible
        self.translatesAutoresizingMaskIntoConstraints = isVisible
        if isVisible { //if visible we remove the hight constraint 
            if let constraint = (self.constraints.filter{$0.firstAttribute == .height}.first){
                self.removeConstraint(constraint)
            }
        } else { //if not visible we add a constraint to force the view to have a hight set to 0
            let height = NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal , toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 0)
            self.addConstraint(height)
        }
        self.layoutIfNeeded()
    }

La forma correcta de hacerlo es desactivar las restricciones con isActive = false. sin embargo, tenga en cuenta que la desactivación de una restricción la elimina y la libera, por lo que debe tener salidas fuertes para ellos.

Usaré horizontal stackview. Puede eliminar el marco cuando la subvista está oculta.

En la imagen de abajo, la vista roja es el contenedor real para su contenido y tiene 10pt de espacio final a la vista superior naranja (ShowHideView), a continuación, solo tiene que conectar ShowHideView a IBOutlet y mostrar/ocultar/eliminar programáticamente.

1. Esto es cuando la vista es visible/instalada.

1. Esto es cuando la vista es oculto / no instalado.

Esta es mi otra solución que usa restricción de prioridad. La idea es establecer el ancho en 0.

1. Cree la vista de contenedor (naranja) y establezca el ancho.

2. Cree la vista de contenido (rojo) y establezca el espacio final de 10pt en superview (naranja). Observe las restricciones de espacio al final, hay 2 restricciones al final con diferente prioridad. Bajo (=10) y Alto (

3. Establecer el ancho de la vista naranja en 0 a oculta la vista.