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

來源:互聯網
上載者:User
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

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.