仿京东、淘宝商品详情中上滑tableView的cell与headerView之间的动画效果
2017-05-12 11:19
716 查看
在做项目时涉及到仿照京东商品详情详情做,在网上找了好多demo,其他都实现了,只有一个动画效果没有实现,就是在滑动tableView时他的headerView与cell之间的过渡效果没有实现出来,找了好多方法,有的是用三方实现的,我觉得一个动画效果用个三方有点浪费了,就自己通过计算写了一个方法,其实也挺简单,就是计算出cell和header之间的滑动范围,再加上一个过渡动画就OK了,废话少说,上代码:
首先定义轮播图的父视图和headerView的父视图 并定义tableView
@property (nonatomic,
strong) UIScrollView *scrollView;
@property (nonatomic,
strong) UITableView *tableView;
@property (nonatomic,
strong) UIView *headerView;
然后
- (void)viewDidLoad {
[super
viewDidLoad];
self.tableView.delegate =
self;
self.tableView.dataSource =
self;
[self
createHeader];//创建headerView和轮播图
self.tableView.tableHeaderView =
self.headerView;
}
最后滑动过渡效果的能够实现的关键代码
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offset = scrollView.contentOffset.y;
if (scrollView ==
self.tableView) {
// 重新赋值,就不会有用力拖拽时的回弹
self.headerScrollView.contentOffset =
CGPointMake(self.headerScrollView.contentOffset.x,
0);
if (offset <=
ScreenWidth && self.tableView.contentOffset.y
> 0) {
self.headerScrollView.contentOffset =
CGPointMake(self.headerScrollView.contentOffset.x,
-offset / 2.0f);
self.navigationController.navigationBar.alpha
= offset / ScreenWidth;//导航栏渐变效果 可以不加
}
//下面的两个else if都是解决用力拖拽时的问题
else
if (self.tableView.contentOffset.y
<= 0)
{
self.navigationController.navigationBar.alpha
= 0;//导航栏 效果 可以不加
}else
{
self.navigationController.navigationBar.alpha
= 1;//导航栏 效果 可以不加
}
}else
if (scrollView == self.scrollView) {
self.pageControl.currentPage = scrollView.contentOffset.x/ScreenWidth;//小点点
}
}
把代码直接复制粘贴就可以了。。。
如果有用就顶一下吧。。。。。
首先定义轮播图的父视图和headerView的父视图 并定义tableView
@property (nonatomic,
strong) UIScrollView *scrollView;
@property (nonatomic,
strong) UITableView *tableView;
@property (nonatomic,
strong) UIView *headerView;
然后
- (void)viewDidLoad {
[super
viewDidLoad];
self.tableView.delegate =
self;
self.tableView.dataSource =
self;
[self
createHeader];//创建headerView和轮播图
self.tableView.tableHeaderView =
self.headerView;
}
最后滑动过渡效果的能够实现的关键代码
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offset = scrollView.contentOffset.y;
if (scrollView ==
self.tableView) {
// 重新赋值,就不会有用力拖拽时的回弹
self.headerScrollView.contentOffset =
CGPointMake(self.headerScrollView.contentOffset.x,
0);
if (offset <=
ScreenWidth && self.tableView.contentOffset.y
> 0) {
self.headerScrollView.contentOffset =
CGPointMake(self.headerScrollView.contentOffset.x,
-offset / 2.0f);
self.navigationController.navigationBar.alpha
= offset / ScreenWidth;//导航栏渐变效果 可以不加
}
//下面的两个else if都是解决用力拖拽时的问题
else
if (self.tableView.contentOffset.y
<= 0)
{
self.navigationController.navigationBar.alpha
= 0;//导航栏 效果 可以不加
}else
{
self.navigationController.navigationBar.alpha
= 1;//导航栏 效果 可以不加
}
}else
if (scrollView == self.scrollView) {
self.pageControl.currentPage = scrollView.contentOffset.x/ScreenWidth;//小点点
}
}
把代码直接复制粘贴就可以了。。。
如果有用就顶一下吧。。。。。
相关文章推荐
- tableview中用动画效果改变cell的高度
- 给tableview Cell添加动画(两种实现方法 效果还不错)
- 天猫、淘宝、京东商品详情的图片手动滑动ViewPager
- tableview中用动画效果改变cell的高度
- 仿淘宝、京东拖拽上拉下拉商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhost)
- 仿淘宝、京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhost)
- iOS开发 仿淘宝,京东商品详情3D动画
- [iOS]在tableview中用动画效果改变cell的高度
- 在tableview中用动画效果改变cell的高度
- Android 仿淘宝京东商品详情页阻力翻页效果
- [iOS]在tableview中用动画效果改变cell的高度
- 仿淘宝商品详情页面下拉黏滞效果
- ios tableview 那些事(二十三) 解决headerView不随cell一起滚动的问题
- ios 类似淘宝商品详情页面的效果
- 让UITableView 的 headerView跟随 cell一起滚动,tableHeaderView
- iOS开发导航控制器下不同视图控制器之间切换:利用CATrasition和view的layer层来实现自定义的动画效果
- tableview中的cell取消点击效果
- iOS 类似淘宝商品详情查看翻页效果的实现
- 【iOS开发-24】导航控制器下不同视图控制器之间切换:利用CATrasition和view的layer层来实现自定义的动画效果
- tableview中需要header随着cell一起滚动