广告
返回顶部
首页 > 资讯 > 移动开发 >iOS实现简单抽屉效果
  • 670
分享到

iOS实现简单抽屉效果

iOS抽屉 2022-05-21 15:05:07 670人浏览 安东尼
摘要

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

抽屉效果

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

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

封装代码

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

使用封装

将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

实现效果:

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

--结束END--

本文标题: iOS实现简单抽屉效果

本文链接: https://www.lsjlt.com/news/30390.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS实现简单抽屉效果
    抽屉效果 所谓抽屉效果就是三个视图,向右拖拽显示左边的视图,向左拖拽显示右边的视图,当拖拽大于屏幕的一半时最上面的视图会自动定位到一边,当点击左边或右边视图时会最上面视图会自动复位。...
    99+
    2022-05-21
    iOS 抽屉
  • iOS开发实现简单抽屉效果
    本文实例为大家分享了iOS实现简单抽屉效果的具体代码,供大家参考,具体内容如下 抽屉效果的原理:其实就是把两个子控制器添加到一个RootViewController中,将子控制器的v...
    99+
    2022-11-13
    iOS 抽屉
  • iOS简单抽屉效果的实现方法
    本文实例为大家分享了iOS实现简单抽屉效果的具体代码,供大家参考,具体内容如下 实现思路及步骤: 1、首先准备要滑动的view #warning 第一步 - (void)addChi...
    99+
    2022-11-13
    iOS 抽屉
  • iOS实现简易的抽屉效果
    本文实例为大家分享了iOS实现简易的抽屉效果的具体代码,供大家参考,具体内容如下 1.添加需要实现抽屉效果的三个视图,这里需要注意主视图需要放在最后添加 // 左边视图  ... /...
    99+
    2022-11-13
    iOS 抽屉
  • iOS实现抽屉效果
    本文实例为大家分享了iOS实现抽屉效果的具体代码,供大家参考,具体内容如下 抽屉效果: #import "DragerViewController.h" #define sc...
    99+
    2022-05-18
    iOS 抽屉
  • iOS开发实现抽屉效果
    iOS开发之如何实现“抽屉”效果,供大家参考,具体内容如下 现在基本上每一个App中左划都会出现一个页面,基本上都是只占主页面的一部分,效果就像是一个抽屉一样...
    99+
    2022-11-13
    iOS 抽屉
  • flutter实现底部抽屉效果
    本文实例为大家分享了flutter实现底部抽屉效果的具体代码,供大家参考,具体内容如下 安卓:showModalBottomSheetIOS:showCupertinoModalPo...
    99+
    2022-11-13
  • Android SlidingDrawer 抽屉效果的实现
    SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容。它可以垂直或水平滑动,它有俩个View组成,其一是可以拖动的handle,其二是隐藏内容的V...
    99+
    2022-06-06
    抽屉 Android
  • WPF实现抽屉菜单效果的示例代码
    WPF 实现抽屉菜单 框架使用大于等于.NET40;Visual Studio 2022;项目使用 MIT 开源许可协议;更多效果可以通过GitHub[1]|码云...
    99+
    2022-11-13
    WPF 抽屉菜单 WPF 菜单
  • Android实现右边抽屉Drawerlayout效果
    侧边栏是Android应用中很常见的一个界面效果(抽屉效果)。而利用DrawerLayout实现右侧栏是相对简单的。而且这个控件自带滑动效果,十分方便。 DrawerLay...
    99+
    2022-06-06
    drawerlayout Android
  • Android实现自定义滑动式抽屉效果菜单
    在Andoird使用Android自带的那些组件,像SlidingDrawer和DrawerLayout都是抽屉效果的菜单,但是在项目很多要实现的功能都收到Android这些自...
    99+
    2022-06-06
    自定义 菜单 抽屉 Android
  • Android 抽屉效果的导航菜单实现代码实例
    看了很多应用,觉得这种侧滑的抽屉效果的菜单很好。 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而且感觉能放很多东西。 关于实现,...
    99+
    2022-06-06
    导航菜单 菜单 抽屉 Android
  • iOS实现简单分栏效果
    本文实例为大家分享了iOS实现简单分栏效果的具体代码,供大家参考,具体内容如下 直接贴代码喽 GMSubfieldViiew.h #import <UIKit/UIKit.h&...
    99+
    2022-11-13
  • flutter如何实现底部抽屉效果
    小编给大家分享一下flutter如何实现底部抽屉效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下安卓:showModalBottomSheetIOS...
    99+
    2023-06-29
  • Android开发之DrawerLayout实现抽屉效果
    谷歌官方推出了一种侧滑菜单的实现方式(抽屉效果),即 DrawerLayout,这个类是在Support Library里的,需要加上android-support-v4.jar这个包。使用注意点DrawerLayout的第一个子元素必须是...
    99+
    2023-05-31
    android drawerlayout roi
  • Android DrawerLayout实现抽屉效果实例代码
     官网:https://developer.android.com/training/implementing-navigation/nav-drawer.html ...
    99+
    2022-06-06
    drawerlayout 抽屉 Android
  • iOS简单实现轮播图效果
    本文实例为大家分享了iOS简单实现轮播图效果的具体代码,供大家参考,具体内容如下 平常在开发过程中,首页的轮播图总是少不了,轮播图我们都知道肯定是要使用 UIScrollView ,...
    99+
    2022-11-13
    iOS 轮播图
  • FlutterUI实现侧拉抽屉菜单
    在移动开发中,我们可以通过底部导航栏、标签页或是侧边抽屉菜单来实现导航。这是在小屏幕上可以充分利用空间。我们设计不仅要实用而且要有趣,这样才算得上好的 UI 设计。这件我们在 Sca...
    99+
    2022-11-13
  • Android开发实现抽屉菜单
    本文实例为大家分享了Android开发实现抽屉菜单的具体代码,供大家参考,具体内容如下 实现效果 点击菜单图表即可进入抽屉 代码实现 1、打开app/build.gradle文件...
    99+
    2022-11-12
  • Android应用中怎么实现一个抽屉效果
    这篇文章将为大家详细讲解有关Android应用中怎么实现一个抽屉效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。首先在layout 下设置xml布局文件<&#63;xml v...
    99+
    2023-05-31
    android roi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作