`
iaiai
  • 浏览: 2195672 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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



注:这个第三方库有个缺点,我主类继承的UITabBarController,没办法改成RNSwipeViewController,所以我没用这种
  • 大小: 37.9 KB
  • 大小: 26.6 KB
  • 大小: 24.8 KB
  • 大小: 23.6 KB
  • 大小: 156.2 KB
  • 大小: 23.1 KB
分享到:
评论

相关推荐

    iOS第三方开源类库 -- 视图切换 HMGLTransitions

    在iOS中,通常使用UINavigationController的push和pop操作或者UIViewController的present和dismiss方法进行视图控制器的切换。然而,系统默认的过渡动画可能无法满足所有设计需求,因此HMGLTransitions提供了自定义...

    swift-SwipeViewController一款支持选项卡滑动切换视图的iOS类库

    Swift-SwipeViewController是一款专为iOS平台设计的类库,它为开发者提供了选项卡滑动切换视图的功能。在iOS应用中,这样的功能常见于许多应用的底部导航栏,用户可以通过左右滑动在不同的内容区域之间切换,提升...

    4.如何使用.Net类库访问数据库?(Visual C++编程 源代码)

    4.如何使用.Net类库访问数据库?(Visual C++编程 源代码)4.如何使用.Net类库访问数据库?(Visual C++编程 源代码)4.如何使用.Net类库访问数据库?(Visual C++编程 源代码)4.如何使用.Net类库访问数据库?...

    edna安装包及使用的类库.rar

    edna安装包(客户端及服务器端安装包)及使用的类库(ezDnaapi.dll,EzDNAApiNet.dll,ezDnaServApi.dll)。可以安装服务器端添加测点与自己通过类库开发的程序进行接口调试。

    CI中使用其他类库解决方法参考

    ### CI中使用其他类库解决方法参考 #### 知识点概述 在CodeIgniter (CI) 框架中,开发人员经常会遇到需要引入和使用第三方类库的情况。例如,PEAR (PHP Extension and Application Repository) 是一个广泛使用的...

    NModbus类库使用总结

    NModbus类库是实现Modbus协议的常用工具,本文将对NModbus类库的使用进行总结,涵盖从基本概念到实际应用的各个方面。 1. 导入NModbus类库 首先,需要将NModbus类库导入工程中,并添加引用、命名空间。工程属性...

    小程序源码 辅助类库 fleep滑动切换tab(切换带动画).rar

    7. **布局和样式**: 切换tab的实现通常需要考虑布局设计,比如使用横向滚动视图,以及各tab的样式控制,如字体大小、颜色、选中态的改变等。这些细节都需要在源码中得到体现。 8. **性能优化**: 对于动画效果,性能...

    如何使用VS生成C#类库

    1. 如果你的类库打算供他人使用,可以将其打包成NuGet包,发布到NuGet.org或其他私有NuGet服务器,方便他人通过NuGet包管理器进行安装和更新。 2. 对于内部使用,可以将DLL文件和其对应的pdb(调试信息)文件一起...

    codeigniter 的模板类库及日志类库

    使用这个类库,开发者可以避免在控制器中编写大量关于视图拼接的代码,从而专注于业务逻辑。 接下来是日志类库。CodeIgniter的日志类库 (`Loginfo.php.zip`) 提供了记录应用程序中错误和事件的功能。这在调试、追踪...

    亲测可用 e4a 易安卓 BG悬浮窗类库 类库 易安卓悬浮窗类库 e4a悬浮窗

    你需要重写`onCreate()`方法,使用`WindowManager`和`LayoutParams`设置悬浮窗的位置、大小、透明度等属性,并添加视图。 4. **悬浮窗显示与隐藏**:类库可能提供了方便的方法来控制悬浮窗的显示和隐藏,例如`...

    单文档按钮的多视图切换

    6. **界面更新**:切换视图后,确保界面元素如按钮、菜单等的状态根据当前视图进行相应更新。 从提供的压缩包文件名"SwapDlg"来看,这可能是一个对话框类,用于实现视图切换的逻辑。在MFC中,`CDlg`类通常用于创建...

    基于MFC树形视图控件类库以及源代码

    这个压缩包包含的“基于MFC树形视图控件类库以及源代码”是开发人员用于构建这种控件的资源,可以帮助程序员快速地集成和自定义树形视图功能。 MFC是微软提供的一套C++类库,用于简化Windows应用程序的开发。它将...

    VB使用C#类库DEMO

    这个"VB使用C#类库DEMO"就是一个很好的实例,它展示了如何在Visual Basic (VB)项目中利用C#编写的类库。下面将详细介绍这个示例中的关键知识点。 首先,C#是一种面向对象的编程语言,以其现代化的语法和强大的.NET...

    一个使用C#链接数据库类库

    一个使用C#链接数据库类库 可以在C#程序中进行有效的数据链接时使用

    mebius类库1.02

    本类库为开源免费代码,您可以任意使用其中的内容,也可以对本类库进行任意的修改或扩充,同时在您使用的过程中遇到的任何问题可以发送邮件给我们,我们会提供一切尽可能的帮助。您也可以将您拓展或修改后的类文件...

    基于C#编写的modbus tcp类库

    标题中的“基于C#编写的modbus tcp类库”指的是一个使用C#编程语言开发的软件组件,专门用于实现Modbus TCP通信协议。Modbus是一种广泛使用的工业通信协议,允许不同设备之间进行数据交换,特别是在自动化系统中。而...

    C#控件委托类库

    这个“C#控件委托类库”显然是一个自定义开发的类库,目的是为了方便在进行GUI(图形用户界面)编程时对控件的操作进行抽象和简化。下面,我们将深入探讨委托、C#类库以及它们如何与控件交互。 首先,让我们了解...

    ok类库合集.rar

    "ok类库合集.rar" 是一个集合了多个实用类库的压缩文件,主要针对的是IT开发中的前端或UI设计部分。这些类库都以".elb"为扩展名,可能是...在实际开发中,根据项目需求选择合适的类库进行集成,可以大大简化工作流程。

    java类库java类库.doc

    本文档主要介绍 Java 类库的结构和使用方法,涵盖了 Java 中一些常用的包和类,例如 java.lang、java.awt、java.io 等。同时,也介绍了 String 类和 StringBuffer 类的使用方法。 Java 类库是 Java API 的一部分,...

Global site tag (gtag.js) - Google Analytics