Jak używać układu automatycznego do przenoszenia innych widoków, gdy widok jest ukryty?

Dodawanie lub usuwanie ograniczeń podczas wykonywania to ciężka operacja, która może mieć wpływ na wydajność. Istnieje jednak prostsza alternatywa.

Dla widoku, który chcesz ukryć, Ustaw ograniczenie szerokości. Ogranicz inne widoki z prowadzącą poziomą luką do tego widoku.

Aby ukryć, zaktualizuj .constant ograniczenia szerokości do 0.f. Pozostałe widoki automatycznie przesuną się w lewo, aby przyjąć pozycję.

Zobacz moją inną odpowiedź tutaj, aby uzyskać więcej szczegółów:

Jak aby zmienić ograniczenia etykiet w czasie wykonywania?

Dla tych, którzy obsługują tylko iOS 8+, istnieje nowa właściwość logiczna aktywna . Pomoże to włączyć tylko potrzebne ograniczenia dynamicznie

P. S. ograniczenie musi być silne , a nie słabe

przykład:

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

Aby naprawić błąd w storyboard, musisz odznaczyć Installed pole wyboru dla jednego z tych ograniczeń.

UIStackView (iOS 9+)
Jeszcze jedną opcją jest zawinięcie widoków w UIStackView. Raz widok jest ukryty UIStackView automatycznie zaktualizuje układ

UIStackView repozycjonuje widoki automatycznie, gdy właściwość hidden zostanie zmieniona w którymkolwiek z jej podwizji (iOS 9+).

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

Skocz do 11:48 w tym wideo WWDC do demo:

Tajemnice układu Auto, Część 1

Mój projekt używa niestandardowej @IBDesignable podklasy UILabel (aby zapewnić spójność kolorów, czcionek, wstawek itp.) i zaimplementowałem coś takiego:

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

Pozwala to podklasie etykiet na udział w układzie automatycznym, ale nie zajmuje miejsca po ukryciu.

dla Googlerów: opierając się na odpowiedzi Maxa, aby rozwiązać problem wypełnienia, który wielu zauważyło, po prostu zwiększyłem Wysokość etykiety i użyłem tej wysokości jako separatora zamiast rzeczywistego wypełnienia. Pomysł ten można rozszerzyć dla każdego scenariusza zawierającego widoki.

Oto prosty przykład:

W tym przypadku mapuję Wysokość etykiety Author na odpowiednią IBOutlet:

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

I kiedy ustawiam wysokość ograniczenie do 0.0f, zachowujemy "padding", ponieważ pozwala na to wysokość przycisku Play .

Skończyło się na stworzeniu 2 XIB. Jeden z widokiem po lewej i jeden bez niego. Zarejestrowałem się zarówno w kontrolerze, jak i zdecydowałem, z czego korzystać podczas cellForRowAtIndexPath.

Używają tej samej klasy UITableViewCell. Minusem jest to, że istnieje pewne powielanie treści między xibs, ale te komórki są dość podstawowe. Plusem jest to, że nie mam kilku kodów do ręcznego zarządzania usuwaniem widoku, aktualizowaniem ograniczeń itp.

Ogólnie rzecz biorąc, jest to prawdopodobnie lepsze rozwiązanie, ponieważ są one technicznie różne układy i dlatego powinny mieć różne 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];

Połącz ograniczenie pomiędzy uiview i labels jako IBOutlet i Ustaw element priorytetowy na wartość less, gdy ustawisz hidden = YES

W tym przypadku mapuję Wysokość etykiety autora na odpowiedni IBOutlet:

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

I kiedy ustawiam wysokość ograniczenia na 0.0 f, zachowujemy "padding", ponieważ pozwala na to wysokość przycisku odtwarzania.

cell.authorLabelHeight.constant = 0;

Użyj dwóch UIStackView w poziomie i w pionie, gdy jakiś widok podrzędny w stosie jest ukryty, inne podview stosu zostaną przeniesione, użyj Distribution -> Fill proporcjonalnie dla stosu pionowego z dwoma znakami UILabel i potrzebujesz stałych szerokości i wysokości dla pierwszego UIView

W moim przypadku ustawiłem stałą ograniczenia wysokości na 0.0f, a także właściwość hidden na YES.

Aby ponownie pokazać widok (z podglądami) zrobiłem odwrotnie: ustawiłem stałą wysokości na niezerową wartość i ustawiłem Właściwość hidden na NO.

Spróbuj tego, zaimplementowałem poniższy kod,

Mam jeden Widok na ViewController w tym dodanych trzech innych widoków, gdy dowolny widok jest ukryty,pozostałe dwa widoki zostaną przeniesione, wykonaj poniższe kroki. ,

1.ViewController.plik 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

Jak zasugerował no_scene, możesz to zdecydowanie zrobić, zmieniając priorytet ograniczenia w czasie wykonywania. Było to dla mnie o wiele łatwiejsze, ponieważ miałem więcej niż jeden widok blokujący, który musiał zostać usunięty.

Oto fragment z użyciem 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];
        }];
    }];

Na wypadek, gdyby to komuś pomogło, zbudowałem klasę pomocniczą do używania ograniczeń w formacie wizualnym . Używam go w mojej obecnej aplikacji.

AutolayoutHelper

Może być trochę dostosowany do moich potrzeb, ale może okazać się przydatny lub możesz chcieć go zmodyfikować i stworzyć własnego pomocnika.

Muszę podziękować Timowi za jego odpowiedź powyżej, Ta odpowiedź na temat UIScrollView , a także ten tutorial .

Oto, jak ponownie wyrównać moje uiviews, aby uzyskać rozwiązanie:

1. Przeciągnij Upuść jeden UIImageView i umieść go w lewo.
2. przeciągnij jeden UIView i umieść go po prawej stronie UIImageView.
3. Przeciągnij Upuść dwa znaki UILabel wewnątrz tego interfejsu, których ograniczenia wiodące i końcowe są zerowe.
4. Ustaw ograniczenie wiodące UIView zawierające 2 etykiety na superview zamiast UIImagView.
5. Jeśli UIImageView jest ukryty, Ustaw stałą ograniczenia wiodącego na 10 px na superview. W przeciwnym razie Ustaw główną stałą ograniczenia na 10 px + UIImageView./ width = 10 px/

Stworzyłem własną zasadę kciuka. Za każdym razem, gdy musisz ukryć / pokazać dowolny interfejs użytkownika, którego ograniczenia mogą być naruszone, dodaj wszystkie powiązane / zależne podview wewnątrz interfejsu użytkownika i programowo zaktualizuj jego wiodącą / końcową / górną / dolną stałą ograniczenia.

To stare pytanie, ale mam nadzieję, że pomoże. Pochodzący z Androida, na tej platformie masz poręczną metodę isVisible, aby ukryć go przed widokiem, ale także nie mieć ramki pod uwagę, gdy autolayout rysuje widok.

Używając extension I" extend " uiview możesz wykonać podobną funkcję w ios (Nie wiem dlaczego nie ma jej już w UIKit) tutaj implementacja w 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()
    }

Właściwym sposobem jest wyłączenie ograniczeń za pomocą isactive = false. zauważ jednak, że dezaktywacja ograniczenia usuwa i zwalnia je, więc musisz mieć dla nich silne wyjścia.

Użyję horizontal stackview. Może usunąć ramkę, gdy subview jest ukryty.

Na obrazku poniżej, czerwony widok jest rzeczywisty kontener dla zawartości i ma 10pt końcowe miejsce do orange superview (ShowHideView), a następnie po prostu podłączyć ShowHideView do IBOutlet i pokazać/ukryć / usunąć go programowo.

1. to jest, gdy widok jest widoczny / zainstalowany.

1. to wtedy widok jest Ukryty / nie zainstalowany.

To moje kolejne rozwiązanie przy użyciu ograniczenia priorytetu. Idea jest ustawiona na szerokość 0.

1. Utwórz widok kontenera (pomarańczowy) i ustaw szerokość.

2. Utwórz widok zawartości (czerwony) i ustaw przestrzeń końcową 10pt na superview (pomarańczowy). Zauważ końcowe ograniczenia przestrzeni, istnieją 2 końcowe ograniczenia o różnym priorytecie. Niski (=10) i wysoki (

3. Ustaw szerokość widoku pomarańczowego na 0 do Ukryj widok.