仿半糖首页效果

最近公司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;

}


其实写到这里了 主要功能就完成了 。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容