現(xiàn)在在很多的App中都可以看見類似這樣的效果：
g.gif
分析：
實現(xiàn)這樣的效果我們需要考慮如下幾個問題：
1.用什么控件實現(xiàn)這樣效果碘举？
2.怎么樣實現(xiàn)導航欄的顏色的變化
3.上下滑動的時候浴韭，怎么實現(xiàn)圖片的尺寸的變化
a.對于第一點跪帝，我們可以看見下面是用UITableView來實現(xiàn)的类浪，首先會想到上面的圖片放到cell中收苏，但拖動cell的時候上面的圖片很難保持在頂部
b.導航欄用原生的導航欄，很難控制，因為原生的導航欄里包含了許多的控件，所以這里我們用自定義導航欄來實現(xiàn)
c.上下滑動的時候通過其偏移量杈绸，來計算圖片的尺寸的變化
下面我們來實現(xiàn)：
- 第一步：
- 創(chuàng)建自定的導航欄，這里我自定義了一個類來實現(xiàn)：
- 初始狀態(tài)下的導航欄是透明的
BPCustomNavBar *nav = [[BPCustomNavBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
nav.title = @"風景如畫";
nav.titleColor = [UIColor whiteColor];
nav.leftImage = @"back_icon";
nav.rightImage = @"share_icon";
nav.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.f];
[self.view addSubview:nav];
self.navBar = nav;
- 第二步：
- 創(chuàng)建圖片：
//創(chuàng)建背景圖片
self.bgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2"]];
self.bgView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width*0.8);
self.originalFrame = self.bgView.frame;
[self.view addSubview:self.bgView];
- 第三步：
- 創(chuàng)建下面部分的UITableView
- 因tableView也可以滑動到上面矮瘟，所有其y值瞳脓，應該是導航欄的高度，但這樣就擋住了背景的圖片澈侠，所以我們需要創(chuàng)建tableView的頭部是視圖劫侧，將其背景色clear這樣就可以達到要求：
//新建UItableView
UITableView *table = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
table.backgroundColor = [UIColor clearColor];
table.delegate = self;
table.dataSource = self;
[self.view addSubview:table];
self.tableView = table;
//添加頭部
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, headHeight)];
headerView.backgroundColor = [UIColor clearColor];
self.tableView.tableHeaderView = headerView;
- 第四步：
- 實現(xiàn)滑動tableView改變背景圖片的尺寸，監(jiān)聽其scrollView的方法- (void)scrollViewDidScroll：(UIScrollView *)scrollView 哨啃，監(jiān)聽其偏移量：
CGFloat yoffset = scrollView.contentOffset.y;
NSLog(@"===========%f",yoffset);
//當其偏移量在headView的范圍內(nèi)的時候板辽，navBar顏色的改變
if (yoffset < headHeight) {
self.navBar.titleColor = [UIColor whiteColor];
self.navBar.leftImage = @"back_icon";
self.navBar.rightImage = @"share_icon";
self.navBar.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:yoffset/headHeight];
}else {
self.navBar.titleColor = [UIColor whiteColor];
self.navBar.backgroundColor = [UIColor redColor];
self.navBar.leftImage = @"back_icon";
self.navBar.rightImage = @"share_icon";
}
//上下滑動的時候的背景圖片的放大
if (yoffset > 0) {//往上拖動
self.bgView.frame = ({
CGRect frame = self.bgView.frame;
frame.origin.y = self.originalFrame.origin.y -yoffset;
frame;
});
}else {//往下拖動
self.bgView.frame = ({//高度變化的比較快
CGRect frame = self.bgView.frame;
frame.size.height = self.originalFrame.size.height -yoffset;
frame.size.width = self.originalFrame.size.width * frame.size.height /self.originalFrame.size.height;
frame.origin.x = -(frame.size.width - self.originalFrame.size.width)/2;
frame.origin.y = 0;
frame;
});
// self.bgView.frame = ({//高度變化的快
// CGRect frame = self.bgView.frame;
// frame.size.width = self.originalFrame.size.width -yoffset;
// frame.size.height = self.originalFrame.size.height * frame.size.width /self.originalFrame.size.width;
// frame.origin.x = -(frame.size.width - self.originalFrame.size.width)/2;
// frame.origin.y = 0;
// frame;
// });
}
