iOS简单抽屉效果的实现方法
本文实例为大家分享了iOS实现简单抽屉效果的具体代码，供大家参考，具体内容如下
实现思路及步骤：
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
iOS实现简单的抽屉效果
说到抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,本文用CocoaPods引入PPRevealSideViewController,然后在我们的工程中以代码结合storyboard来做出抽屉效果. 一.在工程中用CocoaPods引入第三方插件PPRevealSideViewController. (1).在终端中搜索PPRevealSideViewController的版本 (2).在P
-
ios仿侧边抽屉效果实现代码
效果图如下 代码实现以及思路下面分析: 代码创建导航控制器 Appdelegate.m中 #import "AppDelegate.h" #import "ViewController.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
-
iOS开发之路--仿网易抽屉效果
最终效果图: MainStoryBoard示意图: BeyondViewController.h // // BeyondViewController.h // 19_抽屉效果_仿网易 // // Created by beyond on 14-8-1. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> #import "LeftTableViewControllerD
-
iOS实现侧拉栏抽屉效果
本文实例介绍了iOS实现侧拉栏抽屉效果的相关代码,分享给大家供大家参考,具体内容如下 需要导入第三方的类库如下: 抽屉效果所需第三方类库下载 效果:既可以两侧都实现抽屉效果也可只实现左侧栏或者右侧栏的抽屉效果 关于抽屉效果主要是AppDelegate的代码 AppDelegate.h文件代码: <span style="font-size:18px;"><span style="font-size:18px;">#import <UIK
-
iOS实现简单抽屉效果
抽屉效果 所谓抽屉效果就是三个视图,向右拖拽显示左边的视图,向左拖拽显示右边的视图,当拖拽大于屏幕的一半时最上面的视图会自动定位到一边,当点击左边或右边视图时会最上面视图会自动复位. 效果如图:三个视图(左边:浅灰色视图.右边:品红视图.主视图:黑色视图) 封装代码 DrawerViewController #import <UIKit/UIKit.h> @interface DrawerViewController : UIViewController @property (weak, no
-
iOS实现简易抽屉效果、双边抽屉效果
本文实例为大家分享了iOS实现抽屉效果的全部代码,供大家参考,具体内容如下 iOS实现简易抽屉效果,代码: @interface ViewController () { UIView* _leftView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from
-
IOS实现点击滑动抽屉效果
最近,看到好多Android上的抽屉效果,也忍不住想要自己写一个.在Android里面可以用SlidingDrawer,很方便的实现.IOS上面就只有自己写了.其实原理很简单就是 UIView 的移动,和一些手势的操作. 效果图: // // DrawerView.h // DrawerDemo // // Created by Zhouhaifeng on 12-3-27. // Copyright (c) 2012年 CJLU. All rights reserved. // #import
-
iOS实现左右拖动抽屉效果
本文实例介绍了iOS实现左右拖动抽屉效果,具体内容如下 利用了触摸事件滑动 touchesMoved: 来触发左右视图的出现和消失 利用loadView方法中添加view 在self.view载入前就把 左右中View都设置好frame 每一个方法都由单独的功能. #import "DarwViewController.h" @interface DarwViewController () @property (nonatomic, weak) UIView *leftView; @p
-
IOS中MMDrawerController第三方抽屉效果的基本使用示例
因为刚开年,所以最近公司比较闲,看到以前并不是我接手的项目中有这种抽屉效果的控制器,比较感兴趣,便对MMDrawerController研究起来.也方便自己忘记之后查阅,另外也希望对大家有所帮助(PS:以前都是上面一个导航栏,下面一个tabbar的项目居多,所以对这种抽屉控制器不是很了解). 1.首先,到GitHub上把MMDrawerController下下来,然后倒入到项目中.当然你用cocoapods倒入也行.看你心情呗O(∩_∩)O 2.接下来就在appdelegate中撸我们的代码了.
-
IOS中Swift仿QQ最新版抽屉侧滑和弹框视图
导读 简单用Swift写了一个抽屉效果,可以直接使用并且简单; 很多软件都运了抽屉效果,比如qq的左抽屉,英雄联盟,滴滴打车,和uber等等都运用了抽屉; 效果 iOS抽屉式结构实现分析 主要是在控制器的View上添加了两个View,一个左侧leftView和一个mainView.这里我们自定义一个DrawerViewController,init(mainVC: UIViewController, leftMenuVC: UIViewController, leftWidth: CGFloat