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

时间:2022-09-22 18:09:27
 本文转载至  http://blog.csdn.net/totogo2010/article/details/8637430
 
 
 

1、介绍

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

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

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

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

iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)
 
图中的箭头是手势拖动的方向。

2、跳转添加

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

3、部分代码

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

--

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

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

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

代码:

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

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

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

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

  1. Android应用经典主界面框架之二&colon;仿网易新闻client、CSDN client &lpar;Fragment ViewPager&rpar;

    另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所 ...

  2. iOS仿网易新闻栏目拖动重排添加删除效果

    仿网易新闻栏目选择页面的基本效果,今天抽了点时间教大家如何实现UICollectionView拖动的效果! 其实实现起来并不复杂,这里只是基本的功能,没有实现细节上的修改,连UI都是丑丑的样子,随手画 ...

  3. Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端

    转载请注明出处:http://blog.csdn.net/xiaanming/article/details/9971721 大家都知道Android的ActionBar是在3.0以上才有的,那么在3 ...

  4. 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 (转)

    原博客地址  :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...

  5. Android Studio精彩案例&lpar;一&rpar;《ActionBar和 ViewPager版仿网易新闻客户端》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 为了能更好的分享高质量的文章,所以开设了此专栏.文章代码都以Android Studio亲测运行,读者朋友可在后面直接下载源码.该专栏 ...

  6. 动态权限&lt&semi;二&gt&semi;之淘宝、京东、网易新闻 权限申请交互设计对比分析

    移动智能设备的快速普及,给生活带来巨大的精彩,但是智能设备上用户的信息数据很多,隐私数据也非常多,各种各样的app可能通过各种方式在悄悄的收集用户数据,而用户的隐私就变得耐人寻味了.比如之前的可以无限 ...

  7. Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻clientTab标签

    之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻clientTab标签的功能,ActionBarSherlock是在3.0下面的机器支持Ac ...

  8. Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

    转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherlock ...

  9. 仿网易新闻 ViewPager 实现图片自动轮播

    新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...

随机推荐

  1. Linux NTP校时

    1.安装客户端(root权限运行) apt-get install ntpdate 2.修改配置文件:“/etc/default/ntpdate”,     NTPSERVERS="ntp. ...

  2. 记一次synchronized锁字符串引发的坑兼再谈Java字符串

    问题描述 业务有一个需求,我把问题描述一下: 通过代理IP访问国外某网站N,每个IP对应一个固定的网站N的COOKIE,COOKIE有失效时间.并发下,取IP是有一定策略的,取到IP之后拿IP对应的C ...

  3. git之reset图解

    https://blog.csdn.net/longintchar/article/details/81843048 1.三棵树. 此时如果我们运行 git status,会发现没有任何改动,因为现在 ...

  4. TypeScript 之 模块

    https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Modules.html 外部模块简写 外部模块简写:declare ...

  5. WPF自定义控件的自定义属性绑定后不更新问题

    原文:WPF自定义控件的自定义属性绑定后不更新问题 需要在绑定时设置属性变更触发 UpdateSourceTrigger=PropertyChanged 例如: <Border CornerRa ...

  6. LVS&lpar;Linus Virtual Server&rpar;:三种负载均衡方式比较&plus;另三种负载均衡方式

    还有个姊妹篇也可以参考这个文章:六大Web负载均衡原理与实现 什么是LVS (Linux Virtual Server)?   首先简单介绍一下LVS (Linux Virtual Server)到底 ...

  7. IntelliJ - idea15&period;0&period;2 破解方法

    由于idea 15版本更换了注册方式,只能通过联网激活,所以现在不能通过简单的通用注册码进行离线注册了, 虽然可以继续用14版本,但是有新版本却无法尝试让强迫症也是异常抓狂. 通过度娘我找到了一个破解 ...

  8. ARM汇编语言

    ---恢复内容开始--- arm汇编语言 汇编语言是一种程序设计语言,arm处理器是一种16/32位的嵌入式RISC微处理器.一开始我把这混为一谈了.ARM汇编的特点:汇编语言,又叫助记符语言. 1) ...

  9. CCF CSP 201612-2 工资计算

    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201612-2 工资计算 问题描述 小明的公司每个月给小明发工资,而小明拿到的工资为交完个人所 ...

  10. Container With Most Water leetcode java

    题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...