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。

代码如下：

  1 - (void)setupNavigationBarView
  2 {
  3     //1.addNavView
  4     self.naviView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 64)];
  5      [self.view addSubview:self.naviView];
  6     //2.addBackBtn
  7     [self setupBackBtn];
  8     
  9     //3.addTitleLabel
 10     [self setupTitleLabel];
 11 }
 12 - (void)setupBackBtn
 13 {
 14     self.backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
 15     [self.backBtn setTitle:@"返回" forState:UIControlStateNormal];
 16     [self.backBtn addTarget:self action:@selector(btnclick) forControlEvents:UIControlEventTouchUpInside];
 17     [self.backBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
 18     self.naviView.backgroundColor = [UIColor whiteColor];
 19     self.backBtn.frame = CGRectMake(-10, 20, 100, 30);
 20     [self.view addSubview:self.backBtn];
 21 }
 22 - (void)setupTitleLabel
 23 {
 24     self.titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(120, 20, 100, 30)];
 25     self.titleLabel.textColor = [UIColor whiteColor];
 26     self.titleLabel.text = @"好友动态";
 27     [self.view addSubview:self.titleLabel];
 28 }
 29 - (void)btnclick
 30 {
 31     
 32     [self.navigationController popToRootViewControllerAnimated:YES];
 33 }
 34 - (void)setupTableView
 35 {
 36     //1.设置tableView属性
 37     self.fzhTableView = [[UITableView alloc]init];
 38     self.fzhTableView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 39     self.fzhTableView.delegate = self;
 40     self.fzhTableView.contentInset = UIEdgeInsetsMake(NAVFloat, 0,0, 0);
 41     self.fzhTableView.backgroundColor = [UIColor grayColor];
 42     self.fzhTableView.dataSource = self;
 43     
 44     //2.添加ImageView
 45     self.headerImageView = [[UIImageView alloc]initWithFrame: CGRectMake(0,-(NAVFloat + 64), SCREEN_WIDTH, (NAVFloat + 64))];
 46     self.headerImageView.image = [UIImage imageNamed:@"89f14ee20eba7ee93012f91ee53d90f8"];
 47     
 48     [self.fzhTableView addSubview: self.headerImageView];
 49     [self.view addSubview:self.fzhTableView];
 50     
 51 }
 52 
 53 #pragma mark - UIScrollViewDelegate
 54 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
 55 {
 56     //1.偏移比例
 57     self.offsetScale = scrollView.contentOffset.y/NAVFloat;
 58     if (self.offsetScale < 0) {
 59             if(self.offsetScale >= -0.320){
 60             
 61             self.naviView.alpha = 1.0;
 62                 //改变Btn和label的属性
 63             [self.backBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
 64             self.titleLabel.textColor = [UIColor blackColor];
 65             
 66             
 67             return;
 68         }else{
 69              //改变Btn和label的属性
 70             [self.backBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
 71             self.titleLabel.textColor = [UIColor whiteColor];
 72             self.naviView.alpha = 1 + self.offsetScale;
 73             CGRect frame = self.headerImageView.frame;
 74             frame.size.height  =frame.size.height - self.offsetScale;
 75             self.headerImageView.frame = frame;
 76             
 77         }
 78     }else{
 79         self.naviView.alpha = 1;
 80     }
 81   
 82 }
 83 
 84 #pragma mark -- UITableViewDataSource,UITableViewDelegate
 85 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
 86 {
 87     return 1;
 88 }
 89 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 90 {
 91     return 20;
 92 }
 93 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 94 {
 95     static NSString * cellID = @"cellID";
 96     UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellID];
 97     if (!cell) {
 98         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
 99     }
100     cell.textLabel.text = @"test";
101     return cell;
102 }

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