好長時間沒怎么更新簡書了蟆淀，最近也比較閑，在公司逛天貓商城的時候感到什么都買不起啊澡匪，只能仿著天貓商城商品展示界面自己動手實現(xiàn)了一下效果打發(fā)一下時間嘍熔任，我主要實現(xiàn)了兩個效果。這個快速集成工具和demo已上傳到我的github唁情，感興趣的可以star一下我疑苔。
-
scrollview滑動導(dǎo)航欄漸變效果，這個效果說不上新鮮甸鸟，我就簡單封裝了個工具類惦费，方便大家快速集成這種效果吧
我實現(xiàn)的導(dǎo)航欄漸變效果 -
完整實現(xiàn)了仿天貓購物商城商品展示界面
天貓商品詳情展示效果
好了，效果看了就著手實現(xiàn)吧抢韭。
一.導(dǎo)航欄滑動效果 NavBarSliderTool中實現(xiàn)主要代碼
NavBarSliderTool.h 代碼
NavBarSliderTool.m實現(xiàn)主要代碼
//設(shè)置navigation bar 背景圖片和陰影圖片為一個空白圖片
[viewController.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact];
[viewController.navigationController.navigationBar setShadowImage:[UIImage new]];
此時發(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];
//這個屬性默認(rèn)打開的，我們手動關(guān)閉
self.automaticallyAdjustsScrollViewInsets = NO;
//設(shè)置底部內(nèi)邊距為49防止被tabbar遮擋內(nèi)容
self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 49, 0);```
這時候我們NEW一個跟導(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];
實現(xiàn)函數(shù)
在viewController中設(shè)置相應(yīng)屬性`@property (nonatomic, strong)NavBarSliderTool * sliderTool;`實現(xiàn)以下代碼
_sliderTool = [[NavBarSliderTool alloc]init];
_sliderTool.barColor = [UIColor redColor];
[_sliderTool setViewController:self scrollview:self.tableView];
這時候這個簡單的效果已經(jīng)完成了后雷，不懂得可以運行一下demo。
***
######二 完整實現(xiàn)了仿天貓購物商城商品展示界面
1. 首先分析一下整個詳情界面
首先出現(xiàn)在我們眼前的分為上下兩個部分，上邊是原生的臀突，下邊是一個webview勉抓，兩者通過滑動操作，進(jìn)行坐標(biāo)的切換候学，輪換展示給用戶藕筋。我們將上部原生tableview往下拉的時候，發(fā)現(xiàn)它下層還有一層視圖梳码，我是用tableview實現(xiàn)的隐圾。所以我實現(xiàn)的方式是整個界面大致分成兩層岔冀，最底層tableView是一層括饶，webview和另一個tableView是在同一層級。
如圖
2. 上下兩層視圖切換的時候 titleview是滑動的靴迫，我為了方便titleView用了一個scrollview來實現(xiàn)上下打到切換效果實現(xiàn)如下：
3. 上下兩個視圖切換效果 我在函數(shù)`- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate`通過判斷拖動結(jié)束之后的偏移量設(shè)置上下兩個視圖的坐標(biāo)切換 主要代碼
4. tableView上滑過程會有一個視圖誤差
代碼如下
contraint = contraint * .6;
if (contraint <= 0) {
contraint = 0;
}
[self layoutIfNeeded];
[UIView animateWithDuration:.1 animations:^{
_midViewTopContraint.constant = -contraint;
[self layoutIfNeeded];
}];
>注：約束動畫 需要調(diào)用[self layoutIfNeeded];才會有效
5. 底層視圖出現(xiàn)后 有一個毛玻璃效果
實現(xiàn)代碼如下
//設(shè)置模糊效果
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, imageView.width, imageView.height)];
toolbar.barStyle = UIBarStyleBlackTranslucent;
[imageView addSubview:toolbar];
>差不多主要功能介紹完畢了濒蒋，因為寫的比較匆忙吧盐碱，代碼質(zhì)量還有待優(yōu)化，歡迎大家提出寶貴意見沪伙。