iOS的ScrollView包含TableView使用AutoLayout实现滚动

上一篇文章 iOS中Xcode使用UIScrollView+AutoLayout轻松实现滚动布局，虽然可以实现普通控件的滚动，但是当ScrollView中包含有TableView的时候，就不起作用了。

Android实现

Android中如果要在ScrollView中包含ListView，我们需要自定义ListView，并重写onMeasure()方法，如下：

/**
  * 重写该方法，达到使ListView适应ScrollView的效果
 */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
            MeasureSpec.AT_MOST);
    super.onMeasure(widthMeasureSpec, expandSpec);
}

然后在xml布局文件直接用此类即可。

iOS实现

习惯了Android开发，进入iOS开发，想当然的直接在ScrollView中添加TableView，发现并没有达到预期效果，其实是缺少几步关键步奏。

1、添加ScrollView、ContentView和约束

此步奏可参考此文开头提及的上一篇文章。
ScrollView: 上下左右 0 0 0 0
ContentView: 上下左右 0 0 0 0
ContentView_width: Equal Widths with view
ContentView_height: Equal hegith with view (view 是ScrollView的上一级视图)

2、往ContentView中加入一个View1，添加背景色，设置约束，如下图：

3、拖入TableView

重点来了，我们拖入TableView，并设置约束：

注意，一定要确保View1 和Table View 在ContentView里面。

这时候约束会出现红色错误，提示Table View缺少Y坐标或者高度，我们不用管，再拖一个View2放入TableView下面，如图：

我们需要设置View2的上下左右 和高度约束，设置好后红色错误没了。

4、添加TableView的Delegate 和 DataSource

TableView拖线入 ViewController.m中，生成代码：

@property (weak, nonatomic) IBOutlet UITableView *tableView;

在viewDidLoad方法中，添加TableView的数据源和代理：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
}

这时候，需要我们实现UITableViewDataSource和UITableViewDelegate，完整代码如下：

#pragma -mark TableView

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *ID = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    cell.textLabel.text = @"AAAAA";
    return cell;
}

这时候，我们可以运行一下，发现Table View并不能跟随ScrollView一起滚动，而是在自己范围内可以滚动，不是我们想要的效果，如下图：

5、设置TableView的Scrolling Enable为false

直接在Interface Builder，选中TableView，设置如下图：

6、动态设置ContentView的约束

最关键的一步，我们需要把约束拖线，找到ContentView.height那一项约束，并拖线到ViewController.m中：

拖线后的代码：

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *scrollViewHeight;

在ViewController.m中，重写 viewDidLayoutSubviews方法：代码如下：

- (void)viewDidLayoutSubviews {
    [self.tableView layoutIfNeeded];
    self.scrollViewHeight.constant = self.tableView.contentSize.height;
}

再次运行，可以看到TableView的内容展开了，可以跟随ScrollView一起滚动。

现在有个问题，TableView会空几行，不知道大家有解决办法没。

其实用一个TableView就可以实现，只是提供一个别的思路。