Как использовать автоматический макет для перемещения других видов, когда вид скрыт?

Я разработал свою собственную ячейку в IB, разделил ее на подклассы и соединил свои розетки с моим специальным классом. У меня есть три подпредставления в содержимом ячейки: UIView (cdView) и две метки (titleLabel и emailLabel). В зависимости от данных, доступных для каждой строки, иногда я хочу, чтобы UIView и две метки отображались в моей ячейке, а иногда только две метки. То, что я пытаюсь сделать, это установить ограничения таким образом, если я установлю свойство UIView скрытым или я удалю его из суперпредставления, две метки переместятся влево. Я попытался установить ведущее ограничение UIView на Superview (содержимое ячейки) для 10px и UILabels, ведущее ограничение на 10 px для следующего представления (UIView). Позже в моем коде

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

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

Я скрываю свой cell.cdView и хотел бы, чтобы метки двигались влево, но они остаются в той же позиции в Cell. Я пытался удалить cell.cdView из superview, но он тоже не работал. Я приложил изображение, чтобы уточнить, о чем я.

Я знаю, как сделать это программно, и я не ищу это решение. Я хочу установить ограничения в IB, и я ожидаю, что мои подпредставления будут перемещаться динамически, если другие виды будут удалены или скрыты. Можно ли это сделать в IB с автопрокатом?

.....

Это возможно, но вам придется проделать небольшую дополнительную работу. Есть несколько концептуальных вещей, которые нужно сначала убрать с пути:

• Скрытые виды, даже если они не рисуют, по- прежнему участвуют в автоматической компоновке и обычно сохраняют свои фреймы , оставляя другие связанные виды на своих местах.
• При удалении представления из его суперпредставления все связанные ограничения также удаляются из этой иерархии представлений.

В вашем случае это скорее всего означает:

• Если вы устанавливаете левый вид скрытым, надписи остаются на месте, поскольку этот левый вид все еще занимает место (даже если он не виден).
• Если вы удалите свое левое представление, ваши метки, вероятно, останутся неоднозначно ограниченными, поскольку у вас больше не будет ограничений для левых краев ваших меток.

Что вам нужно сделать, так это разумно ограничить ваши ярлыки. Оставьте ваши существующие ограничения (10-тпс пространства для другого вида) в покое, но добавьте еще одно ограничение: отодвиньте левые края ваших меток на 10 пунктов от левого края их суперпредставления с необязательным приоритетом (высокий приоритет по умолчанию, вероятно, будет работать хорошо).

Затем, когда вы хотите, чтобы они переместились влево, полностью удалите левое представление. Обязательное ограничение 10pt для левого представления исчезнет вместе с представлением, к которому оно относится, и у вас останется только высокоприоритетное ограничение, чтобы метки были на расстоянии 10 пунктов от их суперпредставления. На следующем проходе макета это должно заставить их расширяться влево, пока они не заполнят ширину суперпредставления, но для вашего промежутка вокруг краев.

Одно важное предостережение: если вы хотите, чтобы ваш левый вид снова отображался на картинке, вам нужно не только добавить его обратно в иерархию представлений, но и одновременно восстановить все его ограничения . Это означает, что вам нужен способ поместить ограничение 10pt между представлением и его метками обратно всякий раз, когда это представление отображается снова.

Добавление или удаление ограничений во время выполнения - тяжелая операция, которая может повлиять на производительность. Однако есть более простая альтернатива.

Для вида, который вы хотите скрыть, установите ограничение ширины. Ограничьте другие взгляды с ведущим горизонтальным разрывом к этому представлению.

Чтобы скрыть, обновите .constantограничение ширины до 0.f. Другие виды автоматически переместятся влево, чтобы занять позицию.

Смотрите мой другой ответ здесь для более подробной информации:

Как изменить ограничения меток во время выполнения?

Для тех, кто поддерживает только iOS 8+ , есть новое активное логическое свойство . Это поможет включить только необходимые ограничения динамически

PS Ограничение выхода должно быть сильным , а не слабым

Пример:

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

Также, чтобы исправить ошибку в раскадровке, вам нужно снять Installedфлажок для одного из этих ограничений.

UIStackView (iOS 9+)
Еще один вариант - обернуть ваши взгляды в UIStackView. Как только вид будет скрыт, UIStackViewбудет автоматически обновляться макет

UIStackViewавтоматически hiddenизменяет свои представления, когда свойство изменяется в любом из его подпредставлений (iOS 9+).

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

Перейти к 11:48 в этом видео WWDC для демонстрации:

Тайны Авто Макета, Часть 1

Мой проект использует пользовательский @IBDesignableподкласс UILabel(для обеспечения согласованности цвета, шрифта, вставок и т. Д.), И я реализовал что-то вроде следующего:

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

Это позволяет подклассу меток принимать участие в автоматической компоновке, но при скрытии не занимать места.

Для Google: основываясь на ответе Макса, чтобы решить проблему с заполнением, которую многие заметили, я просто увеличил высоту метки и использовал эту высоту в качестве разделителя вместо фактического заполнения. Эта идея может быть расширена для любого сценария, содержащего представления.

Вот простой пример:

В этом случае я сопоставляю высоту метки Author с соответствующим IBOutlet:

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

и когда я устанавливаю высоту ограничения равным 0.0f, мы сохраняем «отступ», потому что высота кнопки воспроизведения позволяет это сделать.

связать ограничение между пользовательским интерфейсом и метками как IBOutlet и установить для элемента приоритета меньшее значение, если установлено скрытое = ДА

Я закончил тем, что создал 2 xibs. Один с левым обзором и один без него. Я зарегистрировал оба в контроллере и затем решил, что использовать во время cellForRowAtIndexPath.

Они используют один и тот же класс UITableViewCell. Недостатком является то, что между XIB есть некоторое дублирование контента, но эти ячейки довольно простые. Плюс в том, что у меня нет кучки кода для ручного управления удалением вида, обновлением ограничений и т. Д.

В общем, это, вероятно, лучшее решение, поскольку они технически отличаются друг от друга и поэтому должны иметь разные XIB.

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

В этом случае я сопоставляю высоту метки Author с соответствующим IBOutlet:

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

и когда я устанавливаю высоту ограничения равной 0.0f, мы сохраняем «отступ», потому что высота кнопки воспроизведения позволяет это сделать.

cell.authorLabelHeight.constant = 0;

Используйте два UIStackView по горизонтали и вертикали, когда какое-то подпредставление в стеке скрыто, другие подпредставления стека будут перемещены, используйте Распределение -> Заполнить пропорционально для вертикального стека с двумя UILabel, и для первого UIView необходимо задать параметры ширины и высоты

Попробуйте это, я реализовал ниже код,

У меня есть один вид на ViewController, в котором добавлены другие три вида. Когда любой вид скрыт, два других вида переместятся, выполните следующие шаги. ,

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

Надеюсь, что эта логика поможет кому-то.

В моем случае я установил постоянную высоту ограничения на 0.0fа также установить hiddenсвойствоYES .

Чтобы снова показать представление (с подпредставлениями), я сделал наоборот: я установил постоянную высоты в ненулевое значение и установил hiddenсвойство в NO.

Я буду использовать горизонтальное представление стека. Он может удалить кадр, когда подпредставление скрыто.

На изображении ниже красный вид является фактическим контейнером для вашего контента и имеет конечный интервал 10pt для оранжевого суперпредставления (ShowHideView), затем просто подключите ShowHideView к IBOutlet и покажите / спрячьте / удалите его программно.

1. Это когда вид виден / установлен.

2. Это когда вид скрыт / не установлен.

Это мое другое решение, использующее ограничение приоритета. Идея установить ширину 0.

1. создать вид контейнера (оранжевый) и установить ширину.

2. создайте представление контента (красный) и установите конечное пространство 10pt в superview (оранжевый). Обратите внимание на концевые пробелы, есть 2 концевых ограничения с разным приоритетом. Низкий (= 10) и Высокий (<= 10). Это важно, чтобы избежать двусмысленности.

3. Установите оранжевую ширину вида на 0, чтобы скрыть вид.

Как и предположил no_scene, вы можете сделать это, изменив приоритет ограничения во время выполнения. Это было намного проще для меня, потому что у меня было более одного вида блокировки, который нужно было удалить.

Вот фрагмент кода с использованием 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];
        }];
    }];

Если это кому-то поможет, я создал вспомогательный класс для использования визуального формата ограничений . Я использую это в моем текущем приложении.

AutolayoutHelper

Это может быть немного приспособлено к моим потребностям, но вы можете найти это полезным или захотите изменить его и создать своего собственного помощника.

Я должен поблагодарить Тима за его ответ выше , этот ответ о UIScrollView, а также этот учебник .

Вот как я бы выровнял свои uiviews, чтобы получить ваше решение:

1. Перетащите один UIImageView и поместите его влево.
2. Перетащите один UIView и поместите его справа от UIImageView.
3. Перетащите две метки UILabels внутри того UIView, у которого начальные и конечные ограничения равны нулю.
4. Установите ведущее ограничение UIView, содержащее 2 метки, для superview вместо UIImagView.
5. Если UIImageView скрыт, установите ведущую константу ограничения в 10 пикселей для суперпредставления. В противном случае установите ведущую постоянную ограничения равной 10 пикселей + UIImageView.width + 10 пикселей.

Я создал собственное правило большого пальца. Всякий раз, когда вам нужно скрыть / показать какой-либо пользовательский вид, на чьи ограничения могут повлиять, добавьте все затронутые / зависимые подпредставления внутри пользовательского интерфейса и программно обновите его константу начальных / конечных / верхних / нижних ограничений.

Это старый вопрос, но все же я надеюсь, что это поможет. Исходя из Android, на этой платформе у вас есть удобный метод, isVisibleчтобы скрыть его от вида, но при этом не учитывать кадр, когда автопутешествие рисует вид.

используя extension и "extension" uiview, вы можете сделать аналогичную функцию в ios (не уверен, почему его нет в UIKit), здесь реализация в 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()
    }

правильный способ сделать это - отключить ограничения с помощью isActive = false. заметьте, однако, что деактивация ограничения удаляет и освобождает его, поэтому вы должны иметь сильные выходы для них.

Самое простое решение - использовать UIStackView (горизонтальный). Добавить в стек: первый вид и второй вид с метками. Затем установите для свойства isHidden первого вида значение false. Все ограничения будут рассчитаны и обновлены автоматически.

Я думаю, что это самый простой ответ. Пожалуйста, убедитесь, что это работает:

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

проверьте здесь https://www.youtube.com/watch?v=EBulMWMoFuw