使用RNSwipeViewController类库进行视图切换

发布时间:2020-03-25 04:25:38 作者:新风作浪
来源:网络 阅读:846

       如今很多应用已经不再局限于点击按钮触发事件来进行视图之间切换,为迎合给予用户更好体验,体现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,其他三个类似


使用RNSwipeViewController类库进行视图切换

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"];
                                                                                                            
}

如此我们就完成三个视图之间手势交互,首先出现的视图作为主视图,其他试图再是在它上面进行运动,手指向左滑右侧视图出现,向右滑动出现左视图,向上滑动出现底部视图出现

使用RNSwipeViewController类库进行视图切换.使用RNSwipeViewController类库进行视图切换.使用RNSwipeViewController类库进行视图切换

平常我们在构建一个带有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类库进行视图切换使用RNSwipeViewController类库进行视图切换


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

推荐阅读:
  1. java类库的使用方法
  2. Android怎么实现加载状态视图切换效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

试图切换 rnrevealviewcontroll roller

上一篇:关于表空间offline小知识点

下一篇:VTK 绘制等值线

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》