上一篇文章 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就可以实现,只是提供一个别的思路。