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(, , self.view.bounds.size.width, )];
[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(-, , , );
[self.view addSubview:self.backBtn];
}
- (void)setupTitleLabel
{
self.titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(, , , )];
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(, , SCREEN_WIDTH, SCREEN_HEIGHT);
self.fzhTableView.delegate = self;
self.fzhTableView.contentInset = UIEdgeInsetsMake(NAVFloat, ,, );
self.fzhTableView.backgroundColor = [UIColor grayColor];
self.fzhTableView.dataSource = self; //2.添加ImageView
self.headerImageView = [[UIImageView alloc]initWithFrame: CGRectMake(,-(NAVFloat + ), SCREEN_WIDTH, (NAVFloat + ))];
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 < ) {
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 = + self.offsetScale;
CGRect frame = self.headerImageView.frame;
frame.size.height =frame.size.height - self.offsetScale;
self.headerImageView.frame = frame; }
}else{
self.naviView.alpha = ;
} } #pragma mark -- UITableViewDataSource,UITableViewDelegate
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return ;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return ;
}
- (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)/;
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) *; self.headerImageView.frame = rect;
}
到这里就实现了上面的两个功能，不足之处请大家多多指教！
demo下载地址：https://github.com/fengzhihao123/FZHQQZone