今天,有位网友求助如何实现Vowch的头像移动的动画效果。因为,手上暂时没有设备,只能简单的模拟实现一下。等以后有了设备后再进行完善。
自定义HeaderView
通过继承 UITableViewHeaderFooterView 自定义一个HeaderView。在 HeaderView.h中把下面这个属性添加进去
@property (nonatomic) UIImageView *imageView;
然后在HeaderView.m中实现下面这个方法。
- (void)setImageView:(UIImageView *)imageView {
for (UIView *view in self.contentView.subviews) {
[view removeFromSuperview];
}
_imageView = imageView;
[self.contentView addSubview:imageView];
}
显示HeaderView
先声明一个静态字符串实例。
static NSString *headerFooterViewReuseIdentifier = @"HeaderFooterViewReuseIdentifier";
在tableview初始化后,添加下面的代码。
[self.tableView registerClass:[HeaderView class]
forHeaderFooterViewReuseIdentifier:headerFooterViewReuseIdentifier];
在.m文件中实现下面的方法。
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
//初始化imageView.
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(10, 5, 30, 30)];
imageView.image = [UIImage imageNamed:@"头像"];
imageView.backgroundColor = [UIColor redColor];
//重用headerView
HeaderView *headerView = [self.tableView dequeueReusableHeaderFooterViewWithIdentifier:headerFooterViewReuseIdentifier];
//把imageView赋值给HeaderView的属性。
headerView.imageView = imageView;
return headerView;
}
实现动画效果
为了判断滚动方向,在
类扩展中添加下面这个属性
@property CGPoint lastPoint;
// 为了每次滚动后,都可以更改头像的位置,我们需要继承并实现UIScrollViewDelegate中的一个方法。每当UIScrollView的offset改变时,这个方法都会被调用。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// UITableView从UIScrollView继承了一个属性contentOffset,通过它,我们可以知道UITableView显示的左上角的偏移量。
CGPoint point = scrollView.contentOffset;
//根据contentOffset获得顶部indexPath。
NSIndexPath *path = [self.tableView indexPathForRowAtPoint:point];
//通过UITableView在ios6新增的方法,我们就可以通过indexPath.section获得顶部的headerView。
HeaderView *headerView = (HeaderView *)[self.tableView headerViewForSection:path.section];
UIImageView *imageView = headerView.imageView;
//根据滚动方向的不同,头像的移动方向也不同。所以,我们要添加一个属性,来帮助我们判断滚动方向。
if ((point.y > self.lastPoint.y) && (imageView.frame.origin.x == 10)) {
[UIView animateWithDuration:toRightDuration animations: ^{
imageView.frame = CGRectMake(290, 5, 30, 30);
}];
}
else if ((point.y < self.lastPoint.y) && (imageView.frame.origin.x == 290)) {
[UIView animateWithDuration:toLeftDuration animations: ^{
imageView.frame = CGRectMake(10, 5, 30, 30);
}];
}
//把当前的point赋给self.lastPoint
self.lastPoint = point;
}
注意:虽然苹果没有明确说明,但这个方法只有在使用下面的方法注册后才可以正常返回View.
- (void)registerNib:(UINib *)nib forHeaderFooterViewReuseIdentifier:(NSString *)identifier NS_AVAILABLE_IOS(6_0);
- (void)registerClass:(Class)aClass forHeaderFooterViewReuseIdentifier:(NSString *)identifier NS_AVAILABLE_IOS(6_0);
注意:根据苹果的文档,当table的样式是plain时,section会一直返回空。但是,根据我的测试结果,在样式为UITableViewStylePlain时,可以正常获得section。
section
An index number that identifies a section of the table. Table views in a plain style have a section index of zero.