首先是幾個(gè)不同滑動(dòng)時(shí)候的效果:
剛進(jìn)入頁面時(shí)候的效果
向下拉
向上滑(毛玻璃效果是逐漸變的)
滑倒固定位置粒蜈,在向上滑沒有變化
下面是代碼部分
創(chuàng)建控件
#pragma mark ** 創(chuàng)建頭部的控件
- (void)createSubViews {
// 含有頭部需要的數(shù)據(jù).
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];
// 標(biāo)題的文字.
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];
// 毛玻璃(首先是聲明了一個(gè)UIVisualEffectView 的對象(屬性))
self.visualEffectView = [[UIVisualEffectView alloc] initWithFrame:self.imageViewForHeader.frame];
// 設(shè)置毛玻璃的效果.
UIBlurEffect *blur = [UIBlurEffect effectWithStyle:1];
self.visualEffectView.effect = blur;
// 透明度設(shè)置為0, 后面會(huì)讓它的透明度跟著tableView 的偏移量來改變, 用來實(shí)現(xiàn)漸變模糊的效果.
self.visualEffectView.alpha = 0;
[self.view addSubview:self.visualEffectView];
[_visualEffectView release];
}
#pragma mark ** 創(chuàng)建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];
}
滑動(dòng)tableView 時(shí)改變frame 來實(shí)現(xiàn)想要的效果旗国,代碼:
#pragma mark ** 滑動(dòng)tableView 的時(shí)候執(zhí)行下面代碼
- (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;
}
}
這樣我們就能實(shí)現(xiàn)上圖的效果了枯怖。