广

IOS开发

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    实例讲解iOS中的UIPageViewController翻页视图控制器

    2018-04-08 09:04:42 次阅读 稿源:互联网
    零七广告

    一、引言

    UIPageViewController是iOS中少见的动画视图控制器之一,通过它既可以创建类似UIScrollView与UIPageControl结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图。

    UIPageViewController在iOS 5 SDK中首次引入,它使得开发者可以使用这个ViewController创建分页视图。在iOS 6中,这个类有了更新,支持滚动过渡效果。使用Page View,用户可以方便的通过手势在多个页面之间导航。UIPageViewController并不仅仅用于引导页,很多游戏,例如:愤怒的小鸟,就是用Page View来展示关卡选择的页面,还有有关书籍的应用,用这个类来显示书的页面。
    UIPageViewController是个高度可配置的类,你可以进行如下配置:

    • 分页的方向——水平或垂直
    • 翻页的样式——书卷翻页或者滑动翻页
    • 书脊位置——只有书卷翻页样式有效
    • 页面间距——只有滑动翻页样式有效,用来定义页面间距(inter-page spacing)

    UIPageViewController类似一个视图容器,其中每个具体的视图由各自的ViewController进行维护管理,UIPageViewController只进行协调与动画布置。下图可以很好的展现出UIPageViewControlelr的使用结构:

    上图中,UIPageViewControllerDataSource协议为UIPageViewController提供数据支持,DataSource协议提供的数据来自各个ViewContoller自行维护,UIPageViewControllerDelegate中的回调可以对翻页动作,屏幕旋转动作等进行监听。UIPageViewController把从DataSource中获取到的视图数据渲染给View用于当前视图控制器的展示。

    为了演示,我们会一起创建一个简单的app。当然,我们不会演示所有的UIPageViewController的配置细节,我们会演示到使用滑动翻页样式来创建一个引导页。不过别担心,有了对UIPageViewController的基本理解,我相信你能够去探索其他的特性。

    开始吧!

    二、创建一个UIPageViewController

    首先新建一个类作为翻页视图控制器中具体每一页视图的控制器,使其继承于UIViewController:

    ModelViewController.h

    #import <UIKit/UIKit.h>
    @interface ModelViewController : UIViewController
    +(ModelViewController *)creatWithIndex:(int)index;
    @property(nonatomic,strong)UILabel * indexLabel;
    @end
    ModelViewController.m

    #import "ModelViewController.h"
    @interface ModelViewController ()
    @end
    @implementation ModelViewController
    +(ModelViewController *)creatWithIndex:(int)index{
        ModelViewController * con = [[ModelViewController alloc]init];
        con.indexLabel = [[UILabel alloc]initWithFrame:CGRectMake(110, 200, 100, 30)];
        con.indexLabel.text = [NSString stringWithFormat:@"第%d页",index];
        [con.view addSubview:con.indexLabel];
        return con;
    }
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        self.view.backgroundColor = [UIColor redColor];
    }
    @end
    在工程模板自带的ViewController.m文件中实现如下代码:

    #import "ViewController.h"
    #import "ModelViewController.h"
    //遵守协议
    @interface ViewController ()<UIPageViewControllerDataSource,UIPageViewControllerDelegate>
    {
        //翻页视图控制器对象
        UIPageViewController * _pageViewControl;
        //数据源数组
        NSMutableArray * _dataArray;
    }
    @end

    @implementation ViewController

    - (void)viewDidLoad {
        [super viewDidLoad];
        //进行初始化
        _pageViewControl = [[UIPageViewController alloc]initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:@{UIPageViewControllerOptionSpineLocationKey:@0,UIPageViewControllerOptionInterPageSpacingKey:@10}];
        self.view.backgroundColor = [UIColor greenColor];
        //设置翻页视图的尺寸
        _pageViewControl.view.bounds=self.view.bounds;
        //设置数据源与代理
        _pageViewControl.dataSource=self;
        _pageViewControl.delegate=self;
        //创建初始界面
        ModelViewController * model = [ModelViewController creatWithIndex:1];
        //设置初始界面
        [_pageViewControl setViewControllers:@[model] direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:nil];
        //设置是否双面展示
        _pageViewControl.doubleSided = NO;
        _dataArray = [[NSMutableArray alloc]init];
        [_dataArray addObject:model];
        [self.view addSubview:_pageViewControl.view];
    }
    //翻页控制器进行向前翻页动作 这个数据源方法返回的视图控制器为要显示视图的视图控制器
    - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController{
        int index = (int)[_dataArray indexOfObject:viewController];
        if (index==0) {
            return nil;
        }else{
            return _dataArray[index-1];
        }
    }
    //翻页控制器进行向后翻页动作 这个数据源方法返回的视图控制器为要显示视图的视图控制器
    - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController{
        int index = (int)[_dataArray indexOfObject:viewController];
        if (index==9) {
            return nil;
        }else{
            if (_dataArray.count-1>=(index+1)) {
                return _dataArray[index+1];
            }else{
                ModelViewController * model = [ModelViewController creatWithIndex:index+2];
                [_dataArray addObject:model];
                return model;
            }
        }
    }
    //屏幕旋转触发的代理方法
    - (UIPageViewControllerSpineLocation) pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{
        return UIPageViewControllerSpineLocationMin;
    }
    //设置分页控制器的分页数
    - (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
       
        return 10;
    }
    //设置初始的分页点
    - (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController{
        return 0;
    }
    @end
    上面创建了最简单的翻页视图控制器示例,效果如下图:

    三、UIPageViewController中方法使用解析

    //创建翻页视图控制器对象
    - (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary<NSString *, id> *)options;
    上面方法用于创建视图控制器对象,其中UIPageViewControllerTransitionStyle参数设置翻页控制器的风格,枚举如下:

    typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) {
        UIPageViewControllerTransitionStylePageCurl = 0, //类似于书本翻页效果
        UIPageViewControllerTransitionStyleScroll = 1 // 类似于ScrollView的滑动效果
    };
    如果设置为UIPageViewControllerTransitionStyleCurl,翻页效果如下图所示:

    上面初始化方法中的UIPageViewControllerNavigationOrientation属性设置翻页的方向,枚举如下:

    typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) {
        UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻页
        UIPageViewControllerNavigationOrientationVertical = 1//竖直翻页
    };
    options参数用于设置翻页视图控制器的配置字典,其可以设置的配置键值如下:

    //这个键需要设置为UIPageViewControllerOptionSpineLocationKey枚举值对应的NSNumber对象 设置翻页控制器的书轴 后面会介绍
    NSString * const UIPageViewControllerOptionSpineLocationKey;
    //这个键需要设置为NSNumber类型 设置每页视图的间距 用于滚动视图风格的
    NSString * const UIPageViewControllerOptionInterPageSpacingKey;
    下面是UIPageViewController的一些常用属性与方法:

    //设置数据源
    @property (nullable, nonatomic, weak) id <UIPageViewControllerDelegate> delegate;
    //设置代理
    @property (nullable, nonatomic, weak) id <UIPageViewControllerDataSource> dataSource;
    //获取翻页风格
    @property (nonatomic, readonly) UIPageViewControllerTransitionStyle transitionStyle;
    //获取翻页方向
    @property (nonatomic, readonly) UIPageViewControllerNavigationOrientation navigationOrientation;
    //获取书轴类型
    @property (nonatomic, readonly) UIPageViewControllerSpineLocation spineLocation;
    //设置是否双面显示
    @property (nonatomic, getter=isDoubleSided) BOOL doubleSided;
    //设置要显示的视图控制器
    - (void)setViewControllers:(nullable NSArray<UIViewController *> *)viewControllers direction:(UIPageViewControllerNavigationDirection)direction animated:(BOOL)animated completion:(void (^ __nullable)(BOOL finished))completion;
    上面只有spineLocation属性有些难于理解,其枚举如下:

    typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) {
        //对于SCrollView类型的滑动效果 没有书轴 会返回下面这个枚举值
        UIPageViewControllerSpineLocationNone = 0,
        //以左边或者上边为轴进行翻转 界面同一时间只显示一个View
        UIPageViewControllerSpineLocationMin = 1, 
        //以中间为轴进行翻转 界面同时可以显示两个View
        UIPageViewControllerSpineLocationMid = 2,
        //以下边或者右边为轴进行翻转 界面同一时间只显示一个View
        UIPageViewControllerSpineLocationMax = 3  
    };
    将上面的示例代码修改几个地方如下:

    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        _pageViewControl = [[UIPageViewController alloc]initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl navigationOrientation:UIPageViewControllerNavigationOrientationVertical options:@{UIPageViewControllerOptionSpineLocationKey:@2,UIPageViewControllerOptionInterPageSpacingKey:@10}];
        self.view.backgroundColor = [UIColor greenColor];
        _pageViewControl.view.bounds=self.view.bounds;
        _pageViewControl.dataSource=self;
        _pageViewControl.delegate=self;
        ModelViewController * model = [ModelViewController creatWithIndex:1];
        ModelViewController * model2 = [ModelViewController creatWithIndex:2];
        [_pageViewControl setViewControllers:@[model,model2] direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:nil];
        _pageViewControl.doubleSided = YES;
        _dataArray = [[NSMutableArray alloc]init];
        [_dataArray addObject:model];
        [self.view addSubview:_pageViewControl.view];
    }
    - (UIPageViewControllerSpineLocation) pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{
        return UIPageViewControllerSpineLocationMid;
    }
    运行效果如下图所示:

    四、UIPageViewControllerDataSource中方法解析

    //向前翻页展示的ViewController
    - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController;
    //向后翻页展示的ViewController
    - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController;
    //设置分页控制器的分页点数
    - (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);
    //设置当前分页控制器所高亮的点
    - (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);
    五、UIPageViewControllerDelegate中方法解析

    //翻页视图控制器将要翻页时执行的方法
    - (void)pageViewController:(UIPageViewController *)pageViewController willTransitionToViewControllers:(NSArray<UIViewController *> *)pendingViewControllers NS_AVAILABLE_IOS(6_0);
    //翻页动画执行完成后回调的方法
    - (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray<UIViewController *> *)previousViewControllers transitionCompleted:(BOOL)completed;
    //屏幕防线改变时回到的方法,可以通过返回值重设书轴类型枚举
    - (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation;

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告