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