iOS實(shí)現(xiàn)簡單抽屜效果
抽屜效果
所謂抽屜效果就是三個視圖,向右拖拽顯示左邊的視圖,向左拖拽顯示右邊的視圖,當(dāng)拖拽大于屏幕的一半時最上面的視圖會自動定位到一邊,當(dāng)點(diǎn)擊左邊或右邊視圖時會最上面視圖會自動復(fù)位。
效果如圖:三個視圖(左邊:淺灰色視圖、右邊:品紅視圖、主視圖:黑色視圖)
封裝代碼
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復(fù)位 [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; } // 如果拖拽結(jié)束,自動定位 CGFloat targetOffsetX = 0; if (pan.state == UIGestureRecognizerStateEnded) { if (self.mainView.frame.origin.x >= ScreenWidth * 0.5) { // 右側(cè) targetOffsetX = MaxOffsetX; } else if (CGRectGetMaxX(self.mainView.frame) < ScreenWidth * 0.5){ // 左側(cè) targetOffsetX = -MaxOffsetX; } // 計(jì)算出當(dāng)前位置距離目標(biāo)位置所需要的偏移距離 CGFloat offsetX = targetOffsetX - self.mainView.frame.origin.x; // 滑動不到屏幕一般時仍然顯示mainView(self.view.bounds) 否則自動定位到左側(cè)或右側(cè) 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.分別創(chuàng)建LeftViewController、RightViewController、MainViewController
3.將每個視圖對應(yīng)的view添加到對應(yīng)的視圖上,并成為當(dāng)前控制器的子控制器
第一步:繼承DrawerViewController
#import <UIKit/UIKit.h> #import "DrawerViewController.h" @interface ViewController : DrawerViewController @end
第二步:分別創(chuàng)建LeftViewController、RightViewController、MainViewController
第三步:為leftView、rightView、mainView 添加子視圖,并將每天控制器作為當(dāng)前控制器的子控制器
#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
實(shí)現(xiàn)效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS點(diǎn)擊推送消息跳到應(yīng)用指定頁面方法
現(xiàn)在的推送用的越來越頻繁,幾乎每個應(yīng)用都開始用到了。這篇文章主要介紹了iOS點(diǎn)擊推送消息跳到應(yīng)用指定頁面方法,有需要的可以了解一下。2016-11-11iOS 實(shí)現(xiàn)簡單的加載等待動畫示例(思路與實(shí)現(xiàn))
本篇文章主要介紹了iOS 實(shí)現(xiàn)簡單的加載等待動畫示例(思路與實(shí)現(xiàn)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05