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

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

[objc]   查看纯 文本 

 

 

1. //  
2. // ViewController.m  
3. //仿淘宝，上拉进入​​详情  
4. //  
5. //由Amydom在16/11/22创建。  
6. //版权所有©2016年Amydom。版权所有。  
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. @结束  
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  =  6 0 .F ;  
41.     [ self .view  addSubview ：_tableView];  
42.     [_tableView  registerClass ：[UITableViewCell  类]  forCellReuseIdentifier ：@“cell” ];  
43.       
44.     的UILabel  * footLabel = [[的UILabel  的alloc ] initWithFrame：方法CGRectMake（0 ，  0 ，  自.view .frame .size .WIDTH ，  6 0）];  
45.     footLabel .text  =  @“继续拖动，查看图文详情” ;  
46.     footLabel .font  = [UIFont  systemFontOfSize ：1 3 ];  
47.     footLabel .textAlignment  = NSTextAlignmentCenter;  
48.     _tableView .tableFooterView  = footLabel;  
49.     //注意：懒加载时，只有用自才能调其getter方法  
50.       [ self .view  addSubview ：self .webView ];  
51.     _headLab = [[UILabel  alloc ]  init ];  
52.     _headLab .text  =  @“上拉，返回详情” ;  
53.     _headLab .textAlignment  = NSTextAlignmentCenter;  
54.     _headLab .font  = [UIFont  systemFontOfSize ：1 3 ];  
55.     _headLab .frame  = CGRectMake（0 ，  0 ，  自.view .frame .size .WIDTH ，  4 0 .F ）;  
56.     _headLab 阿尔法 =  0 .F ;  
57.     _headLab .textColor  = [UIColor  blackColor ];  
58.     [_webView  addSubview ：_headLab];  
59.       
60.    [_webView .scrollView  addObserver ：self  forKeyPath ：@“contentOffset”  选项：NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld  上下文：nil ];  
61.       
62.       
63. }  
64.   
65. //懒加载webView增加流畅度  
66. - （UIWebView  *）webView {  
67.       
68.     //注意，这里不用自我防止循环引用  
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.     返回 _webView;  
79.       
80. }  
81. - （NSInteger）tableView :( UITableView  *）tableView  numberOfRowsInSection ：（NSInteger）section {  
82.       
83.     返回1 5 ;   
84.       
85. }  
86.   
87. - （UITableViewCell  *）tableView :( UITableView  *）tableView  cellForRowAtIndexPath :( NSIndexPath  *）indexPath {  
88.       
89.     静态NSString  * indetifier =  @“cell” ;   
90.     UITableViewCell  * cell = [tableView  dequeueReusableCellWithIdentifier ：indetifier];  
91.     细胞.textLabel 的.text  =  @ “Amydom” ;  
92.       
93.     返回 单元格  
94.    
95.       
96. }  
97.   
98. //监测卷的偏移量  
99. - （void ）scrollViewDidEndDragging :( UIScrollView  *）scrollView  willDecelerate :( BOOL ）减速  
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）>  4 0 ）  
108.         {  
109.             
110.            [ self  goToDetailAnimation ]; //进入图文详情的动画  
111.         }  
112.     }  
113.       
114.     else // webView页面上的滚动   
115.     {  
116.         if （offsetY <  0  && -offsetY>  4 0 ）  
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 ，  6 4 ，  自.view .frame .size .WIDTH ，  自.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.     }  完成：^（BOOL  完成）{  
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 ，  自.view .frame .size .WIDTH ，  自.view .bounds .size .height ）;  
140.         _webView .frame  = CGRectMake（0 ，_tableView .contentSize .height ，  self .view .frame .size .width ，  self .view .frame.size .height ）;  
141.           
142.     }  完成：^（BOOL  完成）{  
143.           
144.     }];  
145. }  
146.   
147. // KVO观察  
148. - （void ）observeValueForKeyPath :( NSString  *）keyPath  ofObject :( id ）object  change ：（NSDictionary <NSKeyValueChangeKey，id > *）change  context （void void  *）context {  
149.       
150.       
151.     if （object == _webView .scrollView  && [keyPath  isEqualToString ：@“contentOffset” ]）  
152.     {  
153.         [ self  headLabAnimation ：[change [ @“new” ]  CGPointValue ] .y ];  
154.     } 其他  
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 阿尔法 = -offsetY / 6 0 ;  
167.     _headLab .center  = CGPointMake（self .view .frame .size .width / 2 ，-offsetY / 2 .f ）;  
168.     //图标翻转，表示已超过临界值，松手就会返回上页  
169.     if （-offsetY>  4 0 ）{  
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.     //处理可以重新创建的任何资源。  
180. }  
181.   
182.   
183. @结束