iOS實現簡單抽屜效果

2020-07-26 01:29:27

字體：大中小

來源：轉載

供稿：網友

抽屜效果

所謂抽屜效果就是三個視圖，向右拖拽顯示左邊的視圖，向左拖拽顯示右邊的視圖，當拖拽大于屏幕的一半時最上面的視圖會自動定位到一邊，當點擊左邊或右邊視圖時會最上面視圖會自動復位。

效果如圖：三個視圖（左邊：淺灰色視圖、右邊：品紅視圖、主視圖：黑色視圖）

封裝代碼

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

實現效果：