使用RNSwipeViewController類庫進行視圖切換

        如今很多應用已經不再局限於點擊按鈕觸發事件來進行視圖之間切換，為迎合給予使用者更好體驗，體現iOS系統極佳使用者體驗，使用手勢來進行各個視圖之間切換，使用者至於一個大拇指在螢幕中央就可瀏覽到很多資訊；

關於 RNSwipeViewController: https://github.com/rnystrom/RNSwipeViewController

RNSwipeViewController是別人已經寫好的一個ViewController容器，剩下我們要做的就是把自己的視圖容器放到這個容器中進行管理。

首先學習 RNSwipeViewController裡面的Demo

1.建立一個Single View Application工程，next,勾選 Use Storyboards,Use Automatic  Reference Counting

2.將RNSwipeViewController拖入建立到工程，添加QuartzCore.framework

3.建立四個類CenterViewController、LeftViewController、RightViewController、BottomViewController,繼承UIViewController類

4.開啟StoryBoard,從庫裡拖入四個ViewController視圖控制器到StoryBoard裡面，選中一個視圖控制器設定類名和Storyboard ID，其他三個類似

，

5.在ViewController.h將加入#import "RNSwipeViewController.h"並將繼承類改為RNSwipeViewController，在ViewDidLoad方法中

- (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 imageNamed:@"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 imageNamed:@"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 ];                     }}

源碼:https://github.com/XFZLDXF/XFSwipeView.git

原創部落格歡迎轉載分享，請註明出處http://blog.csdn.net/duxinfeng2010