商品詳情頁(yè)是很多app都會(huì)涉及到的诫肠，天貓?jiān)斍轫?yè)向上滑動(dòng)的時(shí)候會(huì)有一種視覺(jué)差效果是如何實(shí)現(xiàn)的呢铁蹈？TableView和webView又是如何實(shí)現(xiàn)切換的？其實(shí)原理也較為簡(jiǎn)單肃廓，下面我們來(lái)具體看看實(shí)現(xiàn)的思路和代碼
先看看效果：
1.首先我們需要?jiǎng)?chuàng)建三個(gè)視圖翻屈，一個(gè)是容器視圖bigView,一個(gè)是tableView,還有一個(gè)是webView,下面的bottomHeight表示的是最下面“加入購(gòu)物車(chē)”和“立即購(gòu)買(mǎi)”視圖的高度
-(void)layout:(CGFloat)bottomHeitht{
self.bottomHeight = bottomHeitht;
self.frame = CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT- bottomHeitht);
self.backgroundColor = [UIColor whiteColor];
self.bigView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, (kSCREEN_HEIGHT-bottomHeitht)*2)];
self.bigView.backgroundColor = [UIColor whiteColor];
self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_HEIGHT- bottomHeitht)];
self.tableView.backgroundColor = [UIColor whiteColor];
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, kSCREEN_HEIGHT-bottomHeitht, kSCREEN_WIDTH, kSCREEN_HEIGHT - bottomHeitht)];
_webView.backgroundColor = [UIColor clearColor];
self.webView.scrollView.delegate = self;
[self addSubview:_bigView];
[_bigView addSubview:_tableView];
[_bigView addSubview:_webView];
}
2.下面我們來(lái)看一張圖解釋上面代碼的布局
3.視圖差就是下面一小段代碼實(shí)現(xiàn)的陈哑，注釋里面已經(jīng)寫(xiě)明視覺(jué)差形成的原因了
#pragma mark -- UIScrollViewDelegate 用于控制頭部視圖滑動(dòng)的視差效果
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (_isConverAnimation) {
CGFloat offset = scrollView.contentOffset.y;
if (scrollView == _tableView){
//重新賦值，就不會(huì)有用力拖拽時(shí)的回彈
_tempScrollView.contentOffset = CGPointMake(_tempScrollView.contentOffset.x, 0);
if (offset >= 0 && offset <= kSCREEN_WIDTH) {
//因?yàn)閠empScrollView是放在tableView上的伸眶，tableView向上速度為1惊窖，實(shí)際上tempScrollView的速度也是1，此處往反方向走1/2的速度厘贼，相當(dāng)于tableView還是正向在走1/2界酒，這樣就形成了視覺(jué)差！
_tempScrollView.contentOffset = CGPointMake(_tempScrollView.contentOffset.x, - offset / 2.0f);
}
}
}else{}
}
4.上面代碼的isConverAnimation是是否需要視圖差動(dòng)畫(huà)嘴秸，這里的_tempScrollView是一個(gè)UIScrollView的對(duì)象,用于將TableView的頭部視圖放在上面盾计，看下面的代碼：
-(void)setMsgView{
//添加頭部和尾部視圖
UIView*headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_WIDTH)];
headerView.backgroundColor = [UIColor blueColor];
_tempScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, kSCREEN_WIDTH)];
[headerView addSubview:_tempScrollView];
TableHeaderView*tableHeaderView = [TableHeaderView tableHeaderView];
tableHeaderView.frame = headerView.frame;
[_tempScrollView addSubview:tableHeaderView];
_tableView.tableHeaderView = headerView;
OnPullMsgView*pullMsgView = [OnPullMsgView onPullMsgView];
UIView*footView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kSCREEN_WIDTH, KmsgVIewHeight)];
pullMsgView.frame = footView.bounds;
[footView addSubview:pullMsgView];
_tableView.tableFooterView = footView;
//設(shè)置下拉提示視圖
DownPullMsgView*downPullMsgView = [DownPullMsgView downPullMsgView];
UIView*downMsgView = [[UIView alloc]initWithFrame:CGRectMake(0, -KmsgVIewHeight, kSCREEN_WIDTH, KmsgVIewHeight)];
downPullMsgView.frame = downMsgView.bounds;
[downMsgView addSubview:downPullMsgView];
[_webView.scrollView addSubview:downMsgView];
}
5.最后再來(lái)看上拉和下拉效果的實(shí)現(xiàn)售担，就是在滾動(dòng)的代理中監(jiān)聽(tīng)偏移量改變bigView的fram來(lái)實(shí)現(xiàn)
#pragma mark -- 監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)商品詳情與圖文詳情界面的切換
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
WS(b_self);
CGFloat offset = scrollView.contentOffset.y;
if (scrollView == _tableView) {
if (offset > _tableView.contentSize.height - kSCREEN_HEIGHT + self.bottomHeight + KendDragHeight) {
[UIView animateWithDuration:0.4 animations:^{
b_self.bigView.transform = CGAffineTransformTranslate(b_self.bigView.transform, 0, -kSCREEN_HEIGHT + self.bottomHeight + KnavHeight);
} completion:^(BOOL finished) {
if (b_self.scrollScreenBlock) {
b_self.scrollScreenBlock(NO);
}
}];
}
}
if (scrollView == _webView.scrollView) {
if (offset < - KendDragHeight) {
[UIView animateWithDuration:0.4 animations:^{
[UIView animateWithDuration:0.4 animations:^{
b_self.bigView.transform = CGAffineTransformIdentity;
}];
} completion:^(BOOL finished) {
if (b_self.scrollScreenBlock) {
b_self.scrollScreenBlock(YES);
}
}];
}
}
}
6.關(guān)于從webView下拉到tableView視圖的偏移我想大家一看就應(yīng)該很清楚，就是你需要拖拽距離的偏移量署辉。主要我們來(lái)解釋下為什么上拉加載商品詳情為什么是下面這個(gè)偏移量：
(offset > _tableView.contentSize.height - kSCREEN_HEIGHT + self.bottomHeight + KendDragHeight
7.下面畫(huà)一張圖大家就理解了:(offset > _tableView.contentSize.height - kSCREEN_HEIGHT + self.bottomHeight + KendDragHeight)其實(shí)是這樣的：(offset > _tableView.contentSize.height - （kSCREEN_HEIGHT - self.bottomHeight ）+ KendDragHeight），所以KendDragHeight就是需要拖拽的偏移量
8.這里面有一個(gè)block是用于監(jiān)聽(tīng)是滾動(dòng)到了TableView視圖還是WebView視圖岩四，方便我們做一些其他的事情
//滾動(dòng)監(jiān)聽(tīng)Block:為YES是滾動(dòng)到了商品詳情 NO滾動(dòng)到圖文詳情
@property (nonatomic, copy) ScrollScreenBlock scrollScreenBlock;
9.最后再來(lái)看看控制器的實(shí)現(xiàn)
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *bottomView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
FECGoodsDetailLayout*detailView = [[FECGoodsDetailLayout alloc]init];
[detailView setGoodsDetailLayout:self WebViewURL:@"https://www.baidu.com" IsConverAnimation:YES bottomHeighr:self.bottomView.frame.size.height];
//滾動(dòng)監(jiān)聽(tīng)
detailView.scrollScreenBlock = ^(BOOL isFirst){
if (isFirst) {
NSLog(@"滾動(dòng)到了第一屏");
}else{
NSLog(@"第二屏");
}
};
}
10.這里面的頭部視圖哭尝，上拉加載和下拉加載都是可以直接用xib來(lái)進(jìn)行自定義
最后附上demo下載地址：http://git.oschina.net/Qinz_323/DetailLayout
我是Qinz,希望我的文章對(duì)你有幫助。
