iOS实现简单抽屉效果

 更新时间:2020年02月22日 08:14:25   作者:vbirdbest  
这篇文章主要为大家详细介绍了iOS实现简单抽屉效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

抽屉效果

所谓抽屉效果就是三个视图,向右拖拽显示左边的视图,向左拖拽显示右边的视图,当拖拽大于屏幕的一半时最上面的视图会自动定位到一边,当点击左边或右边视图时会最上面视图会自动复位。

效果如图:三个视图(左边:浅灰色视图、右边:品红视图、主视图:黑色视图)

封装代码

DrawerViewController

#import <UIKit/UIKit.h>
@interface DrawerViewController : UIViewController

@property (weak, nonatomic, readonly) UIView *leftView;
@property (weak, nonatomic, readonly) UIView *rightView;
@property (weak, nonatomic, readonly) UIView *mainView;

@end

// -------------------------------------------------------
#import "DrawerViewController.h"

#define ScreenWidth [UIScreen mainScreen].bounds.size.width
#define ScreenHeight [UIScreen mainScreen].bounds.size.height
#define MaxOffsetY 100
#define MaxOffsetX ([UIScreen mainScreen].bounds.size.width - 100)

@implementation DrawerViewController
- (void)viewDidLoad {
 [super viewDidLoad];

 // 1. 初始化视图
 [self setup];

 // 2. 给mainView添加拖动手势
 UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGesture:)];
 [self.mainView addGestureRecognizer:panGestureRecognizer];

 // 3. 给self.view添加一个单击手势
 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGesture:)];
 [self.view addGestureRecognizer:tap];
}

- (void)tapGesture:(UITapGestureRecognizer *)tap {
 // mainView复位
 [UIView animateWithDuration:0.2 animations:^{
  self.mainView.frame = self.view.bounds;
 }];
}

- (void)panGesture:(UIPanGestureRecognizer *)pan {
 CGPoint offsetPoint = [pan translationInView:self.view];
 self.mainView.frame = [self frameWithOffset:offsetPoint.x];

 if (self.mainView.frame.origin.x > 0) {
  // → 右移(显示leftView)
  self.rightView.hidden = YES;
 } else if (self.mainView.frame.origin.x < 0) {
  // ← 左移(显示rightView)
  self.rightView.hidden = NO;
 }

 // 如果拖拽结束,自动定位
 CGFloat targetOffsetX = 0;
 if (pan.state == UIGestureRecognizerStateEnded) {
  if (self.mainView.frame.origin.x >= ScreenWidth * 0.5) { // 右侧
   targetOffsetX = MaxOffsetX;
  } else if (CGRectGetMaxX(self.mainView.frame) < ScreenWidth * 0.5){ // 左侧
   targetOffsetX = -MaxOffsetX;
  }

  // 计算出当前位置距离目标位置所需要的偏移距离
  CGFloat offsetX = targetOffsetX - self.mainView.frame.origin.x;

  // 滑动不到屏幕一般时仍然显示mainView(self.view.bounds) 否则自动定位到左侧或右侧
  CGRect mainFrame = targetOffsetX == 0 ? self.view.bounds : [self frameWithOffset:offsetX];
  [UIView animateWithDuration:0.2 animations:^{
   self.mainView.frame = mainFrame;
  }];
 }

 [pan setTranslation:CGPointZero inView:self.view];
}

- (CGRect)frameWithOffset:(CGFloat)offsetX {
 CGRect newFrame = self.mainView.frame;
 newFrame.origin.x += offsetX;  // x


 CGFloat offsetY = self.mainView.frame.origin.x * MaxOffsetY / ScreenWidth;
 newFrame.origin.y = fabs(offsetY); // y

 CGFloat offsetHeight = ScreenHeight - (newFrame.origin.y * 2);
 newFrame.size.height = offsetHeight; // height

 return newFrame;
}

- (void)setup {
 UIView *leftView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
 //leftView.backgroundColor = [UIColor lightGrayColor];
 _leftView = leftView;
 [self.view addSubview:leftView];

 UIView *rightView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
 //rightView.backgroundColor = [UIColor magentaColor];
 _rightView = rightView;
 [self.view addSubview:rightView];

 UIView *mainView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
 //mainView.backgroundColor = [UIColor blackColor];
 _mainView = mainView;
 [self.view addSubview:mainView];
}

@end

使用封装

1.将DrawerViewController类拖入到工程中,并继承该类
2.分别创建LeftViewController、RightViewController、MainViewController
3.将每个视图对应的view添加到对应的视图上,并成为当前控制器的子控制器

第一步:继承DrawerViewController

#import <UIKit/UIKit.h>
#import "DrawerViewController.h"
@interface ViewController : DrawerViewController

@end

第二步:分别创建LeftViewController、RightViewController、MainViewController
第三步:为leftView、rightView、mainView 添加子视图,并将每天控制器作为当前控制器的子控制器

#import "ViewController.h"
#import "LeftViewController.h"
#import "RightViewController.h"
#import "MainViewController.h"

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];

 // Main
 MainViewController *mainViewController = [[MainViewController alloc] init];
 mainViewController.view.frame = self.view.bounds;
 mainViewController.view.backgroundColor = [UIColor brownColor];
 [self.mainView addSubview:mainViewController.view];
 [self addChildViewController:mainViewController];

 // Left
 LeftViewController *leftViewController = [[LeftViewController alloc] init];
 leftViewController.view.frame = self.view.bounds;
 leftViewController.view.backgroundColor = [UIColor purpleColor];
 [self.leftView addSubview:leftViewController.view];
 [self addChildViewController:leftViewController];

 // Right
 RightViewController *rightViewController = [[RightViewController alloc] init];
 rightViewController.view.frame = self.view.bounds;
 rightViewController.view.backgroundColor = [UIColor cyanColor];
 [self.rightView addSubview:rightViewController.view];
 [self addChildViewController:rightViewController];
}
@end

实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • iOS实现秒杀活动倒计时

    iOS实现秒杀活动倒计时

    这篇文章主要为大家详细介绍了iOS实现秒杀活动倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • iOS中几种定时器的实现小结

    iOS中几种定时器的实现小结

    这篇文章主要介绍了iOS中几种定时器的实现小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • iOS实现日历翻页动画

    iOS实现日历翻页动画

    本文的内容主要是在IOS中实现日历翻页的动画,界面简单但效果很好,以后可以运用到app中,下面一起来看看。
    2016-08-08
  • ios实现底部PopupWindow的示例代码(底部弹出菜单)

    ios实现底部PopupWindow的示例代码(底部弹出菜单)

    这篇文章主要介绍了ios实现底部PopupWindow的示例代码(底部弹出菜单),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • iOS常用组件之高效切圆角的方法汇总

    iOS常用组件之高效切圆角的方法汇总

    最近在研究切圆角的方法,也找了下网上的资料,所以下面这篇文章主要给大家总结介绍了关于iOS常用组件之高效切圆角的一些方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • IOS 指纹识别详解及实例代码

    IOS 指纹识别详解及实例代码

    这篇文章主要介绍了IOS 指纹识别详解的相关资料,并附实例代码,需要的朋友可以参考下
    2016-11-11
  • 分享一个关于Storyboard 跳转与传值

    分享一个关于Storyboard 跳转与传值

    近日不忙,给大家分享一个关于storyboard跳转传值的相关知识,感兴趣的朋友一起看看吧
    2015-12-12
  • IOS实现左右两个TableView联动效果

    IOS实现左右两个TableView联动效果

    在我们日常开发IOS中,经常见到两个tableview的联动,滑动一侧tableview,另一侧tableview跟着滑动,其实实现起来比较简单,只是需要搞清楚他们之间的区别和联系,下面一起来看看如何实现。
    2016-08-08
  • iOS App开发中的UIPageControl分页控件使用小结

    iOS App开发中的UIPageControl分页控件使用小结

    UIPageControl分页控件的例子简单来说即是我们平时翻动多个桌面页时及底部带有的圆点页码标注,这里我们来看一下iOS App开发中的UIPageControl分页控件使用小结,需要的朋友可以参考下
    2016-06-06
  • 详解iOS中Button按钮的状态和点击事件

    详解iOS中Button按钮的状态和点击事件

    这篇文章先是给大家介绍iOS中Button按钮的状态,而后又详细介绍了iOS中按钮点击事件处理方式,本文介绍的很详细,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-09-09

最新评论