iOS --高仿QQ空间页面

1、首先分析一下qq空间页面的主要2个功能：

1）随着TableView的向上滑动导航栏的颜色渐变，变化过程是从透明变成白色。

2）随着TableView的向下滑动，图片随着offset放大。

2、首先说一下第一小点我的实现思路：

1）隐藏导航栏，在相应的位置添加一个View。

2）获取到tableView的offset.y的值，让View的透明度随着此值变化，同时在相应的条件改变Btn和label的文字颜色。

3）在self.View上添加button和label。

代码如下：

- (void)setupNavigationBarView
{
    //1.addNavView
    self.naviView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 64)];
     [self.view addSubview:self.naviView];
    //2.addBackBtn
    [self setupBackBtn];
    
    //3.addTitleLabel
    [self setupTitleLabel];
}
- (void)setupBackBtn
{
    self.backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.backBtn setTitle:@"返回" forState:UIControlStateNormal];
    [self.backBtn addTarget:self action:@selector(btnclick) forControlEvents:UIControlEventTouchUpInside];
    [self.backBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.naviView.backgroundColor = [UIColor whiteColor];
    self.backBtn.frame = CGRectMake(-10, 20, 100, 30);
    [self.view addSubview:self.backBtn];
}
- (void)setupTitleLabel
{
    self.titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(120, 20, 100, 30)];
    self.titleLabel.textColor = [UIColor whiteColor];
    self.titleLabel.text = @"好友动态";
    [self.view addSubview:self.titleLabel];
}
- (void)btnclick
{
    
    [self.navigationController popToRootViewControllerAnimated:YES];
}
- (void)setupTableView
{
    //1.设置tableView属性
    self.fzhTableView = [[UITableView alloc]init];
    self.fzhTableView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    self.fzhTableView.delegate = self;
    self.fzhTableView.contentInset = UIEdgeInsetsMake(NAVFloat, 0,0, 0);
    self.fzhTableView.backgroundColor = [UIColor grayColor];
    self.fzhTableView.dataSource = self;
    
    //2.添加ImageView
    self.headerImageView = [[UIImageView alloc]initWithFrame: CGRectMake(0,-(NAVFloat + 64), SCREEN_WIDTH, (NAVFloat + 64))];
    self.headerImageView.image = [UIImage imageNamed:@"89f14ee20eba7ee93012f91ee53d90f8"];
    
    [self.fzhTableView addSubview: self.headerImageView];
    [self.view addSubview:self.fzhTableView];
    
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //1.偏移比例
    self.offsetScale = scrollView.contentOffset.y/NAVFloat;
    if (self.offsetScale < 0) {
            if(self.offsetScale >= -0.320){
            
            self.naviView.alpha = 1.0;
                //改变Btn和label的属性
            [self.backBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
            self.titleLabel.textColor = [UIColor blackColor];
            
            
            return;
        }else{
             //改变Btn和label的属性
            [self.backBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
            self.titleLabel.textColor = [UIColor whiteColor];
            self.naviView.alpha = 1 + self.offsetScale;
            CGRect frame = self.headerImageView.frame;
            frame.size.height  =frame.size.height - self.offsetScale;
            self.headerImageView.frame = frame;
            
        }
    }else{
        self.naviView.alpha = 1;
    }
  
}

#pragma mark -- UITableViewDataSource,UITableViewDelegate
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * cellID = @"cellID";
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
    cell.textLabel.text = @"test";
    return cell;
}

3、第二小点的实现思路

同样获得tableView的offset在 - (void)scrollViewDidScroll:(UIScrollView *)scrollView方法里面设置本身的frame

代码如下：

 //2.图片缩放
    CGFloat yOffset  = scrollView.contentOffset.y;
    CGFloat xOffset = (yOffset + NAVFloat)/2;
    if (yOffset < -NAVFloat) {
        
        CGRect rect = self.headerImageView.frame;
        rect.origin.y = yOffset;
        rect.size.height =  -yOffset ;
        rect.origin.x = xOffset;
        rect.size.width = [UIScreen mainScreen].bounds.size.width + fabs(xOffset) *2;
        
        self.headerImageView.frame = rect;
    }

到这里就实现了上面的两个功能，不足之处请大家多多指教！

demo下载地址：https://github.com/fengzhihao123/FZHQQZone