iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)
1、介绍
有的博友看了上篇博文iOS界面-仿网易新闻左侧抽屉式交互 ,在微博里问,网易新闻里的内容和评论的拖拽如何实现,
上面的UINavigation如何嵌进去。可能不少人有这样的需求,现在花了些时间把这两个效果做一下,
和大家分享交流。思路和上篇基本差不多,但是没有用到UINavigation,其实在我看来上面的返回、
评论按钮都是可以通过addsubview添加的。内容页和评论页的手势交互 实现的效果如下:


2、跳转添加


3、部分代码
--
- #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
iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)的更多相关文章
- Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)
另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所 ...
- iOS仿网易新闻栏目拖动重排添加删除效果
仿网易新闻栏目选择页面的基本效果,今天抽了点时间教大家如何实现UICollectionView拖动的效果! 其实实现起来并不复杂,这里只是基本的功能,没有实现细节上的修改,连UI都是丑丑的样子,随手画 ...
- Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/9971721 大家都知道Android的ActionBar是在3.0以上才有的,那么在3 ...
- 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 (转)
原博客地址 :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...
- Android Studio精彩案例(一)《ActionBar和 ViewPager版仿网易新闻客户端》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 为了能更好的分享高质量的文章,所以开设了此专栏.文章代码都以Android Studio亲测运行,读者朋友可在后面直接下载源码.该专栏 ...
- 动态权限<二>之淘宝、京东、网易新闻 权限申请交互设计对比分析
移动智能设备的快速普及,给生活带来巨大的精彩,但是智能设备上用户的信息数据很多,隐私数据也非常多,各种各样的app可能通过各种方式在悄悄的收集用户数据,而用户的隐私就变得耐人寻味了.比如之前的可以无限 ...
- Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻clientTab标签
之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻clientTab标签的功能,ActionBarSherlock是在3.0下面的机器支持Ac ...
- Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherlock ...
- 仿网易新闻 ViewPager 实现图片自动轮播
新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...
随机推荐
- java编码,乱码问题详解
一.常见的编码格式 1.ASCII 基础编码,英文和西欧字符. 用一个字节的低7位表示,一共128个. 0~13是控制字符如换行.回车.删除等,32~126是打印字符,键盘输入. 2.IOS-8859 ...
- HDU 1999 不可摸数【类似筛法求真因子和】
不可摸数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- HDU5877Weak Pair
Weak Pair Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 26 ...
- 源码分析——迁移学习Inception V3网络重训练实现图片分类
1. 前言 近些年来,随着以卷积神经网络(CNN)为代表的深度学习在图像识别领域的突破,越来越多的图像识别算法不断涌现.在去年,我们初步成功尝试了图像识别在测试领域的应用:将网站样式错乱问题.无线领域 ...
- c++语言虚函数实现多态的原理(更新版)
自上一个帖子之间跳过了一篇总结性的帖子,之后再发,今天主要研究了c++语言当中虚函数对多态的实现,感叹于c++设计者的精妙绝伦 c++中虚函数表的作用主要是实现了多态的机制.首先先解释一下多态的概念, ...
- 10.1综合强化刷题 Day3 afternoon
竞赛时间:????年??月??日??:??-??:?? 题目名称 a b c 名称 a b c 输入 a.in b.in c.in 输出 a.out b.out c.out 每个测试点时限 1s 1s ...
- codevs——3372 选学霸(背包)
题目等级 : 大师 Master 时间限制: 1 s 空间限制: 128000 KB 题解 题目描述 Description 老师想从N名学生中选M人当学霸,但有K对人实力相当,如果实 ...
- Flexible and Economical UTF-8 Decoder
http://bjoern.hoehrmann.de/utf-8/decoder/dfa/
- su su- sudo
su的作用是变更为其它使用者的身份,超级用户除外,需要键入该使用者的密码. linux su 命令 建议大家切换用户的时候 使用 su - root 这样,否则可能发现某些命令执行不了 关于su .s ...
- Autolayout 01
Auto Layout Concepts auto layout的基本概念是constraint(约束).表示了你interface中的layout元素.例如,你可以创建一个约束来指定元素的宽度或者距 ...