首先是几个不同滑动时候的效果：
刚进入页面时候的效果
Simulator Screen Shot 2016年3月12日 下午2.05.06.png
向下拉
Simulator Screen Shot 2016年3月12日 下午2.05.10.png
向上滑（毛玻璃效果是逐渐变的）
Simulator Screen Shot 2016年3月12日 下午2.05.22.png
滑倒固定位置，在向上滑没有变化
Simulator Screen Shot 2016年3月12日 下午2.05.24.png
下面是代码部分
创建控件
#pragma mark ** 创建头部的控件
- (void)createSubViews {
// 含有头部需要的数据.
ModelForSpecificContentsHearder *model = [[ModelForSpecificContentsHearder alloc] init];
model = [self.arrayForHeader firstObject];
// 背景的大图片.
self.imageViewForHeader = [[UIImageView alloc] initWithFrame:CGRectMake(0, - 48, WIDTH, HEIGHT * 2 / 7 + 48 * 2)];
[self.imageViewForHeader sd_setImageWithURL:[NSURL URLWithString:model.front_cover_photo_url] placeholderImage:[UIImage imageNamed:@"temp"]];
[self.view addSubview:self.imageViewForHeader];
[_imageViewForHeader release];
// 用户头像的图片.
self.imageViewForUser = [[UIImageView alloc] initWithFrame:CGRectMake(10, self.imageViewForHeader.frame.size.height - 48 - 55, 45, 45)];
[self.imageViewForUser sd_setImageWithURL:[NSURL URLWithString:[model.user objectForKey:@"image"]] placeholderImage:[UIImage imageNamed:@"temp"]];
self.imageViewForUser.layer.cornerRadius = self.imageViewForUser.frame.size.height / 2;
self.imageViewForUser.layer.masksToBounds = YES;
self.imageViewForUser.backgroundColor = [UIColor redColor];
[self.imageViewForHeader addSubview:self.imageViewForUser];
[_imageViewForUser release]；
// 标题的文字.
self.labelForTitle = [[UILabel alloc] initWithFrame:CGRectMake(self.imageViewForUser.frame.origin.x + self.imageViewForUser.frame.size.width + 10, self.imageViewForUser.frame.origin.y, WIDTH - self.imageViewForUser.frame.origin.x - self.imageViewForUser.frame.size.width - 10, 25)];
self.labelForTitle.text = model.name;
self.labelForTitle.textColor = [UIColor whiteColor];
self.labelForTitle.font = [UIFont systemFontOfSize:15];
[self.imageViewForHeader addSubview:self.labelForTitle];
[_labelForTitle release];
// 日期
self.labelForStartDate = [[UILabel alloc] initWithFrame:CGRectMake(self.labelForTitle.frame.origin.x, self.labelForTitle.frame.origin.y + self.labelForTitle.frame.size.height + 5, self.labelForTitle.frame.size.width, 20)];
self.labelForStartDate.text = model.start_date;
self.labelForStartDate.textColor = [UIColor whiteColor];
self.labelForStartDate.font = [UIFont systemFontOfSize:13];
[self.imageViewForHeader addSubview:self.labelForStartDate];
[_labelForStartDate release];
// 毛玻璃（首先是声明了一个UIVisualEffectView 的对象（属性））
self.visualEffectView = [[UIVisualEffectView alloc] initWithFrame:self.imageViewForHeader.frame];
// 设置毛玻璃的效果.
UIBlurEffect *blur = [UIBlurEffect effectWithStyle:1];
self.visualEffectView.effect = blur;
// 透明度设置为0, 后面会让它的透明度跟着tableView 的偏移量来改变, 用来实现渐变模糊的效果.
self.visualEffectView.alpha = 0;
[self.view addSubview:self.visualEffectView];
[_visualEffectView release];
}
#pragma mark ** 创建TableView
- (void)createTableView {
self.tableViewForSpecific = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, WIDTH, HEIGHT - 64) style:UITableViewStylePlain];
self.tableViewForSpecific.showsVerticalScrollIndicator = NO;
self.tableViewForSpecific.backgroundColor = [UIColor clearColor];
UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT * 2 / 7 - 64)];
self.tableViewForSpecific.tableHeaderView = header;
self.tableViewForSpecific.dataSource = self;
self.tableViewForSpecific.delegate = self;
self.stringForTableView = @"poolForTableView";
self.stringForHeader = @"poolForHeader";
self.stringForPhoto = @"poolForPhoto";
[self.tableViewForSpecific registerClass:[TableViewCellForSpecificContents class] forCellReuseIdentifier:self.stringForTableView];
[self.tableViewForSpecific registerClass:[ViewForSpecificContentsHeader class] forHeaderFooterViewReuseIdentifier:self.stringForHeader];
[self.tableViewForSpecific registerClass:[TableViewCellForPhoto class] forCellReuseIdentifier:self.stringForPhoto];
[self.view addSubview:self.tableViewForSpecific];
[_tableViewForSpecific release];
}
滑动tableView 时改变frame 来实现想要的效果，代码：
#pragma mark ** 滑动tableView 的时候执行下面代码
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint point = scrollView.contentOffset;
if (0 >= point.y && - 48 * 2 <= point.y) {
self.imageViewForHeader.frame = CGRectMake(0, - 48 - point.y / 2, WIDTH, HEIGHT * 2 / 7 + 48 * 2);
self.imageViewForUser.frame = CGRectMake(10, self.imageViewForHeader.frame.size.height - 55 - 48 - point.y / 2, 45, 45);
self.viewForBackground.frame = self.imageViewForHeader.frame;
self.labelForTitle.frame = CGRectMake(self.imageViewForUser.frame.origin.x + self.imageViewForUser.frame.size.width + 10, self.imageViewForUser.frame.origin.y, WIDTH - self.imageViewForUser.frame.origin.x - self.imageViewForUser.frame.size.width - 10, 25);
self.labelForStartDate.frame = CGRectMake(self.labelForTitle.frame.origin.x, self.labelForTitle.frame.origin.y + self.labelForTitle.frame.size.height + 5, self.labelForTitle.frame.size.width, 20);
self.visualEffectView.alpha = 0;
} else if (0 < point.y && point.y < HEIGHT * 2 / 7 - 64) {
self.imageViewForHeader.frame = CGRectMake(0, - 48 - point.y, WIDTH, HEIGHT * 2 / 7 + 48 * 2);
self.imageViewForUser.frame = CGRectMake(10, self.imageViewForHeader.frame.size.height - 55 - 48, 45, 45);
self.viewForBackground.frame = self.imageViewForHeader.frame;
self.labelForTitle.frame = CGRectMake(self.imageViewForUser.frame.origin.x + self.imageViewForUser.frame.size.width + 10, self.imageViewForUser.frame.origin.y, WIDTH - self.imageViewForUser.frame.origin.x - self.imageViewForUser.frame.size.width - 10, 25);
self.labelForStartDate.frame = CGRectMake(self.labelForTitle.frame.origin.x, self.labelForTitle.frame.origin.y + self.labelForTitle.frame.size.height + 5, self.labelForTitle.frame.size.width, 20);
self.visualEffectView.alpha = point.y / (HEIGHT * 2 / 7 - 64) - 0.2;
} else if (- 48 * 2 >= point.y) {
scrollView.contentOffset = CGPointMake(0, - 48 * 2);
} else if (point.y >= HEIGHT * 2 / 7 - 64) {
self.imageViewForHeader.frame = CGRectMake(0, - 48 - (HEIGHT * 2 / 7 - 64), WIDTH, HEIGHT * 2 / 7 + 48 * 2);
self.imageViewForUser.frame = CGRectMake(10, self.imageViewForHeader.frame.size.height - 55 - 48, 45, 45);
self.viewForBackground.frame = self.imageViewForHeader.frame;
self.labelForTitle.frame = CGRectMake(self.imageViewForUser.frame.origin.x + self.imageViewForUser.frame.size.width + 10, self.imageViewForUser.frame.origin.y, WIDTH - self.imageViewForUser.frame.origin.x - self.imageViewForUser.frame.size.width - 10, 25);
self.labelForStartDate.frame = CGRectMake(self.labelForTitle.frame.origin.x, self.labelForTitle.frame.origin.y + self.labelForTitle.frame.size.height + 5, self.labelForTitle.frame.size.width, 20);
self.visualEffectView.alpha = 0.8;
}
}
这样我们就能实现上图的效果了。
