好長時(shí)間沒怎么更新簡書了，最近也比較閑，在公司逛天貓商城的時(shí)候感到什么都買不起啊，只能仿著天貓商城商品展示界面自己動(dòng)手實(shí)現(xiàn)了一下效果打發(fā)一下時(shí)間嘍，我主要實(shí)現(xiàn)了兩個(gè)效果。這個(gè)快速集成工具和demo已上傳到我的github，感興趣的可以star一下我。
-
scrollview滑動(dòng)導(dǎo)航欄漸變效果，這個(gè)效果說不上新鮮，我就簡單封裝了個(gè)工具類，方便大家快速集成這種效果吧
我實(shí)現(xiàn)的導(dǎo)航欄漸變效果 -
完整實(shí)現(xiàn)了仿天貓購物商城商品展示界面
天貓商品詳情展示效果
好了，效果看了就著手實(shí)現(xiàn)吧。
一.導(dǎo)航欄滑動(dòng)效果 NavBarSliderTool中實(shí)現(xiàn)主要代碼
NavBarSliderTool.h 代碼
NavBarSliderTool.m實(shí)現(xiàn)主要代碼
//設(shè)置navigation bar 背景圖片和陰影圖片為一個(gè)空白圖片
[viewController.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact];
[viewController.navigationController.navigationBar setShadowImage:[UIImage new]];
此時(shí)發(fā)現(xiàn)navBar下面有一條灰線，不要緊張
viewController.navigationController.navigationBar.clipsToBounds = YES;去除灰線即可
我一般設(shè)置tableView坐標(biāo)是這樣的
self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, kUIScreenWidth, kUIScreenHeight) style:UITableViewStylePlain];
//這個(gè)屬性默認(rèn)打開的，我們手動(dòng)關(guān)閉
self.automaticallyAdjustsScrollViewInsets = NO;
//設(shè)置底部內(nèi)邊距為49防止被tabbar遮擋內(nèi)容
self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 49, 0);```
這時(shí)候我們NEW一個(gè)跟導(dǎo)航欄同樣大小的view，放在最上層
_navBarBgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kUIScreenWidth, 64)];
_navBarBgView.backgroundColor = self.barColor;
_navBarBgView.alpha = 0;
//放置在最上層
[viewController.view insertSubview:self.navBarBgView atIndex:viewController.view.subviews.count];
現(xiàn)在我們只需要監(jiān)聽scrollview的偏移進(jìn)行相應(yīng)操作即可
[scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
實(shí)現(xiàn)函數(shù)
在viewController中設(shè)置相應(yīng)屬性`@property (nonatomic, strong)NavBarSliderTool * sliderTool;`實(shí)現(xiàn)以下代碼
_sliderTool = [[NavBarSliderTool alloc]init];
_sliderTool.barColor = [UIColor redColor];
[_sliderTool setViewController:self scrollview:self.tableView];
這時(shí)候這個(gè)簡單的效果已經(jīng)完成了，不懂得可以運(yùn)行一下demo。
***
######二 完整實(shí)現(xiàn)了仿天貓購物商城商品展示界面
1. 首先分析一下整個(gè)詳情界面
首先出現(xiàn)在我們眼前的分為上下兩個(gè)部分，上邊是原生的，下邊是一個(gè)webview，兩者通過滑動(dòng)操作，進(jìn)行坐標(biāo)的切換，輪換展示給用戶。我們將上部原生tableview往下拉的時(shí)候，發(fā)現(xiàn)它下層還有一層視圖，我是用tableview實(shí)現(xiàn)的。所以我實(shí)現(xiàn)的方式是整個(gè)界面大致分成兩層，最底層tableView是一層，webview和另一個(gè)tableView是在同一層級(jí)。
如圖
2. 上下兩層視圖切換的時(shí)候 titleview是滑動(dòng)的，我為了方便titleView用了一個(gè)scrollview來實(shí)現(xiàn)上下打到切換效果實(shí)現(xiàn)如下：
3. 上下兩個(gè)視圖切換效果 我在函數(shù)`- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate`通過判斷拖動(dòng)結(jié)束之后的偏移量設(shè)置上下兩個(gè)視圖的坐標(biāo)切換 主要代碼
4. tableView上滑過程會(huì)有一個(gè)視圖誤差
代碼如下
contraint = contraint * .6;
if (contraint <= 0) {
contraint = 0;
}
[self layoutIfNeeded];
[UIView animateWithDuration:.1 animations:^{
_midViewTopContraint.constant = -contraint;
[self layoutIfNeeded];
}];
>注：約束動(dòng)畫 需要調(diào)用[self layoutIfNeeded];才會(huì)有效
5. 底層視圖出現(xiàn)后 有一個(gè)毛玻璃效果
實(shí)現(xiàn)代碼如下
//設(shè)置模糊效果
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, imageView.width, imageView.height)];
toolbar.barStyle = UIBarStyleBlackTranslucent;
[imageView addSubview:toolbar];
>差不多主要功能介紹完畢了，因?yàn)閷懙谋容^匆忙吧，代碼質(zhì)量還有待優(yōu)化，歡迎大家提出寶貴意見。