iOS界面-仿网易新闻左侧抽屉式交互

1、介绍 

   用过网易新闻客户端的同学都会发现,网易新闻向左滑动时,左侧的导航栏会跟着拖动出来,新闻内容列表会拉到最右侧。像一个抽屉拉出来一样。很酷。除了网易新闻,现在好多应用都采用了这样的交互。

对手势识别不熟悉的请参考上篇: iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)

这个交互效果主要用到两个手势,一个是pan拖拽,一个是tap点击。拖拽可以把抽屉拉出来,再推回去。点击可以把抽屉推回去。

 

效果如下:

    

那么这个效果如何实现呢?

2、实现思路和步骤

思路:从实现的效果分析出来,可以这样实现:

这个交互是由两个View组成,左侧导航的View在下面,显示内容列表的View在上面,内容列表的View覆盖住了导航View,拖动内容列表的View向右,这时候导航View就显示出来了。

实现步骤:

 

  1. 自定义一个View,它做为显示内容的View。给这个View添加两个手势,pan拖拽,tap点击。
  2. 当拖拽这个View时,让view.center向右移动,这样就能看到内容View向右移动了。
  3. 定义一个抽屉打开停止时的x值为:OPENCENTERX,这个是内容View最终停止的位置
  4. 当内容View越过中间靠右的一个x值时,view自动向右动画移动到右边位置停下。
  5. 当内容View在打开的状态下,点击内容View,利用UIView动画把内容View.center移动回到中间。
  6. 设置内容View的阴影效果

 

3、代码实现

新建CustomView继承UIView

 

#import <UIKit/UIKit.h>

@interface CustomView : UIView
{
    CGPoint openPointCenter;
    CGPoint closePointCenter;
}
-(id)initWithView:(UIView*)contentview parentView:(UIView*) parentview;

@property (nonatomic, strong) UIView *parentView; //抽屉视图的父视图
@property (nonatomic, strong) UIView *contenView; //抽屉显示内容的视图
@end

 

两个手势在Custom里实现,并在初始化的时候传入内容View和父视图。

#import "CustomView.h"

#define OPENCENTERX 220.0
#define DIVIDWIDTH 70.0 //OPENCENTERX 对应确认是否打开或关闭的分界线。

@implementation CustomView

- (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.contenView = contentview;
        self.parentView = parentview;
        
        [self addSubview:contentview];
        UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]
                                                        initWithTarget:self
                                                        action:@selector(handlePan:)];
        [self addGestureRecognizer:panGestureRecognizer];
        
        UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]
                                                        initWithTarget:self
                                                        action:@selector(handleTap:)];
        
        [self addGestureRecognizer:tapGestureRecognizer];
        openPointCenter = CGPointMake(self.parentView.center.x + OPENCENTERX,
                                      self.parentView.center.y);
        
        NSLog(@"openPointCenter x:%f, openPointCenter y:%f",
              openPointCenter.x,
              openPointCenter.y);

        
    }
    
    
    
    return self;
}

-(void) handlePan:(UIPanGestureRecognizer*) recognizer
{
    CGPoint translation = [recognizer translationInView:self.parentView];
    
    float x = self.center.x + translation.x;
    NSLog(@"translation x:%f", translation.x);
 
    if (x < self.parentView.center.x) {
        x = self.parentView.center.x;
    }
    self.center = CGPointMake(x, openPointCenter.y);
    
    if(recognizer.state == UIGestureRecognizerStateEnded)
    {
            [UIView animateWithDuration:0.75
                                  delay:0.01
                                options:UIViewAnimationCurveEaseInOut
                             animations:^(void)
            {
                if (x > openPointCenter.x -  DIVIDWIDTH) {
                    self.center = openPointCenter;
                }else{
                    self.center = CGPointMake(openPointCenter.x - OPENCENTERX,
                                              openPointCenter.y);
                    
                }
                
            }completion:^(BOOL isFinish){
                
            }];
        }
    
    [recognizer setTranslation:CGPointZero inView:self.parentView];
}

-(void) handleTap:(UITapGestureRecognizer*) recognizer
{
    [UIView animateWithDuration:0.75
                          delay:0.01
                        options:UIViewAnimationTransitionCurlUp animations:^(void){
                            self.center = CGPointMake(openPointCenter.x - OPENCENTERX,
                                                      openPointCenter.y);
    }completion:nil];
    
}
@end

4、viewController的调用

为了实现自定义视图的阴影,添加需要使用QuartzCore框架。在项目里添加QuartzCore框架后引入头文件。

 

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    CGRect rect = CGRectMake(0, 0,
                             self.view.frame.size.width,
                             self.view.frame.size.height);
    NSLog(@"w:%f, h:%f", rect.size.width, rect.size.height);
    UIImageView *imageleft = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"left.png"]];
    imageleft.frame = rect;
    [self.view addSubview:imageleft];
    
    UIView *contentView = [[UIView alloc] initWithFrame:rect];
    
    UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"index.png"]];
    imageView.frame = rect;
    [contentView addSubview:imageView];

    CustomView *customView = [[CustomView alloc] initWithView:contentView
                                                   parentView:self.view];
    [[customView layer] setShadowOffset:CGSizeMake(10, 10)];
    [[customView layer] setShadowRadius:20];
    [[customView layer] setShadowOpacity:1];
    [[customView layer] setShadowColor:[UIColor blackColor].CGColor];
    
    [self.view addSubview:customView];

}

 

为了看起来好看,我弄了两张截图了,一个是内容视图,一个是左侧导航栏的视图,然后作为背景图放到上面的两个view的里。

所以不要点里面的内容,点不了滴,那是图片而已。这里只是演示抽屉的效果。

最后,网易新闻的这个交互能从右边拉出来的效果,原理差不多,可能需要多一个view。还有交互时左侧栏里还有由明变暗,忽大忽小的效果。这些以后有时间再实现。

CSDN下载:代码下载

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

 

posted @ 2013-02-28 15:38 容芳志专栏 阅读(802) 评论(0) 编辑
摘要: 1、UIGestureRecognizer介绍手势识别在iOS上非常重要,手势操作移动设备的重要特征,极大的增加了移动设备使用便捷性。iOS系统在3.2以后,为方便开发这使用一些常用的手势,提供了UIGestureRecognizer类。手势识别UIGestureRecognizer类是个抽象类,下面的子类是具体的手势,开发这可以直接使用这些手势识别。UITapGestureRecognizerUIPinchGestureRecognizerUIRotationGestureRecognizerUISwipeGestureRecognizerUIPanGestureRecognizerUILo 阅读全文
posted @ 2013-02-27 22:49 容芳志专栏 阅读(2441) 评论(0) 编辑
摘要: 参考地址:http://www.axelbrz.com.ar/?mod=iphone-png-images-normalizer牛人写了一个python脚本恢复iOS程序中的png图片。脚本下载地址:ipin.py使用方法:1、把ipin.py放到要恢复的.png图片一个目录里2、打开终端,cd到此目录。3、输入 python ipin.py 4、根据提示信息输入 Y,回车。这样就能把图片还原到可以查看了。#---# iPIN - iPhone PNG Images Normalizer v1.0# Copyright (C) 2007## Author:# Axel E. Brz. 阅读全文
posted @ 2013-02-25 15:17 容芳志专栏 阅读(176) 评论(0) 编辑
摘要: 前面介绍了Core Animation基础知识,还有CALayer的简单使用,最终还是有要动画的滴,这里列出几个动画效果,参考下能加深对Core Animation的认识和理解1、把图片移到右下角变小透明使用CAAnimationGroup叠加动画效果,就是下面按钮《把图片移到右下角变小透明》描述的效果: 、上面三个图是动画的三个状态,实现代码如下:- (void)viewDidLoad{ [super viewDidLoad]; self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sn. 阅读全文
posted @ 2013-02-23 23:21 容芳志专栏 阅读(407) 评论(0) 编辑
摘要: 上篇Core Animation之基础介绍提到CALayer的重要性,那咱们就试试CALayer如何使用。1、什么是CALayerCALayer是个简单的类,它是用来在屏幕上显示内容展示的矩形区域。靠,这是不描述UIView的话吗?其实他们是有区别的。每个UIView都有一个根CALayer,UIView在这个layer上描绘东西。那怎么访问这个layer呢,很简单:CALayer *myLayer = myView.layer;CALayer有这么些属性,可以设置改变层的显示:层的大小和位置层的背景颜色层的内容(图像,core graphics)层的的圆角,半径层的阴影设置等等....2、开 阅读全文
posted @ 2013-02-23 22:04 容芳志专栏 阅读(147) 评论(0) 编辑
摘要: Core Animation可以翻译为核心动画,它为图形渲染和动画提供了基础。使用核心动画,你只需要设置一些参数比如起点和终点,剩下的帧核心动画为你自动完成。核心动画使用硬件加速,不用消耗cpu资源。其实平时咱们开发的iOS应用都在有意无意的使用了核心动画。动画不会替代View,而是和View一起提供更好的性能。Core Animation通过缓存view上的内容到bitmap,这样bitmap就可以直接在图形硬件上操作。从而提高了性能。核心动画所在的位置:1、关于层类Layer Classes是core animation的基础。Layer Classes提供了一个抽象的概念,这个概念对于. 阅读全文
posted @ 2013-02-23 11:46 容芳志专栏 阅读(212) 评论(0) 编辑
摘要: 收到CSDN发来的《App Store创赢艺术:Apple开发的赚钱机密》这本书后,大概的通读了大部分内容。还是有不少收获的。关于书名这本书的英文全名叫:<The Art of the App Store: The Business of Apple Development>。书名后面的翻译有意思:赚钱机密。个人感觉翻译的不太准确,无可厚非,这些词很吸引眼球,“赚钱”,“机密”都是国人很热衷的词,好像某些高人在偷偷的告诉你股票交易的机密和内幕一样,让人热血沸腾。其实人家书里说的是Business,是这么一摊生意。书纸的质量书的纸质没的说,很好,里面游戏案例都采用彩色打印,对得起这个 阅读全文
posted @ 2013-02-22 11:30 容芳志专栏 阅读(134) 评论(0) 编辑
摘要: 动画效果提供了状态或页面转换时流畅的用户体验,在iOS系统中,咱们不需要自己编写绘制动画的代码,Core Animation提供了丰富的api来实现你需要的动画效果。 UIKit只用UIView来展示动画,动画支持UIView下面的这些属性改变:frameboundscentertransformalphabackgroundColorcontentStretch1、commitAnimations方式使用UIView动画- (void)viewDidLoad{ [super viewDidLoad]; UIButton *button = [UIButton... 阅读全文
posted @ 2013-01-15 10:37 容芳志专栏 阅读(155) 评论(0) 编辑
摘要: 第七课的主要内容:View Controller Lifecycle ImageView ScrollView WebView1、View Controller Lifecycle creation通过 一个segue或故事版的instantiateViewControllerWithIdentifer:实例化。一般情况不要自己定义UIViewController的初始化方法。awakeFromNib 可选的,awakeFromNib是view的方法,有很多方法可以替代awakeFromNib放置。awakeFromNib很早期就被调用了,那时候outlet还没连起来。那时候viewContr 阅读全文
posted @ 2013-01-07 14:34 容芳志专栏 阅读(503) 评论(0) 编辑
摘要: 继上篇iOS学习之iOS5.0以上 使用新浪微博开放平台OAuth过后,新浪微博授权弹出的网页又有调整,中间还有过瘫痪情况。如果按上篇做出来的授权页面就成这样了:第一:网页页面变大了,第二:没有了取消按钮。根据这个情况在sina weibo SDK里做了写调整调整:增加一个关闭按钮,弹出窗口大小。在WBAuthorizeWebView.m文件的方法:bounceOutAnimationStopped里添加按钮:UIButton *closeButton = [UIButton buttonWithType:UIButtonTypeCustom]; [closeButton setFra... 阅读全文
posted @ 2012-12-25 22:05 容芳志专栏 阅读(288) 评论(0) 编辑
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值