Come utilizzare il layout automatico per spostare altre viste quando una vista è nascosta?

Ho progettato la mia cella personalizzata in IB, l'ho sottoclassata e ho collegato i miei punti vendita alla mia classe personalizzata. Ho tre visualizzazioni secondarie nel contenuto della cella che sono: UIView (cdView) e due etichette (titleLabel ed emailLabel). A seconda dei dati disponibili per ogni riga, a volte voglio avere UIView e due etichette visualizzate nella mia cella e a volte solo due etichette. Quello che sto cercando di fare è impostare i vincoli in questo modo se imposto la proprietà UIView su hidden o la rimuoverò dalla superview, le due etichette si sposteranno a sinistra. Ho provato a impostare il vincolo principale di UIView su Superview (contenuto della cella) per 10px e UILabels che vincolano i vincoli per 10 px alla vista successiva (UIView). Più avanti nel mio codice

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(IndexPath *)indexPath {
...
Record *record = [self.records objectAtIndex:indexPath.row];

if ([record.imageURL is equalToString:@""]) {
     cell.cdView.hidden = YES;
}

Sto nascondendo il mio cell.cdView e vorrei che le etichette si spostassero a sinistra, ma si trovano nella stessa posizione in Cell. Ho provato a rimuovere cell.cdView da superview ma non ha funzionato neanche. Ho allegato un'immagine per chiarire di cosa mi occupo.

So farlo in modo programmatico e non sto cercando quella soluzione. Quello che voglio è impostare vincoli in IB e mi aspetto che le mie visualizzazioni secondarie si sposteranno dinamicamente se altre viste vengono rimosse o nascoste. È possibile farlo in IB con auto-layout?

.....

È possibile, ma dovrai fare un po 'di lavoro extra. Ci sono un paio di cose concettuali da fare prima di tutto:

• Le viste nascoste, anche se non disegnano, partecipano comunque al layout automatico e di solito mantengono i loro fotogrammi , lasciando al loro posto altre viste correlate.
• Quando si rimuove una vista dalla sua superview, tutti i vincoli correlati vengono rimossi dalla gerarchia di quella vista.

Nel tuo caso, questo probabilmente significa:

• Se imposti la vista sinistra in modo che sia nascosta, le etichette restano in posizione, poiché quella vista sinistra occupa ancora spazio (anche se non è visibile).
• Se rimuovi la vista di sinistra, le tue etichette saranno probabilmente lasciate ambiguamente vincolate, poiché non hai più vincoli per i bordi di sinistra delle tue etichette.

Quello che devi fare è giudicare eccessivamente le tue etichette. Lascia soli i tuoi vincoli esistenti (10 punti di spazio sull'altra vista), ma aggiungi un altro vincolo: fai in modo che i bordi sinistri delle tue etichette siano a 10 punti dal bordo sinistro della loro superview con una priorità non richiesta (la priorità alta predefinita probabilmente funzionerà bene).

Quindi, quando vuoi che si spostino a sinistra, rimuovi del tutto la vista a sinistra. Il vincolo 10pt obbligatorio per la vista sinistra scomparirà insieme alla vista a cui si riferisce, e ti verrà lasciato solo un vincolo ad alta priorità che le etichette saranno a 10 punti di distanza dalla loro superview. Al passaggio successivo del layout, ciò dovrebbe farli espandere a sinistra fino a riempire la larghezza della superview ma per la spaziatura attorno ai bordi.

Un avvertimento importante: se mai vuoi che la tua vista di sinistra sia di nuovo nella foto, non solo devi aggiungerla di nuovo nella gerarchia della vista, ma devi anche ristabilire tutti i suoi vincoli allo stesso tempo. Ciò significa che è necessario un modo per ripristinare il vincolo di spaziatura 10pt tra la vista e le sue etichette ogni volta che tale vista viene mostrata di nuovo.

L'aggiunta o la rimozione di vincoli durante il runtime è un'operazione pesante che può influire sulle prestazioni. Tuttavia, esiste un'alternativa più semplice.

Per la vista che desideri nascondere, imposta un vincolo di larghezza. Vincola le altre viste con un divario orizzontale iniziale rispetto a tale vista.

Per nascondere, aggiorna il .constantvincolo di larghezza a 0.f. Le altre viste si sposteranno automaticamente a sinistra per assumere la posizione.

Vedi la mia altra risposta qui per maggiori dettagli:

Come modificare i vincoli delle etichette durante il runtime?

Per coloro che supportano solo iOS 8+ , è attiva una nuova proprietà booleana . Aiuterà ad abilitare dinamicamente solo i vincoli necessari

L'output del vincolo PS deve essere forte , non debole

Esempio:

@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
}

Inoltre, per correggere un errore nello storyboard dovrai deselezionare la Installedcasella di controllo per uno di questi vincoli.

UIStackView (iOS 9+)
Un'altra opzione è quella di avvolgere le tue viste UIStackView. Una volta nascosta la vista UIStackView, il layout verrà aggiornato automaticamente

UIStackViewriposiziona le sue viste automaticamente quando la hiddenproprietà viene modificata in una qualsiasi delle sue viste secondarie (iOS 9+).

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

Vai alle 11:48 in questo video del WWDC per una demo:

Misteri del layout automatico, parte 1

Il mio progetto utilizza una @IBDesignablesottoclasse personalizzata di UILabel(per garantire la coerenza di colori, caratteri, inserti, ecc.) E ho implementato qualcosa di simile al seguente:

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

Ciò consente alla sottoclasse di etichette di prendere parte al layout automatico, ma non occupa spazio quando è nascosta.

Per i googler: basandomi sulla risposta di Max, per risolvere il problema dell'imbottitura che molti hanno notato, ho semplicemente aumentato l'altezza dell'etichetta e usato quell'altezza come separatore anziché l'effettiva imbottitura. Questa idea potrebbe essere espansa per qualsiasi scenario con viste contenenti.

Ecco un semplice esempio:

In questo caso, associo l'altezza dell'etichetta dell'autore a un appropriato IBOutlet:

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

e quando imposto l'altezza del vincolo su 0.0f, conserviamo il "riempimento", perché l' altezza del pulsante Riproduci lo consente.

collega il vincolo tra uiview ed etichette come IBOutlet e imposta il membro prioritario su un valore inferiore quando impostato nascosto = SÌ

Quello che ho finito per fare è stato la creazione di 2 xib. Uno con la vista a sinistra e uno senza di essa. Ho registrato entrambi nel controller e quindi ho deciso quale utilizzare durante cellForRowAtIndexPath.

Usano la stessa classe UITableViewCell. Il rovescio della medaglia è che c'è una duplicazione del contenuto tra gli xib, ma queste celle sono piuttosto semplici. Il lato positivo è che non ho un sacco di codice per gestire manualmente la rimozione della vista, l'aggiornamento dei vincoli, ecc.

In generale, questa è probabilmente una soluzione migliore poiché sono layout tecnicamente diversi e quindi dovrebbero avere xib diversi.

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

In questo caso, associo l'altezza dell'etichetta dell'autore a un IBOutlet appropriato:

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

e quando imposto l'altezza del vincolo su 0.0f, conserviamo il "padding", perché l'altezza del pulsante Play lo consente.

cell.authorLabelHeight.constant = 0;

Usa due UIStackView orizzontale e verticale, quando alcune viste secondarie in pila sono nascoste, altre mosse vengono spostate le viste secondarie in pila, usa Distribuzione -> Riempi proporzionalmente per pila verticale con due UILabel e devi impostare i limiti di larghezza e altezza per la prima vista UIV

Prova questo, ho implementato sotto il codice,

Ho una vista su ViewController in cui sono state aggiunte altre tre viste. Quando una vista è nascosta, altre due viste si sposteranno. Seguire i passaggi seguenti. ,

File 1.ViewController.h

#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

Spero Quindi questa logica aiuterà qualcuno.

Nel mio caso ho impostato la costante del vincolo di altezza su 0.0fe ho anche impostato la hiddenproprietà su YES.

Per mostrare di nuovo la vista (con le viste secondarie) ho fatto il contrario: ho impostato la costante di altezza su un valore diverso da zero e ho impostato la hiddenproprietà su NO.

Userò lo stackview orizzontale. Può rimuovere la cornice quando la vista secondaria è nascosta.

Nell'immagine seguente, la vista rossa è il contenitore effettivo per i tuoi contenuti e ha uno spazio finale di 10pt nella superview arancione (MostraHideView), quindi collega MostraHideView a IBOutlet e mostra / nascondi / rimuovilo a livello di programmazione.

1. Questo è quando la vista è visibile / installata.

2. Questo è quando la vista è nascosta / non installata.

Questa è un'altra mia soluzione che utilizza il vincolo di priorità. L'idea imposta la larghezza su 0.

1. crea una vista contenitore (arancione) e imposta la larghezza.

2. creare la visualizzazione del contenuto (rosso) e impostare lo spazio finale 10pt su superview (arancione). Notare i vincoli dello spazio finale, ci sono 2 vincoli finali con priorità diversa. Basso (= 10) e Alto (<= 10). Questo è importante per evitare ambiguità.

3. Impostare la larghezza della vista arancione su 0 per nascondere la vista.

Come suggerito no_scene, puoi sicuramente farlo modificando la priorità del vincolo in fase di esecuzione. Questo è stato molto più facile per me perché avevo più di una vista di blocco che avrebbe dovuto essere rimossa.

Ecco uno snippet che utilizza 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];
        }];
    }];

Nel caso in cui ciò aiuti qualcuno, ho creato una classe di supporto per l'utilizzo dei vincoli del formato visivo . Lo sto usando nella mia app attuale.

AutolayoutHelper

Potrebbe essere un po 'su misura per le mie esigenze, ma potresti trovarlo utile o potresti volerlo modificare e creare il tuo aiuto personale.

Devo ringraziare Tim per la sua risposta sopra , questa risposta su UIScrollView e anche questo tutorial .

Ecco come riallineare le mie visualizzazioni per ottenere la tua soluzione:

1. Trascina e rilascia un UIImageView e posizionalo a sinistra.
2. Trascina e rilascia un UIView e posizionalo a destra di UIImageView.
3. Trascina due UILabel all'interno di quella vista UIV i cui vincoli iniziali e finali sono zero.
4. Imposta il vincolo principale di UIView contenente 2 etichette su superview anziché su UIImagView.
5. Se UIImageView è nascosto, imposta la costante del vincolo iniziale su 10 px per la superview. ELSE, imposta la costante del vincolo iniziale su 10 px + UIImageView.width + 10 px.

Ho creato una mia regola del pollice. Ogni volta che devi nascondere / mostrare una vista qualsiasi i cui vincoli potrebbero essere interessati, aggiungi tutte le viste secondarie interessate / dipendenti all'interno di una vista diretta e aggiorna la costante del vincolo iniziale / finale / superiore / inferiore programmaticamente.

Questa è una vecchia domanda, ma spero ancora che possa essere d'aiuto. Proveniente da Android, in questa piattaforma hai un metodo utile isVisibleper nasconderlo dalla vista ma non hai nemmeno il frame considerato quando il layout automatico disegna la vista.

usando extension ed "extension" uiview potresti svolgere una funzione simile in iOS (non so perché non sia già presente in UIKit) qui un'implementazione in 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()
    }

il modo corretto per farlo è disabilitare i vincoli con isActive = false. si noti tuttavia che la disattivazione di un vincolo lo rimuove e lo rilascia, quindi è necessario disporre di sbocchi forti per essi.

La soluzione più semplice è usare UIStackView (orizzontale). Aggiungi alla vista pila: prima vista e seconda vista con etichette. Quindi impostare la proprietà isHidden della prima vista su false. Tutti i vincoli verranno calcolati e aggiornati automaticamente.

Penso che questa sia la risposta più semplice. Verifica che funzioni:

        StackFullView.layer.isHidden = true
        Task_TopSpaceSections.constant = 0.   //your constraint of top view

controlla qui https://www.youtube.com/watch?v=EBulMWMoFuw