使用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 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 ];
                                                                
                                                               
    }
}


源碼下載地址:https://github.com/XFZLDXF/XFSwipeView.git

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章