zoukankan      html  css  js  c++  java
  • iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)

     本文转载至  http://blog.csdn.net/totogo2010/article/details/8637430

     

     
     
     

    1、介绍

    有的博友看了上篇博文 iOS界面-仿网易新闻左侧抽屉式交互 ,在微博里问,网易新闻里的内容和评论的拖拽如何实现,

    上面的UINavigation如何嵌进去。可能不少人有这样的需求,现在花了些时间把这两个效果做一下,

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

    评论按钮都是可以通过addsubview添加的。内容页和评论页的手势交互 实现的效果如下:



     
    图中的箭头是手势拖动的方向。

    2、跳转添加

    网易新闻的按钮都是可点击的,所以在这个例子中除了能通过手势操作。运行例子代码的时候注意下面的内容:
    我在代码中添加了一些button,下面图中红色框框里的区域是可点可跳转的:
    列表页第一条新闻可点,内容页左上角可点返回,评论页左上角也可点返回。其他部分都是图片。

    3、部分代码

    仿照customView的代码做了新闻内容的视图 DetailView,代码如下:

    --

    1. #import <UIKit/UIKit.h>  
    2.   
    3. @class CommentView;  
    4.   
    5. @interface DetailView : UIView  
    6. {  
    7.     CommentView *commentView;  
    8.     BOOL isPanComment;  
    9. }  
    10. - (id)initWithView:(UIView*)contentView parentView:(UIView*) parentView;  
    11.   
    12. @property (nonatomic, strong) UIView *parentView; //抽屉视图的父视图  
    13. @property (nonatomic, strong) UIView *contentView; //抽屉显示内容的视图  
    14. @end  
    1. //  
    2. //  DetailView.m  
    3. //  NeteaseNews  
    4. //  
    5. //  Created by rongfzh on 13-3-5.  
    6. //  Copyright (c) 2013年 rongfzh. All rights reserved.  
    7. //  
    8.   
    9. #import "DetailView.h"  
    10. #import "CommentView.h"  
    11. #import <QuartzCore/QuartzCore.h>  
    12.   
    13. @implementation DetailView  
    14.   
    15. - (id)initWithFrame:(CGRect)frame  
    16. {  
    17.     self = [super initWithFrame:frame];  
    18.     if (self) {  
    19.         // Initialization code  
    20.     }  
    21.     return self;  
    22. }  
    23.   
    24. - (id)initWithView:(UIView *)contentView parentView:(UIView *)parentView{  
    25.       
    26.     self = [super initWithFrame:CGRectMake(0,0,contentView.frame.size.width, contentView.frame.size.height)];  
    27.     if (self) {  
    28.         [self addSubview:contentView];  
    29.         UIPanGestureRecognizer *panGestureRecognier = [[UIPanGestureRecognizer alloc]  
    30.                                                        initWithTarget:self  
    31.                                                        action:@selector(HandlePan:)];  
    32.         [self addGestureRecognizer:panGestureRecognier];  
    33.           
    34.         UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];  
    35.         backBtn.frame = CGRectMake(0, 0, 80, 50);  
    36.         [backBtn addTarget:self  
    37.                     action:@selector(back:)  
    38.           forControlEvents:UIControlEventTouchUpInside];  
    39.         [self addSubview:backBtn];  
    40.   
    41.         UIImageView *imageCommentView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"comment.png"]];  
    42.         imageCommentView.frame  = CGRectMake(0, 0,  
    43.                                                     self.frame.size.width,  
    44.                                                     self.frame.size.height);  
    45.         commentView = [[CommentView alloc] initWithView:imageCommentView parentView:self];  
    46.         commentView.center = CGPointMake(480, 230);  
    47.         [[commentView layer] setShadowOffset:CGSizeMake(10, 10)];  
    48.         [[commentView layer] setShadowRadius:20];  
    49.         [[commentView layer] setShadowOpacity:1];  
    50.         [[commentView layer] setShadowColor:[UIColor blackColor].CGColor];  
    51.         [self addSubview:commentView];  
    52.         isPanComment = NO;  
    53.           
    54.     }  
    55.       
    56.     self.parentView = parentView;  
    57.     return self;  
    58. }  
    59.   
    60.   
    61. - (void)HandlePan:(UIPanGestureRecognizer*)panGestureRecognizer{  
    62.       
    63.     CGPoint translation = [panGestureRecognizer translationInView:self.parentView];  
    64.     float x = self.center.x + translation.x;  
    65.     if (x < 160) {  
    66.         x = 160;  
    67.     }  
    68.   
    69.     if(translation.x > 0){  
    70.         if (!isPanComment) {  
    71.             self.center = CGPointMake(x, 230);  
    72.         }  
    73.     }  
    74.       
    75.     if (translation.x < 0 && self.center.x > 160) {  
    76.         if (!isPanComment) {  
    77.             self.center = CGPointMake(x, 230);  
    78.         }  
    79.     }else if(translation.x < 0){  
    80.         isPanComment = YES;  
    81.         commentView.center = CGPointMake(commentView.center.x + translation.x, 230);  
    82.     }  
    83.   
    84.     if (commentView.center.x < 480 && translation.x > 0) {  
    85.         isPanComment = YES;  
    86.         commentView.center = CGPointMake(commentView.center.x + translation.x, 230);  
    87.     }  
    88.       
    89.     if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {  
    90.         if (commentView.center.x < 400) {  
    91.             [UIView animateWithDuration:0.4  
    92.                                   delay:0.1  
    93.                                 options:UIViewAnimationCurveEaseInOut  
    94.                              animations:^(void){  
    95.                                  commentView.center = CGPointMake(160, 230);  
    96.                              }completion:^(BOOL finish){  
    97.                                  isPanComment = NO;  
    98.                              }];  
    99.         }else{  
    100.             [UIView animateWithDuration:0.4  
    101.                                   delay:0.1  
    102.                                 options:UIViewAnimationCurveEaseInOut  
    103.                              animations:^(void){  
    104.                                  commentView.center = CGPointMake(480, 230);  
    105.                              }completion:^(BOOL finish){  
    106.                                  isPanComment = NO;  
    107.                              }];  
    108.         }  
    109.         if (self.center.x > 190) {  
    110.             [UIView animateWithDuration:0.4  
    111.                                   delay:0.1  
    112.                                 options:UIViewAnimationCurveEaseInOut  
    113.                              animations:^(void){  
    114.                                  self.center = CGPointMake(480, 230);  
    115.                              }completion:^(BOOL finish){  
    116.                                  [self.parentView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];  
    117.                              }];  
    118.         }else{  
    119.             [UIView animateWithDuration:0.4  
    120.                                   delay:0.1  
    121.                                 options:UIViewAnimationCurveEaseInOut  
    122.                              animations:^(void){  
    123.                                  self.center = CGPointMake(160, 230);  
    124.                              }completion:^(BOOL finish){  
    125.                                    
    126.                              }];  
    127.   
    128.         }  
    129.   
    130.     }  
    131.       
    132.     [panGestureRecognizer setTranslation:CGPointZero inView:self.parentView];  
    133.       
    134. }  
    135.   
    136. - (void) back:(id)sender{  
    137.     [UIView animateWithDuration:0.4  
    138.                           delay:0.1  
    139.                         options:UIViewAnimationCurveEaseInOut  
    140.                      animations:^(void){  
    141.                          self.center = CGPointMake(480, 230);  
    142.                      }completion:^(BOOL finish){  
    143.                          [self.parentView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];  
    144.                      }];  
    145. }  
    146.   
    147. /* 
    148. // Only override drawRect: if you perform custom drawing. 
    149. // An empty implementation adversely affects performance during animation. 
    150. - (void)drawRect:(CGRect)rect 
    151.     // Drawing code 
    152. */  
    153.   
    154. @end  

    3、评论页的view和内容页的代码差不多

    代码还有很多值得优化的地方,现在只是展示实现了功能,手势判断部分代码比较乱,只要掌握了手势的原来,代码可以自己根据需求来修改

    代码:

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

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

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

  • 相关阅读:
    h5页面 禁止缩放
    Mac 建立自己的服务器,支持PHP
    socket(孔、插座 --> 套接字) Socket通信 -- 了解
    核心动画
    popoverPresentationController UIPopoverController 使用方法详解(气泡控制器)
    plist中的中文数据
    Attempt to present <vc> on <vc> which is already presenting <vc>/(null)
    Xcode 8 : iOS xib is missing from working copy、iOS misssing file
    Xcode 中的黄色文件夹/蓝色文件夹
    iOS 容器 addChildViewController
  • 原文地址:https://www.cnblogs.com/Camier-myNiuer/p/3875126.html
Copyright © 2011-2022 走看看