ios 抽屉效果实现

最新推荐文章于 2017-08-26 20:08:04 发布
最新推荐文章于 2017-08-26 20:08:04 发布
阅读量945 收藏
点赞数
分类专栏： ios UIKit & UI控件 ios动画系列/Quartz2D/事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PZ0605/article/details/45953635
版权

实现思路及步骤：

1，首先准备要滑动的view

#warning 第一步
- (void)addChildView
{
    // left
    UIView *leftView = [[UIView alloc] initWithFrame:self.view.bounds];
    leftView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:leftView];
    _leftView = leftView;
    
    // right
    UIView *rightView = [[UIView alloc] initWithFrame:self.view.bounds];
    rightView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:rightView];
    _rightView = rightView;
    
    // mainView
    UIView *mainView = [[UIView alloc] initWithFrame:self.view.bounds];
    mainView.backgroundColor = [UIColor redColor];
    [self.view addSubview:mainView];
    _mainView = mainView;
}
2,监听触摸事件，记录横轴方向的偏移量，有了偏移量就可以通过偏移量改动视图的位置 


#warning 第二布
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 获取UITouch对象
    UITouch *touch = [touches anyObject];
    
    // 获取当前点
    CGPoint currentPoint = [touch locationInView:self.view];
    
    // 获取上一个点
    CGPoint prePoint = [touch previousLocationInView:self.view];
    
    // x轴偏移量：当手指移动一点的时候，x偏移多少
    CGFloat offsetX = currentPoint.x - prePoint.x;
    
    // 设置当前主视图的frame
    _mainView.frame = [self getCurrentFrameWithOffsetX:offsetX];
    
    
    _isDraging = YES;
}
  如何实时监听一个对象的属性(只能监听对象，不能监听结构体)?kvo 

  // 1.监听  2 ，实现：observeValueForKeyPath 方法
  /**
     *  给_mainView添加一个观察者
     *
     *  KeyPath：监听frame这个属性
     *
     *  options：监听新值的改变
     */
    [_mainView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil]; //实时监听mainview的frame

 
// 当_mainView的frame属性改变的时候就会调用
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    NSLog(@"%@", NSStringFromCGRect(_mainView.frame));//当前的frame
    
    if (_mainView.frame.origin.x < 0) { // 主界面的x<0,往左移动
        // 显示右边
        _rightView.hidden = NO;
        // 隐藏左边
        _leftView.hidden = YES;
    }else if (_mainView.frame.origin.x > 0){ // 往右移动
        // 显示左边
        _rightView.hidden = YES;
        // 隐藏右边
        _leftView.hidden = NO;
        
    }
} 

当x轴偏移的时候，如何缩放高度？

当x偏移时，y轴缩小为: x的偏移量/

#define HMMaxY 60
// 当手指偏移一点，根据X轴的偏移量算出当前主视图的frame
- (CGRect)getCurrentFrameWithOffsetX:(CGFloat)offsetX
{
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
    
    // 获取y轴偏移量，手指每移动一点，y轴偏移多少
    CGFloat offsetY = offsetX * HMMaxY / screenW;//HMMaxY 缩放的最大Y 
    
    CGFloat scale = (screenH - 2 * offsetY) / screenH;//比例 
    
    if (_mainView.frame.origin.x < 0) { // 往左边滑动
        scale = (screenH + 2 * offsetY) / screenH;
    }
    
    // 获取之前的frame
    CGRect frame = _mainView.frame;
    frame.origin.x += offsetX;
    frame.size.height = frame.size.height *scale;
    frame.size.width = frame.size.width *scale;
    frame.origin.y = (screenH - frame.size.height) * 0.5;
    
    return frame;
}

定位： 

#define HMRTarget 250
#define HMLTarget -220
/*
 _mainView.frame.origin.x > screenW * 0.5 定位到右边
  CGRectGetMaxX(_mainView.frame) < screenW * 0.5 定位到左边 -220
 
 */
// 定位
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    
    // 复位
    if (_isDraging == NO && _mainView.frame.origin.x != 0) {
        [UIView animateWithDuration:0.25 animations:^{
            
            _mainView.frame = self.view.bounds;
        }];
    }
    
    
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    
    CGFloat target = 0;
    if (_mainView.frame.origin.x > screenW * 0.5) { // 定位到右边
        target = HMRTarget;
    }else if (CGRectGetMaxX(_mainView.frame) < screenW * 0.5) { // 定位到左边
        target = HMLTarget;
    }
    
    [UIView animateWithDuration:0.25 animations:^{
        
        if (target) { // 在需要定位左边或者右边
            
            // 获取x轴偏移量
            CGFloat offsetX = target - _mainView.frame.origin.x;
            
            // 设置当前主视图的frame
            _mainView.frame = [self getCurrentFrameWithOffsetX:offsetX];
            
        }else{ // 还原
            _mainView.frame = self.view.bounds;
        }
    }];
    
    _isDraging = NO;
    
}
全： 
@interface HMDrawViewController ()


@property (nonatomic, assign) BOOL isDraging;
@end

@implementation HMDrawViewController


- (void)viewDidLoad
{
    // UIViewController
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    // 1.添加子控件
    [self addChildView];
#warning 第三步 观察_mainView的frame改变
    // 2.监听
    /**
     *  给_mainView添加一个观察者
     *
     *  KeyPath：监听frame这个属性
     *
     *  options：监听新值的改变
     */
    [_mainView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
   
}

// 当_mainView的frame属性改变的时候就会调用
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    NSLog(@"%@", NSStringFromCGRect(_mainView.frame));
    
    if (_mainView.frame.origin.x < 0) { // 往左移动
        // 显示右边
        _rightView.hidden = NO;
        // 隐藏左边
        _leftView.hidden = YES;
    }else if (_mainView.frame.origin.x > 0){ // 往右移动
        // 显示左边
        _rightView.hidden = YES;
        // 隐藏右边
        _leftView.hidden = NO;
        
    }
}

#warning 第一步
- (void)addChildView
{
    // left
    UIView *leftView = [[UIView alloc] initWithFrame:self.view.bounds];
    leftView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:leftView];
    _leftView = leftView;
    
    // right
    UIView *rightView = [[UIView alloc] initWithFrame:self.view.bounds];
    rightView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:rightView];
    _rightView = rightView;
    
    // mainView
    UIView *mainView = [[UIView alloc] initWithFrame:self.view.bounds];
    mainView.backgroundColor = [UIColor redColor];
    [self.view addSubview:mainView];
    _mainView = mainView;
}

#warning 第二布
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 获取UITouch对象
    UITouch *touch = [touches anyObject];
    
    // 获取当前点
    CGPoint currentPoint = [touch locationInView:self.view];
    
    // 获取上一个点
    CGPoint prePoint = [touch previousLocationInView:self.view];
    
    // x轴偏移量：当手指移动一点的时候，x偏移多少
    CGFloat offsetX = currentPoint.x - prePoint.x;
    
    // 设置当前主视图的frame
    _mainView.frame = [self getCurrentFrameWithOffsetX:offsetX];
    
    
    _isDraging = YES;
}
#warning 第四步
#define HMMaxY 60
// 当手指偏移一点，根据X轴的偏移量算出当前主视图的frame
- (CGRect)getCurrentFrameWithOffsetX:(CGFloat)offsetX
{
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
    
    // 获取y轴偏移量，手指每移动一点，y轴偏移多少
    CGFloat offsetY = offsetX * HMMaxY / screenW;
    
    CGFloat scale = (screenH - 2 * offsetY) / screenH;
    
    if (_mainView.frame.origin.x < 0) { // 往左边滑动
        scale = (screenH + 2 * offsetY) / screenH;
    }
    
    // 获取之前的frame
    CGRect frame = _mainView.frame;
    frame.origin.x += offsetX;
    frame.size.height = frame.size.height *scale;
    frame.size.width = frame.size.width *scale;
    frame.origin.y = (screenH - frame.size.height) * 0.5;
    
    return frame;
}

#define HMRTarget 250
#define HMLTarget -220
/*
 _mainView.frame.origin.x > screenW * 0.5 定位到右边
  CGRectGetMaxX(_mainView.frame) < screenW * 0.5 定位到左边 -220
 
 */
// 定位
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    
    // 复位
    if (_isDraging == NO && _mainView.frame.origin.x != 0) {
        [UIView animateWithDuration:0.25 animations:^{
            
            _mainView.frame = self.view.bounds;
        }];
    }
    
    
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    
    CGFloat target = 0;
    if (_mainView.frame.origin.x > screenW * 0.5) { // 定位到右边
        target = HMRTarget;
    }else if (CGRectGetMaxX(_mainView.frame) < screenW * 0.5) { // 定位到左边
        target = HMLTarget;
    }
    
    [UIView animateWithDuration:0.25 animations:^{
        
        if (target) { // 在需要定位左边或者右边
            
            // 获取x轴偏移量
            CGFloat offsetX = target - _mainView.frame.origin.x;
            
            // 设置当前主视图的frame
            _mainView.frame = [self getCurrentFrameWithOffsetX:offsetX];
            
        }else{ // 还原
            _mainView.frame = self.view.bounds;
        }
    }];
    
    _isDraging = NO;
    
}



绿叶清风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS 抽屉菜单
04-06
作者invictus-lee，源码ISSliderBar，OS 抽屉菜单 SliderBar框架 Swift版本的实现， 具体样式和动画可以自己实现。
抽屉效果ios实现
06-04
抽屉效果ios实现
猫猫学IOS（二十六）UI之iOS抽屉效果小Demo
weixin_34148456的博客
04-27 78
猫猫分享，必须精品 素材代码地址：http://blog.csdn.net/u013357243/article/details/45305785 原创文章，欢迎转载。转载请注明：翟乃玉的博客 地址：http://blog.csdn.net/u013357243?viewmode=contents 先看效果 实现过程 第一步，把三个view设置好，还有...
iOS侧拉栏抽屉效果Demo
yjf123546的专栏
10-31 4581
项目研发过程中...常用的效果---侧拉栏抽屉效果...方便开发者使用
【IOS】实现IOS版的抽屉效果（点击，拖拽滑动）
12-23 721
转：http://blog.csdn.net/toss156/article/details/7400065 好像最近，看到好多Android上的抽屉效果，也忍不住想要自己写一个。在Android里面可以用SlidingDrawer，很方便的实现。IOS上面就只有自己写了。其实原理很简单就是 UIView 的移动，和一些手势的操作。 [cpp] view
iOS抽屉效果开发案例分享
09-02
本篇将详细介绍如何实现一个简单的iOS抽屉效果。 首先，我们需要创建三个UIView来模拟抽屉效果。这里声明了三个弱引用属性：`mainV`作为主视图，`leftV`和`rightV`分别代表左侧和右侧的抽屉视图。在`...
IOS实现点击滑动抽屉效果
01-21
最近，看到好多Android上的抽屉效果，也忍不住想要自己写一个。在Android里面可以用SlidingDrawer，很方便的实现。IOS上面就只有自己写了。其实原理很简单就是 UIView 的移动，和一些手势的操作。 效果图： // // ...
iOS实现抽屉效果
08-25
在iOS开发中，抽屉效果通常用于实现类似iOS系统设置应用侧滑显示更多选项的交互。这个效果使得用户可以通过从屏幕边缘向内滑动来显示或隐藏一个侧边栏，从而提供更多的操作空间或者导航选项。抽屉效果的实现主要涉及...
iOS实现简单的抽屉效果
09-02
在iOS应用开发中，抽屉效果通常用于实现侧滑菜单，这种效果能让用户从屏幕边缘滑动以显示或隐藏一个面板，类似于现实生活中抽屉的开合动作。本篇文章将详细讲解如何在iOS中实现这样的抽屉效果，特别是通过第三方库...
iOS实现简单抽屉效果
08-25
在本文中，我们将深入探讨如何在iOS平台上实现这样一个简单的抽屉效果。 抽屉效果通常包含三个主要的视图组件：左侧视图（Left View）、右侧视图（Right View）和主要内容视图（Main View）。当用户向左或向右滑动...
IOS抽屉效果的Demo
03-27
IOS 5.0 中实现的抽屉效果 的demo
MFC实现QQ程序的抽屉效果
12-28
用VC++ MFC 实现QQ程序的抽屉效果
MFC实现的仿QQ的抽屉效果
06-01
使用MFC制作的仿QQ的抽屉效果，很简单，希望能帮到大家
右侧抽屉效果
07-31
从右面拉出一半的抽屉效果，类似于网易新闻的menu
MFC 精仿QQ主界面（无闪烁移动，抽屉窗口,QQ好友列表）
04-13
VS2008精心仿制QQ界面,纯MFC自绘控件打造精美QQ界面，利用双缓存贴图技术实现无闪烁移，源码上传。如果有建议与问题，请与我联系。此作品仅作参考，大家一起共同交流学习。若有修改后的成品还请发给我一份，谢谢！
IOS 实现简单抽屉效果
专业划水20年
08-26 1012
// // CustomView.h // test04抽屉效果 // // Created by mouweng on 17/8/25. // Copyright © 2017年 mouweng. All rights reserved. // #import @interface CustomView : UIView { CGPoint openPointCenter;
iOS中的抽屉效果
Lu_Ca的博客
05-28 1234
最近项目中用到了抽屉效果，就是类似于qq侧滑的效果。顺便推荐一个个人感觉比较好的学习ios的地方，app4code这个地方。应该不少人都知道这个地方，有不少好玩的实用的demo。 首先，我引用了一个第三方的库YRSideViewController。 其实这个第三方的库还是蛮不错的，使用起来也比较方便。但，这个库总感觉稍微有点别扭。它需要你将主视图控制器设置成YRSideViewControl
iOS 抽屉效果
LayneCheung
08-21 304
抽屉效果： #import "DragerViewController.h"#define screenW [UIScreen mainScreen].bounds.size.width@interface DragerViewController ()@property (nonatomic, weak) UIView *leftV; @property (nonatomic, weak)
iOS最简单的抽屉效果
李红灯的博客
10-16 1766
1.storyboard的布局: 2.ViewController里的实现: #import "ViewController.h" @interface ViewController () //拖滑动的UIView的三个约束 @property (weak, nonatomic) IBOutlet NSLayoutConstraint *topconstant; @property (wea
ios h5实现手机微信震动效果
最新发布
05-24
在 iOS 上，H5 实现手机微信震动效果可以通过 JavaScript 调用系统 API 实现。具体方法如下： 1. 首先需要引入 `JavaScriptCore` 框架。 2. 在 JavaScript 中调用以下代码实现震动效果： ``` var jsc = new ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值