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