在很多的APP中,我们可以看到一个列表顶部的图片会随着下拉会放大,上拉会被推至顶端消失的效果。这样的效果没能给定一个固有名词,我们要实现这样的效果可以使用第三方类库,也可以自己写代码实现。第三方使用的类库不算是个人经验,这里就不介绍了。现在介绍使用代码实现这样的效果,代码量很少,容易理解。当然实现效果是很好的。
步骤1.创建TableView
首先定义两个宏定义, ImageHeight为顶部图片的高度,NavigationBarHeight为导航控制器的高度
#define ImageHeight 233.0f
#define NavigationBarHeight 64.0f
然后创建TableView
self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
_tableView.contentInset = UIEdgeInsetsMake(ImageHeight, 0, 0, 0);
_tableView.dataSource = self;
_tableView.delegate = self;
[self.view addSubview:_tableView];
步骤2.创建顶部图片
self.titleImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, -ImageHeight, kWidth, ImageHeight)];
_titleImage.image = [UIImage imageNamed:@"test"];
_titleImage.userInteractionEnabled = YES;
_titleImage.contentMode = UIViewContentModeScaleAspectFill;
[_tableView addSubview:_titleImage];
步骤3.拖动TableView时,图片放大方法
tableView.contentOffSet在下滑的时候为负数,未拖动tableView时,contentOffset为-297(导航控制器的高度44 + 状态栏20 +图片高度233)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// NSLog(@"%f", _tableView.contentOffset.y);
CGFloat y = _tableView.contentOffset.y + NavigationBarHeight;
if (y < -ImageHeight) {
CGRect frame = _titleImage.frame;
frame.origin.y = y;
frame.size.height = -y;
_titleImage.frame = frame;
}
return;
}
步骤4.放大的图片上添加一个按钮
按钮在图片拉升时,距离图片底部的距离不变
UIButton *loginbutton1 = [UIButton buttonWithType:UIButtonTypeCustom];
loginbutton1.frame = CGRectMake(kWidth / 2 - 50, ImageHeight / 4, 100, 100);
loginbutton1.layer.cornerRadius = loginbutton1.frame.size.height / 2;
loginbutton1.backgroundColor = [UIColor whiteColor];
// 重点。。。。。。。。。。。。。。。。
loginbutton1.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[loginbutton1 addTarget:self action:@selector(login:) forControlEvents:UIControlEventTouchUpInside];
[_titleImage addSubview:loginbutton1];