iOS实现简单抽屉效果

2023-07-31 20:05:04 169

抽屉效果

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

效果如图：三个视图（左边：浅灰色视图、右边：品红视图、主视图：黑色视图）

封装代码

DrawerViewController

#import
@interfaceDrawerViewController:UIViewController

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

@end

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

#defineScreenWidth[UIScreenmainScreen].bounds.size.width
#defineScreenHeight[UIScreenmainScreen].bounds.size.height
#defineMaxOffsetY100
#defineMaxOffsetX([UIScreenmainScreen].bounds.size.width-100)

@implementationDrawerViewController
-(void)viewDidLoad{
[superviewDidLoad];

//1.初始化视图
[selfsetup];

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

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

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

-(void)panGesture:(UIPanGestureRecognizer*)pan{
CGPointoffsetPoint=[pantranslationInView:self.view];
self.mainView.frame=[selfframeWithOffset:offsetPoint.x];

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

//如果拖拽结束，自动定位
CGFloattargetOffsetX=0;
if(pan.state==UIGestureRecognizerStateEnded){
if(self.mainView.frame.origin.x>=ScreenWidth*0.5){//右侧
targetOffsetX=MaxOffsetX;
}elseif(CGRectGetMaxX(self.mainView.frame)
使用封装
1.将DrawerViewController类拖入到工程中，并继承该类

2.分别创建LeftViewController、RightViewController、MainViewController

3.将每个视图对应的view添加到对应的视图上，并成为当前控制器的子控制器


第一步：继承DrawerViewController
#import
#import"DrawerViewController.h"
@interfaceViewController:DrawerViewController

@end
第二步：分别创建LeftViewController、RightViewController、MainViewController

第三步：为leftView、rightView、mainView添加子视图，并将每天控制器作为当前控制器的子控制器
#import"ViewController.h"
#import"LeftViewController.h"
#import"RightViewController.h"
#import"MainViewController.h"

@implementationViewController

-(void)viewDidLoad{
[superviewDidLoad];

//Main
MainViewController*mainViewController=[[MainViewControlleralloc]init];
mainViewController.view.frame=self.view.bounds;
mainViewController.view.backgroundColor=[UIColorbrownColor];
[self.mainViewaddSubview:mainViewController.view];
[selfaddChildViewController:mainViewController];

//Left
LeftViewController*leftViewController=[[LeftViewControlleralloc]init];
leftViewController.view.frame=self.view.bounds;
leftViewController.view.backgroundColor=[UIColorpurpleColor];
[self.leftViewaddSubview:leftViewController.view];
[selfaddChildViewController:leftViewController];

//Right
RightViewController*rightViewController=[[RightViewControlleralloc]init];
rightViewController.view.frame=self.view.bounds;
rightViewController.view.backgroundColor=[UIColorcyanColor];
[self.rightViewaddSubview:rightViewController.view];
[selfaddChildViewController:rightViewController];
}
@end
实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

iOS实现简单抽屉效果

热门推荐

随机推荐