隐藏视图时如何使用自动布局来移动其他视图？

我已经在IB中设计了自定义单元，将其子类化，然后将插座连接到我的自定义类。我在单元格内容中有三个子视图：UIView（cdView）和两个标签（titleLabel和emailLabel）。根据每行可用的数据，有时我想在单元格中显示UIView和两个标签，有时只显示两个标签。我想做的是，如果我将UIView属性设置为hidden，或者将其从超级视图中删除，则以这种方式设置约束，这两个标签将向左移动。我尝试将UIView领先约束设置为10像素的Superview（单元格内容），并将UILabels领先约束10像素的像素设置为下一个视图（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，但它也不起作用。我已附上图片以阐明我的意思。

我知道如何以编程方式执行此操作，因此我没有寻找该解决方案。我想要在IB中设置约束，并且我希望如果其他视图被删除或隐藏，我的子视图将动态移动。可以在IB中使用自动布局执行此操作吗？

.....

有可能，但是您需要做一些额外的工作。首先要避免一些概念上的事情：

• 隐藏的视图（即使不绘制）仍会参与自动版式，并且通常会保留其框架，并将其他相关视图保留在其位置。
• 从其超级视图中删除视图时，所有相关约束也将从该视图层次结构中删除。

就您而言，这可能意味着：

• 如果将左视图设置为隐藏，则标签将保留在原处，因为该左视图仍会占用空间（即使它不可见）。
• 如果删除左视图，则标签可能会受到含糊的约束，因为标签的左边缘不再受约束。

您需要明智地过度约束标签。单独保留现有约束（到另一个视图的空间为10pts），但添加另一个约束：以不需要的优先级使标签的左边缘距其超级视图的左边缘10pts（默认的高优先级可能会很好地工作）。

然后，当您希望它们向左移动时，请完全删除左视图。左侧视图的强制性10pt约束将随与之相关的视图一起消失，而您将只剩下一个高优先级约束，即标签距离其父视图至少10pts。在下一次布局传递时，这将导致它们向左扩展，直到它们填满超级视图的宽度为止，但要保持边缘周围的间距。

一个重要的警告：如果您想让左视图重新出现在图片中，不仅需要将其重新添加到视图层次结构中，而且还必须同时重新建立其所有约束。这意味着您需要一种方法，只要该视图再次显示，便在视图及其标签之间放回10pt的间距约束。

在运行时添加或删除约束是一项重量级的操作，可能会影响性能。但是，有一个更简单的选择。

对于要隐藏的视图，设置宽度约束。将其他视图与该视图之间的领先水平间隙限制在一起。

要隐藏，.constant请将宽度约束的设置为0.f。其他视图将自动向左移动到指定位置。

有关更多详细信息，请参见此处的其他答案：

如何在运行时更改标签约束？

对于仅支持iOS 8+的用户，有一个新的boolean属性处于活动状态。这将有助于动态地仅启用所需的约束

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
}

在此WWDC视频中跳至11:48进行演示：

自动布局的奥秘，第1部分

我的项目使用了一个自定义@IBDesignable子类UILabel（以确保颜色，字体，插图等的一致性），并且实现了以下内容：

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

这允许标签子类参与“自动布局”，但隐藏时不占空间。

对于Google员工：以Max的答案为基础，为了解决许多人已经注意到的填充问题，我只是增加了标签的高度，并使用该高度作为分隔符，而不是实际的填充。这个想法可以扩展到任何包含视图的场景。

这是一个简单的例子：

在这种情况下，我将Author标签的高度映射到适当的位置IBOutlet：

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

当我将约束的高度设置为时0.0f，我们保留了“填充”，因为“ 播放”按钮的高度允许它。

将uiview和标签之间的约束连接为IBOutlet，并在设置hidden = YES时将优先级成员设置为较小的值

我最终要做的是创建2个xib。一种带有左视图，另一种没有左视图。我在控制器中都进行了注册，然后决定在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的垂直堆栈使用Distribution-> Proporionally Fill，并为第一个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。

为了再次显示视图（带有子视图），我做了相反的事情：我将height常量设置为非零值，并将hidden属性设置为NO。

我将使用水平stackview。当子视图隐藏时，它可以删除框架。

在下图中，红色视图是您内容的实际容器，橙色橙色视图（ShowHideView）的尾部空间为10pt，然后将ShowHideView连接到IBOutlet并以编程方式显示/隐藏/删除它。

1. 这是可见/已安装视图的时间。

2. 这是隐藏/未安装视图的情况。

这是我使用优先级约束的另一种解决方案。这个想法是将宽度设置为0。

1. 创建容器视图（橙色）并设置宽度。

2. 创建内容视图（红色）并将尾随空间10pt设置为超级视图（橙色）。注意尾随空间约束，有两个优先级不同的尾随约束。低（= 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];
        }];
    }];

如果这对某人有帮助，我建立了一个使用视觉格式的帮助器类约束。我在当前应用中使用它。

自动布局助手

它可能是针对我的需求量身定制的，但是您可能会发现它很有用，或者您可能想要对其进行修改并创建自己的帮助器。

我要感谢蒂姆为他的回答以上，这个答案大概UIScrollView的，也本教程。

这是我如何重新排列uiview以获得您的解决方案的方法：

1. 拖放一个UIImageView并将其放在左侧。
2. 拖放一个UIView并将其放在UIImageView的右侧。
3. 将两个UILabel拖放到该UIView中，其前，后约束均为零。
4. 将包含2个标签的UIView的前导约束设置为superview而不是UIImagView。
5. 如果UIImageView被隐藏，则将前导约束常量设置为10 px以进行超级视图。否则，将前导约束常量设置为10 px + UIImageView.width + 10 px。

我创建了自己的经验法则。每当您必须隐藏/显示其约束可能受到影响的任何uiview时，请将所有受影响的/依赖子视图添加到uiview中，并以编程方式更新其前导/尾随/顶部/底部约束常量。

这是一个古老的问题，但我仍然希望它会有所帮助。来自Android，在此平台上，您可以使用方便的方法isVisible将其从视图中隐藏，但是在自动布局绘制视图时也无需考虑框架。

使用extension和“ extend” 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