現在不少應用已經再也不侷限於點擊按鈕觸發事件來進行視圖之間切換,爲迎合給予用戶更好體驗,體現iOS系統極佳用戶體驗,使用手勢來進行各個視圖之間切換,用戶至於一個大拇指在屏幕中央就可瀏覽到不少信息;html
關於 RNSwipeViewController: https://github.com/rnystrom/RNSwipeViewControllergit
RNSwipeViewController是別人已經寫好的一個ViewController容器,剩下咱們要作的就是把本身的視圖容器放到這個容器中進行管理。github
首先學習 RNSwipeViewController裏面的Demoide
1.建立一個Single View Application工程,next,勾選 Use Storyboards,Use Automatic Reference Counting學習
2.將RNSwipeViewController拖入新建到工程,添加QuartzCore.framework測試
3.新建四個類CenterViewController、LeftViewController、RightViewController、BottomViewController,繼承UIViewController類spa
4.打開StoryBoard,從庫裏拖入四個ViewController視圖控制器到StoryBoard裏面,選中一個視圖控制器設置類名和Storyboard ID,其餘三個相似.net
,code
5.在ViewController.h將加入#import "RNSwipeViewController.h"並將繼承類改成RNSwipeViewController,在ViewDidLoad方法中orm
- (void)viewDidLoad { [super viewDidLoad]; CenterViewController *centerView = [self.storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"]; UINavigationController *centerNav = [[UINavigationController alloc] initWithRootViewController:centerView]; centerView.title =@"Center"; self.centerViewController = centerNav; self.leftViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]; self.rightViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]; self.bottomViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"BottomViewController"]; }
如此咱們就完成三個視圖之間手勢交互,首先出現的視圖做爲主視圖,其餘試圖再是在它上面進行運動,手指向左滑右側視圖出現,向右滑動出現左視圖,向上滑動出現底部視圖出現
.
.
日常咱們在構建一個帶有XIB視圖控制類的時候,初始化通常這樣
CenterViewController *centerVC = [[CenterViewController alloc] initWithNibName:@"CenterViewController" bundle:nil];
可是在StoryBoard中,視圖的Storyboard ID 成了這是視圖的惟一標示,再給一個視圖所屬類時,設定好該視圖的Storyboard ID,進行初始化時CenterViewController *centerView = [self.storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"];
這個類庫中也提供按鈕點擊進行視圖交互方法,同時也設置視圖顯示寬度的屬性,在類庫實現的裏面視圖寬度有默認值
_leftVisibleWidth = 200.f;
_rightVisibleWidth = 200.f;
_bottomVisibleHeight = 300.0f;
再此咱們能夠在本身類裏修改這個屬性,根據本身需求,做圖下設置
ViewController.m
- (void)viewDidLoad { [super viewDidLoad]; CenterViewController *centerView = [self.storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"]; UINavigationController *centerNav = [[UINavigationController alloc] initWithRootViewController:centerView]; centerView.title =@"Center"; self.centerViewController = centerNav; self.leftViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]; self.leftVisibleWidth = 100; self.rightViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]; self.rightVisibleWidth = self.view.frame.size.width; self.bottomViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"BottomViewController"]; }
咱們再給導航欄上添加兩個按鈕,在CenterViewController類中,包含#import "UIViewController+RNSwipeViewController.h"
- (void)viewDidLoad { [super viewDidLoad]; UIButton *leftBtn = [UIButton buttonWithType:UIButtonTypeCustom]; leftBtn.frame = CGRectMake(0, 0, 44, 44); [leftBtn setImage:[UIImage p_w_picpathNamed:@"left.png"] forState:UIControlStateNormal]; [leftBtn addTarget:self action:@selector(toggleLeft) forControlEvents:UIControlEventTouchUpInside]; UIBarButtonItem *leftBar = [[UIBarButtonItem alloc] initWithCustomView:leftBtn]; self.navigationItem.leftBarButtonItem = leftBar ; UIButton *rightBtn = [UIButton buttonWithType:UIButtonTypeCustom]; rightBtn.frame = CGRectMake(self.view.frame.size.width-44, 0,44 , 44); [rightBtn setImage:[UIImage p_w_picpathNamed:@"right.png"] forState:UIControlStateNormal]; [rightBtn addTarget:self action:@selector(toggleRight) forControlEvents:UIControlEventTouchUpInside]; UIBarButtonItem *rightBar = [[UIBarButtonItem alloc] initWithCustomView:rightBtn]; self.navigationItem.rightBarButtonItem = rightBar; ; }
接着連個按鈕事件,爲了顯示明顯咱們能夠設置一下三個視圖背景顏色
-(void)toggleLeft { [self.swipeController showLeft]; } -(void)toggleRight { [self.swipeController showRight]; }
RNSwipeViewController有一個協議方法,能夠監聽當前視圖顯示百分比(0~100)
RNSwipeViewController have a protocol method, can monitor the current view shows percentage (0 ~ 100)
#import <UIKit/UIKit.h> #import "RNRevealViewControllerProtocol.h" @interface LeftViewController : UIViewController<RNRevealViewControllerProtocol> @end
協議方法,當左側視圖徹底顯示時彈出一個alertView
-(void)changedPercentReveal:(NSInteger)percent { if (percent == 100) { UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:@"這是一個測試" delegate:self cancelButtonTitle:@"OK" otherButtonTitles: nil]; [alert show ]; } }