博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【转】iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)
阅读量:6227 次
发布时间:2019-06-21

本文共 7016 字,大约阅读时间需要 23 分钟。

原文地址:http://blog.csdn.net/totogo2010/article/details/8637430

1、介绍

有的博友看了上篇博文 ,在微博里问,网易新闻里的内容和评论的拖拽如何实现,

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

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

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

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

2、跳转添加

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

3、部分代码

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

--

1 #import 
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 
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.4101 delay:0.1102 options:UIViewAnimationCurveEaseInOut103 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.4111 delay:0.1112 options:UIViewAnimationCurveEaseInOut113 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.4120 delay:0.1121 options:UIViewAnimationCurveEaseInOut122 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.4138 delay:0.1139 options:UIViewAnimationCurveEaseInOut140 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)rect151 {152 // Drawing code153 }154 */155 156 @end

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

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

代码:

Github:

CSDN资源:

转载于:https://www.cnblogs.com/maying/archive/2013/04/02/2995957.html

你可能感兴趣的文章
HTML5学习笔记(二十三):DOM应用之动态加载脚本
查看>>
Java 中的悲观锁和乐观锁的实现
查看>>
XAMPP permissions on Mac OS X
查看>>
ffmpeg
查看>>
openGL一些概念02
查看>>
Java应用集群下的定时任务处理方案(mysql)
查看>>
Android开发经验小知识点
查看>>
su: cannot set user id: Resource temporarily unavailable【转】
查看>>
STL中的nth_element()方法的使用
查看>>
c语言循环单链表
查看>>
Android 自己主动化測试(3)&lt;monkeyrunner&gt; 依据ID查找对象&amp;touch&amp;type (python)...
查看>>
IDEA中Ctrl+Shift+F快捷键无效的解决方式
查看>>
git 笔记
查看>>
C# SignalR 即时通信
查看>>
Android之——自己主动挂断电话的实现
查看>>
springcloud-01-介绍
查看>>
sqlite自己主动更新数据库
查看>>
管理中的外行与内行
查看>>
【5】JVM-垃圾收集器
查看>>
音频变调技术
查看>>