iOS 仿淘宝,上拉进入详情页面

今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的

[objc]  view plain  copy

 

1. //  
2. //  ViewController.m  
3. //  仿淘宝,上拉进入详情  
4. //  
5. //  Created by Amydom on 16/11/22.  
6. //  Copyright © 2016年 Amydom. All rights reserved.  
7. //  
8.   
9. #import "ViewController.h"  
10.   
11. @interface ViewController ()<UITableViewDelegate , UITableViewDataSource , UIScrollViewDelegate , UIWebViewDelegate>  
12.   
13.   
14. @property (nonatomic , strong)UITableView *tableView;  
15.   
16. @property (nonatomic , strong)UIWebView *webView;  
17.   
18. @property (nonnull , strong)UILabel *headLab;  
19.   
20.   
21.   
22. @end  
23.   
24. @implementation ViewController  
25.   
26. - (void)viewDidLoad {  
27.     [super viewDidLoad];  
28.     self.view.backgroundColor = [UIColor whiteColor];  
29.       
30.     [self createView];  
31.       
32.       
33. }  
34.   
35. - (void)createView{  
36.       
37.     _tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];  
38.     _tableView.delegate = self;  
39.     _tableView.dataSource = self;  
40.     _tableView.rowHeight = 60.f;  
41.     [self.view addSubview:_tableView];  
42.     [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];  
43.       
44.     UILabel *footLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 60)];  
45.     footLabel.text = @"继续拖动，查看图文详情";  
46.     footLabel.font = [UIFont systemFontOfSize:13];  
47.     footLabel.textAlignment = NSTextAlignmentCenter;  
48.     _tableView.tableFooterView = footLabel;  
49.     //注意:懒加载时,只有用 self 才能调其 getter 方法  
50.       [self.view addSubview:self.webView];  
51.     _headLab = [[UILabel alloc] init];  
52.     _headLab.text = @"上拉，返回详情";  
53.     _headLab.textAlignment = NSTextAlignmentCenter;  
54.     _headLab.font = [UIFont systemFontOfSize:13];  
55.     _headLab.frame = CGRectMake(0, 0, self.view.frame.size.width, 40.f);  
56.     _headLab.alpha = 0.f;  
57.     _headLab.textColor = [UIColor blackColor];  
58.     [_webView addSubview:_headLab];  
59.       
60.    [ _webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];  
61.       
62.       
63. }  
64.   
65. //懒加载 webView 增加流畅度  
66. - (UIWebView *)webView{  
67.       
68.     //注意,这里不用 self 防止循环引用  
69.     if (!_webView) {  
70.         _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, _tableView.contentSize.height, self.view.frame.size.width, self.view.frame.size.height)];  
71.         _webView.delegate = self;  
72.         _webView.delegate = self;  
73.         _webView.scrollView.delegate = self;  
74.           
75.         [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];  
76.     }  
77.       
78.     return _webView;  
79.       
80. }  
81. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{  
82.       
83.     return 15;  
84.       
85. }  
86.   
87. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{  
88.       
89.     static NSString *indetifier = @"cell";  
90.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:indetifier];  
91.     cell.textLabel.text = @"Amydom";  
92.       
93.     return cell;  
94.    
95.       
96. }  
97.   
98. //监测 scroll 的偏移量  
99. -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate  
100. {  
101.     CGFloat offsetY = scrollView.contentOffset.y;  
102.       
103.     if([scrollView isKindOfClass:[UITableView class]]) // tableView界面上的滚动  
104.     {  
105.         // 能触发翻页的理想值:tableView整体的高度减去屏幕本省的高度  
106.         CGFloat valueNum = _tableView.contentSize.height - self.view.frame.size.height;  
107.         if ((offsetY - valueNum) > 40)  
108.         {  
109.             
110.            [self goToDetailAnimation]; // 进入图文详情的动画  
111.         }  
112.     }  
113.       
114.     else // webView页面上的滚动  
115.     {  
116.         if(offsetY < 0 && -offsetY > 40)  
117.         {  
118.             [self backToFirstPageAnimation]; // 返回基本详情界面的动画  
119.         }  
120.     }  
121. }  
122.   
123. // 进入详情的动画  
124. - (void)goToDetailAnimation  
125. {  
126.     [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{  
127.         _webView.frame = CGRectMake(0, 64, self.view.frame.size.width, self.view.frame.size.height);  
128.         _tableView.frame = CGRectMake(0, -self.view.frame.size.height , self.view.frame.size.width, self.view.frame.size.height);  
129.     } completion:^(BOOL finished) {  
130.           
131.     }];  
132. }  
133.   
134.   
135. // 返回第一个界面的动画  
136. - (void)backToFirstPageAnimation  
137. {  
138.     [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{  
139.         _tableView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.bounds.size.height);  
140.         _webView.frame = CGRectMake(0, _tableView.contentSize.height, self.view.frame.size.width, self.view.frame.size.height);  
141.           
142.     } completion:^(BOOL finished) {  
143.           
144.     }];  
145. }  
146.   
147. // KVO观察  
148. - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(voidvoid *)context{  
149.       
150.       
151.     if(object == _webView.scrollView && [keyPath isEqualToString:@"contentOffset"])  
152.     {  
153.         [self headLabAnimation:[change[@"new"] CGPointValue].y];  
154.     }else  
155.     {  
156.         [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];  
157.     }  
158. }  
159.   
160.   
161.   
162.   
163. // 头部提示文本动画  
164. - (void)headLabAnimation:(CGFloat)offsetY  
165. {  
166.     _headLab.alpha = -offsetY/60;  
167.     _headLab.center = CGPointMake(self.view.frame.size.width/2, -offsetY/2.f);  
168.     // 图标翻转，表示已超过临界值，松手就会返回上页  
169.     if(-offsetY > 40){  
170.         _headLab.textColor = [UIColor redColor];  
171.         _headLab.text = @"释放，返回详情";  
172.     }else{  
173.         _headLab.textColor = [UIColor blackColor];  
174.         _headLab.text = @"上拉，返回详情";  
175.     }  
176. }  
177. - (void)didReceiveMemoryWarning {  
178.     [super didReceiveMemoryWarning];  
179.     // Dispose of any resources that can be recreated.  
180. }  
181.   
182.   
183. @end