iOS介面-仿網易新聞左側抽屜式互動

標籤：blog   http   io   color   os   ar   使用   sp   strong   

1、介紹 

   用過網易新聞用戶端的同學都會發現，網易新聞向左滑動時，左側的導覽列會跟著拖動出來，新聞內容列表會拉到最右側。像一個抽屜拉出來一樣。很酷。除了網易新聞，現在好多應用都採用了這樣的互動。

對手勢識別不熟悉的請參考上篇： iOS手勢識別的詳細使用(拖動,縮放,旋轉,點擊,手勢依賴,自訂手勢)

這個互動效果主要用到兩個手勢，一個是pan拖拽，一個是tap點擊。拖拽可以把抽屜拉出來，再推回去。點擊可以把抽屜推回去。

 

效果如下：

    

那麼這個效果如何?呢？

2、實現思路和步驟

思路：從實現的效果分析出來，可以這樣實現：

這個互動是由兩個View組成，左側導航的View在下面，顯示內容列表的View在上面，內容列表的View覆蓋住了導航View,拖動內容列表的View向右，這時候導航View就顯示出來了。

實現步驟：

 

1. 自訂一個View，它做為顯示內容的View。給這個View添加兩個手勢，pan拖拽，tap點擊。
2. 當拖拽這個View時，讓view.center向右移動，這樣就能看到內容View向右移動了。
3. 定義一個抽屜開啟停止時的x值為：OPENCENTERX，這個是內容View最終停止的位置
4. 當內容View越過中間靠右的一個x值時，view自動向右動畫移動到右邊位置停下。
5. 當內容View在開啟的狀態下，點擊內容View，利用UIView動畫把內容View.center移動回到中間。
6. 設定內容View的陰影製作效果

 

3、代碼實現

建立CustomView繼承UIView

 

[cpp] view plaincopy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface CustomView : UIView  
4. {  
5.     CGPoint openPointCenter;  
6.     CGPoint closePointCenter;  
7. }  
8. -(id)initWithView:(UIView*)contentview parentView:(UIView*) parentview;  
9.   
10. @property (nonatomic, strong) UIView *parentView; //抽屜視圖的父視圖  
11. @property (nonatomic, strong) UIView *contenView; //抽屜顯示內容的視圖  
12. @end  

 

兩個手勢在Custom裡實現，並在初始化的時候傳入內容View和父視圖。

[cpp] view plaincopy

1. #import "CustomView.h"  
2.   
3. #define OPENCENTERX 220.0  
4. #define DIVIDWIDTH 70.0 //OPENCENTERX 對應確認是否開啟或關閉的分界線。  
5.   
6. @implementation CustomView  
7.   
8. - (id)initWithFrame:(CGRect)frame  
9. {  
10.     self = [super initWithFrame:frame];  
11.     if (self) {  
12.         // Initialization code  
13.     }  
14.     return self;  
15. }  
16.   
17. - (id)initWithView:(UIView *)contentview parentView:(UIView *)parentview  
18. {  
19.     self = [super initWithFrame:CGRectMake(0,0,contentview.frame.size.width, contentview.frame.size.height)];  
20.       
21.     if (self) {  
22.         self.contenView = contentview;  
23.         self.parentView = parentview;  
24.           
25.         [self addSubview:contentview];  
26.         UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]  
27.                                                         initWithTarget:self  
28.                                                         action:@selector(handlePan:)];  
29.         [self addGestureRecognizer:panGestureRecognizer];  
30.           
31.         UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]  
32.                                                         initWithTarget:self  
33.                                                         action:@selector(handleTap:)];  
34.           
35.         [self addGestureRecognizer:tapGestureRecognizer];  
36.         openPointCenter = CGPointMake(self.parentView.center.x + OPENCENTERX,  
37.                                       self.parentView.center.y);  
38.           
39.         NSLog(@"openPointCenter x:%f, openPointCenter y:%f",  
40.               openPointCenter.x,  
41.               openPointCenter.y);  
42.   
43.           
44.     }  
45.       
46.       
47.       
48.     return self;  
49. }  
50.   
51. -(void) handlePan:(UIPanGestureRecognizer*) recognizer  
52. {  
53.     CGPoint translation = [recognizer translationInView:self.parentView];  
54.       
55.     float x = self.center.x + translation.x;  
56.     NSLog(@"translation x:%f", translation.x);  
57.    
58.     if (x < self.parentView.center.x) {  
59.         x = self.parentView.center.x;  
60.     }  
61.     self.center = CGPointMake(x, openPointCenter.y);  
62.       
63.     if(recognizer.state == UIGestureRecognizerStateEnded)  
64.     {  
65.             [UIView animateWithDuration:0.75  
66.                                   delay:0.01  
67.                                 options:UIViewAnimationCurveEaseInOut  
68.                              animations:^(void)  
69.             {  
70.                 if (x > openPointCenter.x -  DIVIDWIDTH) {  
71.                     self.center = openPointCenter;  
72.                 }else{  
73.                     self.center = CGPointMake(openPointCenter.x - OPENCENTERX,  
74.                                               openPointCenter.y);  
75.                       
76.                 }  
77.                   
78.             }completion:^(BOOL isFinish){  
79.                   
80.             }];  
81.         }  
82.       
83.     [recognizer setTranslation:CGPointZero inView:self.parentView];  
84. }  
85.   
86. -(void) handleTap:(UITapGestureRecognizer*) recognizer  
87. {  
88.     [UIView animateWithDuration:0.75  
89.                           delay:0.01  
90.                         options:UIViewAnimationTransitionCurlUp animations:^(void){  
91.                             self.center = CGPointMake(openPointCenter.x - OPENCENTERX,  
92.                                                       openPointCenter.y);  
93.     }completion:nil];  
94.       
95. }  
96. @end  

4、viewController的調用

為了實現自訂視圖的陰影，添加需要使用QuartzCore架構。在項目裡添加QuartzCore架構後引入標頭檔。

 

[cpp] view plaincopy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.       
5.     CGRect rect = CGRectMake(0, 0,  
6.                              self.view.frame.size.width,  
7.                              self.view.frame.size.height);  
8.     NSLog(@"w:%f, h:%f", rect.size.width, rect.size.height);  
9.     UIImageView *imageleft = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"left.png"]];  
10.     imageleft.frame = rect;  
11.     [self.view addSubview:imageleft];  
12.       
13.     UIView *contentView = [[UIView alloc] initWithFrame:rect];  
14.       
15.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"index.png"]];  
16.     imageView.frame = rect;  
17.     [contentView addSubview:imageView];  
18.   
19.     CustomView *customView = [[CustomView alloc] initWithView:contentView  
20.                                                    parentView:self.view];  
21.     [[customView layer] setShadowOffset:CGSizeMake(10, 10)];  
22.     [[customView layer] setShadowRadius:20];  
23.     [[customView layer] setShadowOpacity:1];  
24.     [[customView layer] setShadowColor:[UIColor blackColor].CGColor];  
25.       
26.     [self.view addSubview:customView];  
27.   
28. }  

 

為了看起來好看，我弄了兩張了，一個是內容視圖，一個是左側導覽列的視圖，然後作為背景圖放到上面的兩個view的裡。

所以不要點裡面的內容，點不了滴，那是圖片而已。這裡只是示範抽屜的效果。

最後，網易新聞的這個互動能從右邊拉出來的效果，原理差不多，可能需要多一個view。還有互動時左側欄裡還有由明變暗，忽大忽小的效果。這些以後有時間再實現。

續篇：iOS介面-仿網易新聞左側抽屜式互動 續(添加新聞內容頁和評論頁手勢)

CSDN下載：代碼下載

github：https://github.com/schelling/NeteaseNews

 

iOS介面-仿網易新聞左側抽屜式互動