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 实现了自动 ...
随机推荐
-
Linux NTP校时
1.安装客户端(root权限运行) apt-get install ntpdate 2.修改配置文件:“/etc/default/ntpdate”, NTPSERVERS="ntp. ...
-
记一次synchronized锁字符串引发的坑兼再谈Java字符串
问题描述 业务有一个需求,我把问题描述一下: 通过代理IP访问国外某网站N,每个IP对应一个固定的网站N的COOKIE,COOKIE有失效时间.并发下,取IP是有一定策略的,取到IP之后拿IP对应的C ...
-
git之reset图解
https://blog.csdn.net/longintchar/article/details/81843048 1.三棵树. 此时如果我们运行 git status,会发现没有任何改动,因为现在 ...
-
TypeScript 之 模块
https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Modules.html 外部模块简写 外部模块简写:declare ...
-
WPF自定义控件的自定义属性绑定后不更新问题
原文:WPF自定义控件的自定义属性绑定后不更新问题 需要在绑定时设置属性变更触发 UpdateSourceTrigger=PropertyChanged 例如: <Border CornerRa ...
-
LVS(Linus Virtual Server):三种负载均衡方式比较+另三种负载均衡方式
还有个姊妹篇也可以参考这个文章:六大Web负载均衡原理与实现 什么是LVS (Linux Virtual Server)? 首先简单介绍一下LVS (Linux Virtual Server)到底 ...
-
IntelliJ - idea15.0.2 破解方法
由于idea 15版本更换了注册方式,只能通过联网激活,所以现在不能通过简单的通用注册码进行离线注册了, 虽然可以继续用14版本,但是有新版本却无法尝试让强迫症也是异常抓狂. 通过度娘我找到了一个破解 ...
-
ARM汇编语言
---恢复内容开始--- arm汇编语言 汇编语言是一种程序设计语言,arm处理器是一种16/32位的嵌入式RISC微处理器.一开始我把这混为一谈了.ARM汇编的特点:汇编语言,又叫助记符语言. 1) ...
-
CCF CSP 201612-2 工资计算
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201612-2 工资计算 问题描述 小明的公司每个月给小明发工资,而小明拿到的工资为交完个人所 ...
-
Container With Most Water leetcode java
题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...