根据总行的动态表高度自动布局+限制 [英] Autolayout + constraints for dynamic table height based on total rows

问题描述

这一切首先是不是动态的单元格的高度。所以不要混合起来。

我有一个场景我创建了三个卡

I have a scenario in that I created three cards

1. 详细信息卡：地点显示具体细节


2. 图表卡：显示基于选择不同的图表


3. 更详细信息卡：卡显示详细信息

下面是以上存储卡屏幕：

Below are screens for above cards:

以上屏幕查看层次结构：

View hierarchy for above screens:

  
• 控制器
    
    
  
    
  • 滚动型
  
    
  • 卡-1
  
    
  • 卡-2
  
    
  • 卡-3'; ----我们有兴趣在此卡
      
      
    
      
    • 自定义视图
        
        
      
        
      • 的TableView
      
        

      所以，我展示的约束在这里的最后一张牌，上面所有的卡工作完美！并没有限制歧义或警告。

      So I'm showing the constraints for last card here, all above card works perfect! and there is no constraints ambiguity or warnings.

      让我们通过code：

      首先添加卡-3 到滚动型：这里 chartBox 是卡-2和 bottomBox 是卡-3

      First Add Card-3 to ScrollView: here chartBox is Card-2 and bottomBox is Card-3

      [self.scrollView addConstraints:[NSLayoutConstraint
                                       constraintsWithVisualFormat:@"V:[chartBox(200)]-(10)-[bottomBox]"
                                       options:0
                                       metrics:nil
                                       views:@{@"bottomBox" : self.bottomBox, @"chartBox" : self.chartBox}]];
      
      // Below constraint pin to increase content-size
      [self.scrollView addConstraints:[NSLayoutConstraint
                                      constraintsWithVisualFormat:@"V:[bottomBox]-(10)-|"
                                      options:0
                                      metrics:nil
                                      views:@{@"bottomBox" : self.bottomBox}]];
      
      [self.scrollView addConstraints:[NSLayoutConstraint
                                      constraintsWithVisualFormat:@"H:[bottomBox]-(10)-|"
                                      options:0
                                      metrics:nil
                                      views:@{@"bottomBox" : self.bottomBox}]];
      

      二添加 CustomView 到卡-3 ：这里 bluePrintView 是CustomView

      Second add CustomView to Card-3: Here bluePrintView is CustomView

      _bluePrintView = [[BluePrintView alloc] init];
      self.bluePrintView.translatesAutoresizingMaskIntoConstraints = NO;
      [self.bottomBox addSubview:self.bluePrintView];
      
      [self.bottomBox addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[bluePrintView]|" options:0 metrics:nil views:@{@"bluePrintView":self.bluePrintView}]];
      [self.bottomBox addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[bluePrintView]|" options:0 metrics:nil views:@{@"bluePrintView":self.bluePrintView}]];
      
      CGRect screenRect = [[UIScreen mainScreen] bounds];
      CGFloat screenWidth = screenRect.size.width - 20;
      NSDictionary *metrices = @{@"width" : [NSNumber numberWithFloat:screenWidth]};
      [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[bottomBox(width)]" options:0 metrics:metrices views:@{ @"bottomBox": self.bottomBox}]];
      

      第三附加的TableView 到 CustomView ：

      Third add TableView to CustomView:

      self.tableView.tableFooterView = [[UIView alloc] init];
      
      [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[tableView]|" options:0 metrics:nil views:@{@"tableView":self.tableView}]];
      [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[tableView]|" options:0 metrics:nil views:@{@"tableView":self.tableView}]];
      
      // Height constraint
      CGFloat viewHeight = self.bounds.size.height;
      self.tableHeightConstraint = [NSLayoutConstraint constraintWithItem:self.tableView
                                                                attribute:NSLayoutAttributeHeight
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:nil
                                                                attribute:NSLayoutAttributeNotAnAttribute
                                                               multiplier:1.0
                                                                 constant:viewHeight];
      [self addConstraint:self.tableHeightConstraint];
      
      [self.tableView addObserver:self forKeyPath:@"contentSize" options:0 context:NULL];
      

      和观察员方法我会更新 tableHeightConstraint 约束。

      And in observer method I'll update tableHeightConstraint constraint.

      - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
          self.tableHeightConstraint.constant = self.tableView.contentSize.height;
          [self.tableView setNeedsLayout];
          [self.tableView layoutIfNeeded];
      }
      

      努力毕竟准备结束在这里。警告限制。

      After trying all possibilities end up here. Warnings for constraints.

      (
          "<NSLayoutConstraint:0x7fbeb1e7e8e0 V:|-(0)-[UITableView:0x7fbeb2843000]   (Names: '|':BluePrintView:0x7fbeb1e7ac30 )>",
          "<NSLayoutConstraint:0x7fbeb1e7e700 V:[UITableView:0x7fbeb2843000]-(0)-|   (Names: '|':BluePrintView:0x7fbeb1e7ac30 )>",
          "<NSLayoutConstraint:0x7fbeb1e7e9b0 V:[UITableView:0x7fbeb2843000(480)]>",
          "<NSLayoutConstraint:0x7fbeb1e81a20 '_UITemporaryLayoutHeight' V:[BluePrintView:0x7fbeb1e7ac30(0)]>"
      )
      
      Will attempt to recover by breaking constraint 
      <NSLayoutConstraint:0x7fbeb1e7e700 V:[UITableView:0x7fbeb2843000]-(0)-|   (Names: '|':BluePrintView:0x7fbeb1e7ac30 )>
      

      我通过删除解决这些警告|从 行[的tableView] （删除底部约束的SuperView）但随后的tableView没有得到渴望的高度。

      I solved these warnings by removing | line from [tableView] (by removing bottom constraint to superView), but then tableView does not get desire height.

      不知道如何得到充分的tableView的高度与任何约束的警告。

      Any idea how to get full tableView height with out any constraint warnings.

      P.S。所有视图由code，厦门国际银行没有任何故事板布局创建。的iOS 9.2

      P.S. All views are created by code, no XIB no Storyboard layout. iOS 9.2

      推荐答案

      我没有看到你的约束，建立任何错误。

      I did not see any error in your constraints setup.

      您可能会看到这个UITemporaryLayoutHeight约束，因为你添加的contentSize观察者（ [self.tableView的addObserver：自forKeyPath：@contentSize选项：0语境：NULL]
      ）过早地在视图的生命周期，这将触发一个 [self.tableView layoutIfNeeded] 。

      You may see this UITemporaryLayoutHeight constraint because you added the contentSize observer ([self.tableView addObserver:self forKeyPath:@"contentSize" options:0 context:NULL] ) too soon in your view life cycle, which triggers a [self.tableView layoutIfNeeded].

      尝试添加观察者在 viewDidLoad中，删除它在的dealloc 您的视图控制器;或在你的 viewWillAppear中，并删除其在 viewWillDisappear 的为例。

      Try to add the observer in the viewDidLoad, remove it in dealloc of your View Controller ; Or in your viewWillAppear, and remove it in the viewWillDisappear for exemple.

      这篇关于根据总行的动态表高度自动布局+限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！