iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)

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

本文遵循“署名-非商业用途-保持一致”创作公用协议

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

空杯子_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值