最近公司APP更新版本,顺带更新了整个首页的效果,花了几天时间整理,也看了网上很多“仿半糖首页效果”的demo,但是发现有一个共同的问题是:用户只能作用于tableview或者scrollview上才能滑动,如果页面上布局的控件很多,导致下面能够滑动并且展示数据的tableview显示在屏幕底部,这样对于用户的体验性就很差,用户只能手指移动底部的tableview或者scrollview来使上面拍版的控件向上移动。下面说说我的做法:
下面是我构建的一个布局
整个其实是个uitableview,其中把滚动标签作为存放滚动列表section的头部视图,除此之外另外的控件可以放倒tableview的别的section中,主要的是存放滚动切换列表section,必须是容器表格最后一个section。其实主要是cell里面嵌套scrollview,scrollview嵌套多个表格,这样问题就来了,同向滑动的时候,我们怎么知道滑动的是哪个scrollview。
那我们一步一步代码解释:
首先主视图构建一个tableview容器,不多说大家都会:
其中又一点,这个主容器tableview必须要支持多手势,
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
return YES;
}
构建底部的滑动表格
#import@interface tableviewViewController : UIViewController
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, assign) BOOL vcCanScroll;
@end
@implementation tableviewViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
_tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds)) style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self;
// _tableView.bounces = NO;
[self.view addSubview:_tableView];
}
#pragma mark UITableView
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 20;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 80;
}
- (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:@"%ld",indexPath.row];
return cell;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (!self.vcCanScroll) {
scrollView.contentOffset = CGPointZero;
}
if (scrollView.contentOffset.y <= 0) {
self.vcCanScroll = NO;
scrollView.contentOffset = CGPointZero;
[[NSNotificationCenter defaultCenter] postNotificationName:@"leaveTop" object:nil];//到顶通知父视图改变状态
}
self.tableView.showsVerticalScrollIndicator = _vcCanScroll?YES:NO;
}
其实主要一点是监听scrollview滑动的位置。
在主视图监听子tableview发送给俯视图改变状态的通知
[KNotificationCenter addObserver:self selector:@selector(getOffset) name:@"leaveTop" object:nil];
- (void)getOffset
{
self.canScroll = YES;
tableviewViewController *vc = (tableviewViewController *)[tableViewArray objectAtIndex:self.selectIndex];
vc.vcCanScroll = NO;
}
这里也是需要监听主scrollview的滑动位置
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat bottomCellOffset = [mytableview rectForSection:1].origin.y;
if (scrollView.contentOffset.y >= bottomCellOffset) {
scrollView.contentOffset = CGPointMake(0, bottomCellOffset);
tableviewViewController *vc = (tableviewViewController *)[tableViewArray objectAtIndex:self.selectIndex];
if (self.canScroll) {
self.canScroll = NO;
vc.vcCanScroll = YES;
}
}else{
if (!self.canScroll) {//子视图没到顶部
scrollView.contentOffset = CGPointMake(0, bottomCellOffset);
}
mytableview.showsVerticalScrollIndicator = self.canScroll;
}
其实写到这里了 主要功能就完成了 。