导航：首页 > 网络技术 >

使用RNSwipeViewController类库进行视图切换

发表于：2024-11-24 作者：热门IT资讯网编辑

编辑最后更新 2024年11月24日，如今很多应用已经不再局限于点击按钮触发事件来进行视图之间切换，为迎合给予用户更好体验，体现iOS系统极佳用户体验，使用手势来进行各个视图之间切换，用户至于一个大拇指在屏幕中央就可浏览到很多信息；关于

如今很多应用已经不再局限于点击按钮触发事件来进行视图之间切换，为迎合给予用户更好体验，体现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 #import "RNRevealViewControllerProtocol.h"@interface LeftViewController : UIViewController@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

很赞哦！

使用RNSwipeViewController类库进行视图切换

相关文章