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

轉載于:https://www.cnblogs.com/fengzhihao/p/5307436.html

總結

以上是生活随笔為你收集整理的iOS --高仿QQ空间页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。