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

來源:互聯網
上載者:User
1、介紹

有的博友看了上篇博文 iOS介面-仿網易新聞左側抽屜式互動 ,在微博裡問,網易新聞裡的內容和評論的拖拽如何?,

上面的UINavigation如何嵌進去。可能不少人有這樣的需求,現在花了些時間把這兩個效果做一下,

和大家分享交流。思路和上篇基本差不多,但是沒有用到UINavigation,其實在我看來上面的返回、

評論按鈕都是可以通過addsubview添加的。內容頁和評論頁的手勢互動 實現的效果如下:


圖中的箭頭是手勢拖動的方向。2、跳轉添加網易新聞的按鈕都是可點擊的,所以在這個例子中除了能通過手勢操作。運行例子代碼的時候注意下面的內容:我在代碼中添加了一些button,下面圖中紅色框框裡的地區是可點可跳轉的:列表頁第一條新聞可點,內容頁左上方可點返回,評論頁左上方也可點返回。其他部分都是圖片。3、部分代碼仿照customView的代碼做了新聞內容的視圖 DetailView,代碼如下:

--

#import <UIKit/UIKit.h>@class CommentView;@interface DetailView : UIView{    CommentView *commentView;    BOOL isPanComment;}- (id)initWithView:(UIView*)contentView parentView:(UIView*) parentView;@property (nonatomic, strong) UIView *parentView; //抽屜視圖的父視圖@property (nonatomic, strong) UIView *contentView; //抽屜顯示內容的視圖@end

////  DetailView.m//  NeteaseNews////  Created by rongfzh on 13-3-5.//  Copyright (c) 2013年 rongfzh. All rights reserved.//#import "DetailView.h"#import "CommentView.h"#import <QuartzCore/QuartzCore.h>@implementation DetailView- (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 addSubview:contentView];        UIPanGestureRecognizer *panGestureRecognier = [[UIPanGestureRecognizer alloc]                                                       initWithTarget:self                                                       action:@selector(HandlePan:)];        [self addGestureRecognizer:panGestureRecognier];                UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];        backBtn.frame = CGRectMake(0, 0, 80, 50);        [backBtn addTarget:self                    action:@selector(back:)          forControlEvents:UIControlEventTouchUpInside];        [self addSubview:backBtn];        UIImageView *imageCommentView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"comment.png"]];        imageCommentView.frame  = CGRectMake(0, 0,                                                    self.frame.size.width,                                                    self.frame.size.height);        commentView = [[CommentView alloc] initWithView:imageCommentView parentView:self];        commentView.center = CGPointMake(480, 230);        [[commentView layer] setShadowOffset:CGSizeMake(10, 10)];        [[commentView layer] setShadowRadius:20];        [[commentView layer] setShadowOpacity:1];        [[commentView layer] setShadowColor:[UIColor blackColor].CGColor];        [self addSubview:commentView];        isPanComment = NO;            }        self.parentView = parentView;    return self;}- (void)HandlePan:(UIPanGestureRecognizer*)panGestureRecognizer{        CGPoint translation = [panGestureRecognizer translationInView:self.parentView];    float x = self.center.x + translation.x;    if (x < 160) {        x = 160;    }    if(translation.x > 0){        if (!isPanComment) {            self.center = CGPointMake(x, 230);        }    }        if (translation.x < 0 && self.center.x > 160) {        if (!isPanComment) {            self.center = CGPointMake(x, 230);        }    }else if(translation.x < 0){        isPanComment = YES;        commentView.center = CGPointMake(commentView.center.x + translation.x, 230);    }    if (commentView.center.x < 480 && translation.x > 0) {        isPanComment = YES;        commentView.center = CGPointMake(commentView.center.x + translation.x, 230);    }        if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {        if (commentView.center.x < 400) {            [UIView animateWithDuration:0.4                                  delay:0.1                                options:UIViewAnimationCurveEaseInOut                             animations:^(void){                                 commentView.center = CGPointMake(160, 230);                             }completion:^(BOOL finish){                                 isPanComment = NO;                             }];        }else{            [UIView animateWithDuration:0.4                                  delay:0.1                                options:UIViewAnimationCurveEaseInOut                             animations:^(void){                                 commentView.center = CGPointMake(480, 230);                             }completion:^(BOOL finish){                                 isPanComment = NO;                             }];        }        if (self.center.x > 190) {            [UIView animateWithDuration:0.4                                  delay:0.1                                options:UIViewAnimationCurveEaseInOut                             animations:^(void){                                 self.center = CGPointMake(480, 230);                             }completion:^(BOOL finish){                                 [self.parentView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];                             }];        }else{            [UIView animateWithDuration:0.4                                  delay:0.1                                options:UIViewAnimationCurveEaseInOut                             animations:^(void){                                 self.center = CGPointMake(160, 230);                             }completion:^(BOOL finish){                                                              }];        }    }        [panGestureRecognizer setTranslation:CGPointZero inView:self.parentView];    }- (void) back:(id)sender{    [UIView animateWithDuration:0.4                          delay:0.1                        options:UIViewAnimationCurveEaseInOut                     animations:^(void){                         self.center = CGPointMake(480, 230);                     }completion:^(BOOL finish){                         [self.parentView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];                     }];}/*// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect{    // Drawing code}*/@end

3、評論頁的view和內容頁的代碼差不多

代碼還有很多值得最佳化的地方,現在只是展示實現了功能,手勢判斷部分代碼比較亂,只要掌握了手勢的原來,代碼可以自己根據需求來修改

代碼:

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

CSDN資源:http://download.csdn.net/detail/totogo2010/5110546

容芳志 (http://blog.csdn.net/totogo2010)

本文遵循“署名-非商業用途-保持一致”創作公用協議

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.