当前位置: 萬仟网 > IT编程>移动开发>IOS > iOS实现简单抽屉效果

iOS实现简单抽屉效果

2020年06月23日  | 萬仟网IT编程  | 我要评论

抽屉效果

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

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

封装代码

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 uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com