UITableView的UIScrollView的范围内使用自动布局 [英] UITableView within UIScrollView using autolayout

问题描述

目前，我使用的是的UITableView 与包含在的UIScrollView 其他视图一起。我想在的UITableView 有它的高度是一样的作为其内容的高度。

At the moment, I'm using a UITableView along with other views that are contained in a UIScrollView. I want the UITableView to have its height to be the same as its content height.

要复杂的事情，我也插入/删除行提供的折叠效果，这样，当用户点击某一行上，它会显示该行的详细信息。

To complicate things, I'm also inserting / deleting rows to provide an accordion effect so that when the user taps on a row, it will show more detail for that row.

我已经得到了插入/删除完成，但目前它不更新的UIScrollView这是它的父，这样的的UIScrollView 是内容大小重新计算和的UITableView 连同其他意见的UIScrollView 显示正确。

I've got the insert / deletion done, though at the moment it doesn't update the UIScrollView which is its superview so that the content size of the UIScrollView is recalculated and the UITableView along with other views in the UIScrollView are displayed correctly.

我该如何去实现这一点，以便的UIScrollView 的大小进行调整，其内容奠定了正确的当我改变内容的 UITableView的？我目前使用的自动布局。

How can I go about implementing this so that UIScrollView's size is adjusted and its contents laid out correctly when I change the content of the UITableView? I'm currently using auto layout.

推荐答案

首先，是（表视图的兄弟姐妹）其他意见严格上面和表视图下方？如果是这样，你有没有考虑让表视图滚动正常，并把外面那些意见表视图的页眉和页脚的看法？然后，你不需要滚动视图。

First of all, are those other views (siblings of the table view) strictly above and below the table view? If so, have you considered letting the table view scroll normally, and putting those outside views in the table view's header and footer views? Then you don't need the scroll view.

第二，你可能想读<一个href=\"https://developer.apple.com/library/ios/#technotes/tn2154/_index.html#//apple_ref/doc/uid/DTS40013309\">Technical注意TN2154：UIScrollView中并自动布局如果您尚未

Second, you may want to read Technical Note TN2154: UIScrollView And Autolayout if you haven't already.

第三，鉴于在技术说明中的信息，我能想到的几个方法可以做你想做的。最干净的可能是创建的UITableView 的一个子类实现 intrinsicContentSize 方法。实现很简单：

Third, given the information in that tech note, I can think of a few ways to do what you want. The cleanest is probably to create a subclass of UITableView that implements the intrinsicContentSize method. The implementation is trivial:

@implementation MyTableView

- (CGSize)intrinsicContentSize {
    [self layoutIfNeeded]; // force my contentSize to be updated immediately
    return CGSizeMake(UIViewNoIntrinsicMetric, self.contentSize.height);
}

@end

然后，只需让汽车布局中使用表格视图的内在含量的大小。创建滚动视图（包括表视图）的子视图之间的约束，他们铺陈，并确保有约束滚动视图的四边。

Then just let auto layout use the table view's intrinsic content size. Create the constraints between the subviews of the scroll view (including the table view) to lay them out, and make sure there are constraints to all four edges of the scroll view.

您可能需要发送 invalidateIntrinsicContentSize 来在适当的时间表格视图（当您添加或删除行或修改行的高度）。你很可能只是覆盖 MyTableView 适当的方法来做到这一点。例如。做 [自invalidateIntrinsicContentSize] 在 -endUpdates ， -reloadData ， - insertRowsAtIndexPaths：withRowAnimation：等

You probably need to send invalidateIntrinsicContentSize to the table view at appropriate times (when you add or remove rows or change the heights of rows). You could probably just override the appropriate methods in MyTableView to do that. E.g. do [self invalidateIntrinsicContentSize] in -endUpdates, -reloadData, - insertRowsAtIndexPaths:withRowAnimation:, etc.

下面是我的测试结果：

滚动视图有淡蓝色背景。红顶标签和蓝色底标签是滚动视图内的表视图的兄弟姐妹。

The scroll view has the light blue background. The red top label and the blue bottom label are siblings of the table view inside the scroll view.

下面是完整的源代码code在我的测试视图控制​​器。有没有厦门国际银行的文件。

Here's the complete source code for the view controller in my test. There's no xib file.

#import "ViewController.h"
#import "MyTableView.h"

@interface ViewController () <UITableViewDataSource, UITableViewDelegate>

@end

@implementation ViewController

- (void)loadView {
    UIView *view = [[UIView alloc] init];
    self.view = view;

    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.translatesAutoresizingMaskIntoConstraints = NO;
    scrollView.backgroundColor = [UIColor cyanColor];
    [view addSubview:scrollView];

    UILabel *topLabel = [[UILabel alloc] init];
    topLabel.translatesAutoresizingMaskIntoConstraints = NO;
    topLabel.text = @"Top Label";
    topLabel.backgroundColor = [UIColor redColor];
    [scrollView addSubview:topLabel];

    UILabel *bottomLabel = [[UILabel alloc] init];
    bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
    bottomLabel.text = @"Bottom Label";
    bottomLabel.backgroundColor = [UIColor blueColor];
    [scrollView addSubview:bottomLabel];

    UITableView *tableView = [[MyTableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
    tableView.translatesAutoresizingMaskIntoConstraints = NO;
    tableView.dataSource = self;
    tableView.delegate = self;
    [scrollView addSubview:tableView];

    UILabel *footer = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 30)];
    footer.backgroundColor = [UIColor greenColor];
    footer.text = @"Footer";
    tableView.tableFooterView = footer;

    NSDictionary *views = NSDictionaryOfVariableBindings(
        scrollView, topLabel, bottomLabel, tableView);
    [view addConstraints:[NSLayoutConstraint
        constraintsWithVisualFormat:@"V:|[scrollView]|"
        options:0 metrics:nil views:views]];
    [view addConstraints:[NSLayoutConstraint
        constraintsWithVisualFormat:@"H:|[scrollView]|"
        options:0 metrics:nil views:views]];
    [view addConstraints:[NSLayoutConstraint
        constraintsWithVisualFormat:@"V:|[topLabel][tableView][bottomLabel]|"
        options:0 metrics:nil views:views]];
    [view addConstraints:[NSLayoutConstraint
        constraintsWithVisualFormat:@"H:|[topLabel]|"
        options:0 metrics:nil views:views]];
    [view addConstraints:[NSLayoutConstraint
        constraintsWithVisualFormat:@"H:|-8-[tableView]-8-|"
        options:0 metrics:nil views:views]];
    [view addConstraint:[NSLayoutConstraint
        constraintWithItem:tableView attribute:NSLayoutAttributeWidth
        relatedBy:NSLayoutRelationEqual
        toItem:view attribute:NSLayoutAttributeWidth
        multiplier:1 constant:-16]];
    [view addConstraints:[NSLayoutConstraint
        constraintsWithVisualFormat:@"H:|[bottomLabel]|"
        options:0 metrics:nil views:views]];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"Row %d", indexPath.row];
    return cell;
}

@end

这篇关于UITableView的UIScrollView的范围内使用自动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！