Example to explain the Uipageviewcontroller paging view controller in IOS _ios

Source: Internet
Author: User
Tags uikit

First, the introduction

Uipageviewcontroller is one of the rare animated view controllers in iOS that allows you to create a scrolling view that is similar to Uiscrollview and Uipagecontrol, or to create a cool page view that resembles a book effect.

Uipageviewcontroller was first introduced in the iOS 5 SDK, which allows developers to create a paging view using this viewcontroller. In iOS 6, this class has an update that supports scrolling transitions. With page View, users can easily navigate between multiple pages by means of gestures. Uipageviewcontroller is not just for booting pages, but also for many games, such as Angry Birds, which use Page view to show the selection of checkpoints, as well as the application of books, to display pages of a book with this class.
Uipageviewcontroller is a highly configurable class that you can configure as follows:

    • Orientation of pagination-horizontal or vertical
    • The style of turning pages--scroll pages or sliding pages
    • Spine position-only scroll page style valid
    • Page spacing--Only the slide-page style is valid to define page spacing (inter-page spacing)

Uipageviewcontroller resembles a view container in which each specific view is maintained and managed by the respective Viewcontroller, Uipageviewcontroller only coordinated and animated layout. The following diagram shows a good UIPAGEVIEWCONTROLELR structure:

In the figure above, the Uipageviewcontrollerdatasource protocol provides data support for Uipageviewcontroller, and the DataSource protocol provides data from each Viewcontoller for its own maintenance, The callback in the Uipageviewcontrollerdelegate can monitor the paging action, the screen rotation, and so on. Uipageviewcontroller renders the view data obtained from DataSource to a view for the display of the current views controller.

To demonstrate, we'll create a simple app together. Of course, we're not going to show all the Uipageviewcontroller configuration details, and we'll show you how to create a boot page by using the sliding page style. But don't worry, with a basic understanding of uipageviewcontroller, I'm sure you'll be able to explore other features.

Let's go!

Second, create a Uipageviewcontroller

First create a new class as the Controller for every page view in the paging view controller to inherit from 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:@ "page%d", index];
    [Con.view AddSubview:con.indexLabel];
    return con;
}
-(void) viewdidload {
    [super Viewdidload];
   //Do any additional s Etup after loading the view.
    self.view.backgroundColor = [Uicolor Redcolor];
}
@end
implements the following code in the VIEWCONTROLLER.M file that the engineering template brings:

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

@implementation ViewController

-(void) Viewdidload {
[Super Viewdidload];
is initialized
_pageviewcontrol = [[Uipageviewcontroller alloc]initwithtransitionstyle:uipageviewcontrollertransitionstylescroll Navigationorientation:uipageviewcontrollernavigationorientationhorizontal options:@{ UIPAGEVIEWCONTROLLEROPTIONSPINELOCATIONKEY:@0,UIPAGEVIEWCONTROLLEROPTIONINTERPAGESPACINGKEY:@10}];
Self.view.backgroundColor = [Uicolor Greencolor];
Set the size of the paging view
_pageviewcontrol.view.bounds=self.view.bounds;
Setting up data sources and proxies
_pageviewcontrol.datasource=self;
_pageviewcontrol.delegate=self;
Create an initial interface
Modelviewcontroller * model = [Modelviewcontroller creatwithindex:1];
Setting the initial interface
[_pageviewcontrol Setviewcontrollers:@[model] Direction:uipageviewcontrollernavigationdirectionreverse animated: YES Completion:nil];
Set whether to display on both sides
_pageviewcontrol.doublesided = NO;
_dataarray = [[Nsmutablearray alloc]init];
[_dataarray Addobject:model];
[Self.view Addsubview:_pageviewcontrol.view];
}
Page-turn controller to flip forward action The view controller returned by this data source method is the view controller to display the 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];
}
}
Paging Controller for backward paging action The view controller returned by this data source method is the view controller to display the view
-(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;
}
}
}
Proxy method for screen rotation triggers
-(Uipageviewcontrollerspinelocation) Pageviewcontroller: (Uipageviewcontroller *) Pageviewcontroller Spinelocationforinterfaceorientation: (uiinterfaceorientation) orientation{
return uipageviewcontrollerspinelocationmin;
}
Set the paging Controller page number of pages
-(Nsinteger) Presentationcountforpageviewcontroller: (Uipageviewcontroller *) Pageviewcontroller {

return 10;
}
Set the initial paging point
-(Nsinteger) Presentationindexforpageviewcontroller: (Uipageviewcontroller *) pageviewcontroller{
return 0;
}
@end
The simplest example of a paging view controller is created above, and the effect is as follows:

Analysis of methods used in Uipageviewcontroller

//创建翻页视图控制器对象
- (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary<NSString *, id> *)options;
The above method is used to create the View controller object, where the Uipageviewcontrollertransitionstyle parameter sets the style of the paging controller, enumerated as follows:

typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) {
    UIPageViewControllerTransitionStylePageCurl = 0, //类似于书本翻页效果
    UIPageViewControllerTransitionStyleScroll = 1 // 类似于ScrollView的滑动效果
};
If set to Uipageviewcontrollertransitionstylecurl, the paging effect is shown in the following illustration:

The Uipageviewcontrollernavigationorientation property in the initialization method above sets the direction of the page turn, as enumerated below:

typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) {
    UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻页
    UIPageViewControllerNavigationOrientationVertical = 1//竖直翻页
};
The options parameter sets the configuration dictionary for the paging View controller, which can be set with the following configuration key values:

//这个键需要设置为UIPageViewControllerOptionSpineLocationKey枚举值对应的NSNumber对象 设置翻页控制器的书轴 后面会介绍
NSString * const UIPageViewControllerOptionSpineLocationKey;
//这个键需要设置为NSNumber类型 设置每页视图的间距 用于滚动视图风格的
NSString * const UIPageViewControllerOptionInterPageSpacingKey;
Here are some common properties and methods for Uipageviewcontroller:

//Set Data source
@property (nullable, nonatomic, weak) ID <UIPageViewControllerDelegate> delegate;
// Set proxy
@property (nullable, nonatomic, weak) id <UIPageViewControllerDataSource> dataSource;
//Get page style
@ Property (Nonatomic, ReadOnly) Uipageviewcontrollertransitionstyle Transitionstyle;
//Get page Direction
@property (nonatomic, readonly) uipageviewcontrollernavigationorientation navigationorientation;
Gets the book axis type
@property (nonatomic, readonly) uipageviewcontrollerspinelocation spinelocation;
//Set whether to display both sides of the
@ Property (Nonatomic, getter=isdoublesided) BOOL doublesided;
//Set the view controller to display
-(void) Setviewcontrollers: (Nullable nsarray<uiviewcontroller *> *) viewcontrollers Direction: (uipageviewcontrollernavigationdirection) Direction animated: (BOOL) animated completion: (Void (^ __ Nullable) (BOOL finished)) completion; The only spinelocation attribute above the
is somewhat difficult to understand and is enumerated as follows:

typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) {
    //对于SCrollView类型的滑动效果 没有书轴 会返回下面这个枚举值
    UIPageViewControllerSpineLocationNone = 0,
    //以左边或者上边为轴进行翻转 界面同一时间只显示一个View
    UIPageViewControllerSpineLocationMin = 1, 
    //以中间为轴进行翻转 界面同时可以显示两个View
    UIPageViewControllerSpineLocationMid = 2,
    //以下边或者右边为轴进行翻转 界面同一时间只显示一个View
    UIPageViewControllerSpineLocationMax = 3  
};
The example code above is modified in several places as follows:

-(void) Viewdidload {
[Super Viewdidload];
Do no 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;
}
The effect is as shown in the following illustration:

Analysis of methods in 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);
Analysis of methods in Uipageviewcontrollerdelegate

Method
-(void) Pageviewcontroller: (Uipageviewcontroller *) that the

//Paging view Controller will perform when the page is to be leafed pageviewcontroller Willtransitiontoviewcontrollers: (Nsarray<uiviewcontroller *> *) pendingviewcontrollers NS_AVAILABLE_IOS (6_0) ;
//Flip-through method of callback after animation execution
-(void) Pageviewcontroller: (Uipageviewcontroller *) Pageviewcontroller didfinishanimating :(BOOL) finished previousviewcontrollers: (Nsarray<uiviewcontroller *> *) previousviewcontrollers Transitioncompleted: (BOOL) completed;
//The way the screen line of defense changes back, you can reset the book axis type enumeration by returning the value
-(uipageviewcontrollerspinelocation) Pageviewcontroller: ( Uipageviewcontroller *) Pageviewcontroller spinelocationforinterfaceorientation: (uiinterfaceorientation) orientation;

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.