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

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

 

#import <UIKit/UIKit.h>@interface CustomView : UIView{    CGPoint openPointCenter;    CGPoint closePointCenter;}-(id)initWithView:(UIView*)contentview parentView:(UIView*) parentview;@property (nonatomic, strong) UIView *parentView; //抽屜視圖的父視圖@property (nonatomic, strong) UIView *contenView; //抽屜顯示內容的視圖@end

 

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

#import "CustomView.h"#define OPENCENTERX 220.0#define DIVIDWIDTH 70.0 //OPENCENTERX 對應確認是否開啟或關閉的分界線。@implementation CustomView- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        // Initialization code    }    return self;}- (id)initWithView:(UIView *)contentview parentView:(UIView *)parentview{    self = [super initWithFrame:CGRectMake(0,0,contentview.frame.size.width, contentview.frame.size.height)];        if (self) {        self.contenView = contentview;        self.parentView = parentview;                [self addSubview:contentview];        UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]                                                        initWithTarget:self                                                        action:@selector(handlePan:)];        [self addGestureRecognizer:panGestureRecognizer];                UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]                                                        initWithTarget:self                                                        action:@selector(handleTap:)];                [self addGestureRecognizer:tapGestureRecognizer];        openPointCenter = CGPointMake(self.parentView.center.x + OPENCENTERX,                                      self.parentView.center.y);                NSLog(@"openPointCenter x:%f, openPointCenter y:%f",              openPointCenter.x,              openPointCenter.y);            }                return self;}-(void) handlePan:(UIPanGestureRecognizer*) recognizer{    CGPoint translation = [recognizer translationInView:self.parentView];        float x = self.center.x + translation.x;    NSLog(@"translation x:%f", translation.x);     if (x < self.parentView.center.x) {        x = self.parentView.center.x;    }    self.center = CGPointMake(x, openPointCenter.y);        if(recognizer.state == UIGestureRecognizerStateEnded)    {            [UIView animateWithDuration:0.75                                  delay:0.01                                options:UIViewAnimationCurveEaseInOut                             animations:^(void)            {                if (x > openPointCenter.x -  DIVIDWIDTH) {                    self.center = openPointCenter;                }else{                    self.center = CGPointMake(openPointCenter.x - OPENCENTERX,                                              openPointCenter.y);                                    }                            }completion:^(BOOL isFinish){                            }];        }        [recognizer setTranslation:CGPointZero inView:self.parentView];}-(void) handleTap:(UITapGestureRecognizer*) recognizer{    [UIView animateWithDuration:0.75                          delay:0.01                        options:UIViewAnimationTransitionCurlUp animations:^(void){                            self.center = CGPointMake(openPointCenter.x - OPENCENTERX,                                                      openPointCenter.y);    }completion:nil];    }@end

4、viewController的調用

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

 

- (void)viewDidLoad{    [super viewDidLoad];        CGRect rect = CGRectMake(0, 0,                             self.view.frame.size.width,                             self.view.frame.size.height);    NSLog(@"w:%f, h:%f", rect.size.width, rect.size.height);    UIImageView *imageleft = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"left.png"]];    imageleft.frame = rect;    [self.view addSubview:imageleft];        UIView *contentView = [[UIView alloc] initWithFrame:rect];        UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"index.png"]];    imageView.frame = rect;    [contentView addSubview:imageView];    CustomView *customView = [[CustomView alloc] initWithView:contentView                                                   parentView:self.view];    [[customView layer] setShadowOffset:CGSizeMake(10, 10)];    [[customView layer] setShadowRadius:20];    [[customView layer] setShadowOpacity:1];    [[customView layer] setShadowColor:[UIColor blackColor].CGColor];        [self.view addSubview:customView];}

 

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

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

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

CSDN下載：代碼下載

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