iOS编程，tableView 下滑上面图片跟着变大，毛玻璃

首先是几个不同滑动时候的效果：

刚进入页面时候的效果

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;
        
    }
    
}

这样我们就能实现上图的效果了。

iOS编程，tableView 下滑上面图片跟着变大，毛玻璃

推荐阅读更多精彩内容