最近发现有很多App的tableView或者scrollView在滑动过程中,当某视图滑动到顶部时,会悬停在顶部,所以想了一下实现方法scrollView和tableView各想到连个实现方式。(如果效果图不动,可以右键图片在新窗口中打开)
一、ScrollView实现顶部悬停
1.设置约束
添加约束用的是Masonry。
masonry里有一个属性priority,这个属性用来设置约束的等级或者可以说是优先级,autolayout里面也有这个属性。
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor= [UIColor whiteColor];
self.navigationController.navigationBar.translucent = NO;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:(CGRectMake(0, 0, DZHWidth, DZHHeight))];
[self.view addSubview:scrollView];
scrollView.contentSize = CGSizeMake(0, 2*DZHHeight);
UIView *view1 = [[UIView alloc] initWithFrame:(CGRectMake(0, 0, DZHWidth, 100))];
view1.backgroundColor = [UIColor grayColor];
[scrollView addSubview:view1];
UIView *view2 = [[UIView alloc] initWithFrame:(CGRectMake(0, 102, DZHWidth, 100))];
view2.backgroundColor = [UIColor grayColor];
[scrollView addSubview:view2];
UIView *view3 = [[UIView alloc] initWithFrame:(CGRectMake(0, 204, DZHWidth, 100))];
view3.backgroundColor = [UIColor grayColor];
[scrollView addSubview:view3];
UIView *view4 = [[UIView alloc] initWithFrame:(CGRectMake(0, 306, DZHWidth, 100))];
view4.backgroundColor = [UIColor grayColor];
[scrollView addSubview:view4];
UIView *view5 = [[UIView alloc] initWithFrame:(CGRectMake(0, 408, DZHWidth, 100))];
view5.backgroundColor = [UIColor purpleColor];
[scrollView addSubview:view5];
[view5 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.greaterThanOrEqualTo(self.view.mas_top).priority(1000);
make.top.equalTo(view4.mas_bottom).offset(2).priority(500);
make.size.mas_equalTo(CGSizeMake(DZHWidth, 100));
make.left.equalTo(self.view);
}];
UIView *view6 = [[UIView alloc] initWithFrame:(CGRectMake(0, 510, DZHWidth, 100))];
view6.backgroundColor = [UIColor grayColor];
[scrollView addSubview:view6];
UIView *view7 = [[UIView alloc] initWithFrame:(CGRectMake(0, 612, DZHWidth, 100))];
view7.backgroundColor = [UIColor grayColor];
[scrollView addSubview:view7];
UIView *view8 = [[UIView alloc] initWithFrame:(CGRectMake(0, 714, DZHWidth, 100))];
view8.backgroundColor = [UIColor grayColor];
[scrollView addSubview:view8];
[scrollView bringSubviewToFront:view5];
}
这里view5 这个view设置为悬停
[view5 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.greaterThanOrEqualTo(self.view.mas_top).priority(1000);
make.top.equalTo(view4.mas_bottom).offset(2).priority(500);
make.size.mas_equalTo(CGSizeMake(DZHWidth, 100));
make.left.equalTo(self.view);
}];
主要是为view5添加两个距上的约束,一个是top距离view4优先级低,另一个是设置view5添加一个距离self.view的约束,让view5距离self.view的距离不小于零,这样就达到了想要的效果。
2.第二种方法是在scrollView的代理中监听
UIView *view5 = [[UIView alloc] initWithFrame:(CGRectMake(0, 408, DZHWidth, 100))];
self.view5 = view5;
view5.backgroundColor = [UIColor redColor];
[scrollView addSubview:view5];
self.view5SubView = [[UIView alloc] initWithFrame:(CGRectMake(0, 0, DZHWidth, 100))];
self.view5SubView.backgroundColor = [UIColor purpleColor];
[self.view5 addSubview:self.view5SubView];
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGPoint point = [self.view5.superview convertPoint:self.view5.frame.origin toView:self.view];
NSLog(@"----|%lf",point.y);
if (point.y<0) {
self.view5SubView.frame = CGRectMake(0, 0, DZHWidth, 100);
[self.view addSubview:self.view5SubView];
}
else{
self.view5SubView.frame = CGRectMake(0, 0, DZHWidth, 100);
[self.view5 addSubview:self.view5SubView];
}
}
实现思路主要是在代理里中监听view5的frame.origin相对self.view中的坐标。
这里如果想实现悬停悬停的不能是view5,因为view5的位置要用来判断,所以需要将想要悬停的视图需要加在view5上,view5SubView才是真正悬停的视图,如果当前view5在self.view中的位置<0则把view5SubView贴到self.view上,大于0时再贴回view5上。也可以实现悬停效果。
二、tableview实现悬停效果.
1.tableview本身sectionHead就有悬停效果,UITableView的Style为Plain时sectionHead本身就有有一个悬停效果,通过这样的方法搞来搞去总能实现。
2.第二种方法就是通过scrollView悬停的第二种方法,通过监听headview在self .view的相对位置来决定head view的子视图是贴在self.view上还是head view上.
另外:本来想着在tableview上也用约束去实现悬停,但是测试尝试把make.top.greaterThanOrEqualTo(self.view.mas_top).priority(1000);
设置为self.view和tableview都会崩溃,说没有共同的父视图,所以没办法用约束去实现,不然用约束是最合适的,暂时还没想到给其他的参考,如果有想到的不吝赐教。