国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 系統(tǒng) > iOS > 正文

實(shí)例講解iOS中的UIPageViewController翻頁視圖控制器

2019-10-21 18:53:58
字體:
供稿:網(wǎng)友

一、引言

UIPageViewController是iOS中少見的動(dòng)畫視圖控制器之一,通過它既可以創(chuàng)建類似UIScrollView與UIPageControl結(jié)合的滾屏視圖,也可以創(chuàng)建類似圖書效果的炫酷翻頁視圖。

UIPageViewController在iOS 5 SDK中首次引入,它使得開發(fā)者可以使用這個(gè)ViewController創(chuàng)建分頁視圖。在iOS 6中,這個(gè)類有了更新,支持滾動(dòng)過渡效果。使用Page View,用戶可以方便的通過手勢(shì)在多個(gè)頁面之間導(dǎo)航。UIPageViewController并不僅僅用于引導(dǎo)頁,很多游戲,例如:憤怒的小鳥,就是用Page View來展示關(guān)卡選擇的頁面,還有有關(guān)書籍的應(yīng)用,用這個(gè)類來顯示書的頁面。
UIPageViewController是個(gè)高度可配置的類,你可以進(jìn)行如下配置:

  • 分頁的方向——水平或垂直
  • 翻頁的樣式——書卷翻頁或者滑動(dòng)翻頁
  • 書脊位置——只有書卷翻頁樣式有效
  • 頁面間距——只有滑動(dòng)翻頁樣式有效,用來定義頁面間距(inter-page spacing)

UIPageViewController類似一個(gè)視圖容器,其中每個(gè)具體的視圖由各自的ViewController進(jìn)行維護(hù)管理,UIPageViewController只進(jìn)行協(xié)調(diào)與動(dòng)畫布置。下圖可以很好的展現(xiàn)出UIPageViewControlelr的使用結(jié)構(gòu):

iOS,UIPageViewController,翻頁,視圖

上圖中,UIPageViewControllerDataSource協(xié)議為UIPageViewController提供數(shù)據(jù)支持,DataSource協(xié)議提供的數(shù)據(jù)來自各個(gè)ViewContoller自行維護(hù),UIPageViewControllerDelegate中的回調(diào)可以對(duì)翻頁動(dòng)作,屏幕旋轉(zhuǎn)動(dòng)作等進(jìn)行監(jiān)聽。UIPageViewController把從DataSource中獲取到的視圖數(shù)據(jù)渲染給View用于當(dāng)前視圖控制器的展示。

為了演示,我們會(huì)一起創(chuàng)建一個(gè)簡(jiǎn)單的app。當(dāng)然,我們不會(huì)演示所有的UIPageViewController的配置細(xì)節(jié),我們會(huì)演示到使用滑動(dòng)翻頁樣式來創(chuàng)建一個(gè)引導(dǎo)頁。不過別擔(dān)心,有了對(duì)UIPageViewController的基本理解,我相信你能夠去探索其他的特性。

開始吧!

二、創(chuàng)建一個(gè)UIPageViewController

首先新建一個(gè)類作為翻頁視圖控制器中具體每一頁視圖的控制器,使其繼承于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文件中實(shí)現(xiàn)如下代碼:

#import "ViewController.h"
#import "ModelViewController.h"
//遵守協(xié)議
@interface ViewController ()<UIPageViewControllerDataSource,UIPageViewControllerDelegate>
{
    //翻頁視圖控制器對(duì)象
    UIPageViewController * _pageViewControl;
    //數(shù)據(jù)源數(shù)組
    NSMutableArray * _dataArray;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //進(jìn)行初始化
    _pageViewControl = [[UIPageViewController alloc]initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:@{UIPageViewControllerOptionSpineLocationKey:@0,UIPageViewControllerOptionInterPageSpacingKey:@10}];
    self.view.backgroundColor = [UIColor greenColor];
    //設(shè)置翻頁視圖的尺寸
    _pageViewControl.view.bounds=self.view.bounds;
    //設(shè)置數(shù)據(jù)源與代理
    _pageViewControl.dataSource=self;
    _pageViewControl.delegate=self;
    //創(chuàng)建初始界面
    ModelViewController * model = [ModelViewController creatWithIndex:1];
    //設(shè)置初始界面
    [_pageViewControl setViewControllers:@[model] direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:nil];
    //設(shè)置是否雙面展示
    _pageViewControl.doubleSided = NO;
    _dataArray = [[NSMutableArray alloc]init];
    [_dataArray addObject:model];
    [self.view addSubview:_pageViewControl.view];
}
//翻頁控制器進(jìn)行向前翻頁動(dòng)作 這個(gè)數(shù)據(jù)源方法返回的視圖控制器為要顯示視圖的視圖控制器
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController{
    int index = (int)[_dataArray indexOfObject:viewController];
    if (index==0) {
        return nil;
    }else{
        return _dataArray[index-1];
    }
}
//翻頁控制器進(jìn)行向后翻頁動(dòng)作 這個(gè)數(shù)據(jù)源方法返回的視圖控制器為要顯示視圖的視圖控制器
- (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;
        }
    }
}
//屏幕旋轉(zhuǎn)觸發(fā)的代理方法
- (UIPageViewControllerSpineLocation) pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{
    return UIPageViewControllerSpineLocationMin;
}
//設(shè)置分頁控制器的分頁數(shù)
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
   
    return 10;
}
//設(shè)置初始的分頁點(diǎn)
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController{
    return 0;
}
@end

上面創(chuàng)建了最簡(jiǎn)單的翻頁視圖控制器示例,效果如下圖:

iOS,UIPageViewController,翻頁,視圖

三、UIPageViewController中方法使用解析

//創(chuàng)建翻頁視圖控制器對(duì)象
- (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary<NSString *, id> *)options;

上面方法用于創(chuàng)建視圖控制器對(duì)象,其中UIPageViewControllerTransitionStyle參數(shù)設(shè)置翻頁控制器的風(fēng)格,枚舉如下:

typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) {
    UIPageViewControllerTransitionStylePageCurl = 0, //類似于書本翻頁效果
    UIPageViewControllerTransitionStyleScroll = 1 // 類似于ScrollView的滑動(dòng)效果
};

如果設(shè)置為UIPageViewControllerTransitionStyleCurl,翻頁效果如下圖所示:

iOS,UIPageViewController,翻頁,視圖

上面初始化方法中的UIPageViewControllerNavigationOrientation屬性設(shè)置翻頁的方向,枚舉如下:

typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) {
    UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻頁
    UIPageViewControllerNavigationOrientationVertical = 1//豎直翻頁
};

options參數(shù)用于設(shè)置翻頁視圖控制器的配置字典,其可以設(shè)置的配置鍵值如下:

//這個(gè)鍵需要設(shè)置為UIPageViewControllerOptionSpineLocationKey枚舉值對(duì)應(yīng)的NSNumber對(duì)象 設(shè)置翻頁控制器的書軸 后面會(huì)介紹
NSString * const UIPageViewControllerOptionSpineLocationKey;
//這個(gè)鍵需要設(shè)置為NSNumber類型 設(shè)置每頁視圖的間距 用于滾動(dòng)視圖風(fēng)格的
NSString * const UIPageViewControllerOptionInterPageSpacingKey;

下面是UIPageViewController的一些常用屬性與方法:

//設(shè)置數(shù)據(jù)源
@property (nullable, nonatomic, weak) id <UIPageViewControllerDelegate> delegate;
//設(shè)置代理
@property (nullable, nonatomic, weak) id <UIPageViewControllerDataSource> dataSource;
//獲取翻頁風(fēng)格
@property (nonatomic, readonly) UIPageViewControllerTransitionStyle transitionStyle;
//獲取翻頁方向
@property (nonatomic, readonly) UIPageViewControllerNavigationOrientation navigationOrientation;
//獲取書軸類型
@property (nonatomic, readonly) UIPageViewControllerSpineLocation spineLocation;
//設(shè)置是否雙面顯示
@property (nonatomic, getter=isDoubleSided) BOOL doubleSided;
//設(shè)置要顯示的視圖控制器
- (void)setViewControllers:(nullable NSArray<UIViewController *> *)viewControllers direction:(UIPageViewControllerNavigationDirection)direction animated:(BOOL)animated completion:(void (^ __nullable)(BOOL finished))completion;

上面只有spineLocation屬性有些難于理解,其枚舉如下:

typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) {
    //對(duì)于SCrollView類型的滑動(dòng)效果 沒有書軸 會(huì)返回下面這個(gè)枚舉值
    UIPageViewControllerSpineLocationNone = 0,
    //以左邊或者上邊為軸進(jìn)行翻轉(zhuǎn) 界面同一時(shí)間只顯示一個(gè)View
    UIPageViewControllerSpineLocationMin = 1, 
    //以中間為軸進(jìn)行翻轉(zhuǎn) 界面同時(shí)可以顯示兩個(gè)View
    UIPageViewControllerSpineLocationMid = 2,
    //以下邊或者右邊為軸進(jìn)行翻轉(zhuǎn) 界面同一時(shí)間只顯示一個(gè)View
    UIPageViewControllerSpineLocationMax = 3  
};

將上面的示例代碼修改幾個(gè)地方如下:

- (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;
}

運(yùn)行效果如下圖所示:

iOS,UIPageViewController,翻頁,視圖

四、UIPageViewControllerDataSource中方法解析

//向前翻頁展示的ViewController
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController;
//向后翻頁展示的ViewController
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController;
//設(shè)置分頁控制器的分頁點(diǎn)數(shù)
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);
//設(shè)置當(dāng)前分頁控制器所高亮的點(diǎn)
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);

五、UIPageViewControllerDelegate中方法解析

//翻頁視圖控制器將要翻頁時(shí)執(zhí)行的方法
- (void)pageViewController:(UIPageViewController *)pageViewController willTransitionToViewControllers:(NSArray<UIViewController *> *)pendingViewControllers NS_AVAILABLE_IOS(6_0);
//翻頁動(dòng)畫執(zhí)行完成后回調(diào)的方法
- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray<UIViewController *> *)previousViewControllers transitionCompleted:(BOOL)completed;
//屏幕防線改變時(shí)回到的方法,可以通過返回值重設(shè)書軸類型枚舉
- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation;


注:相關(guān)教程知識(shí)閱讀請(qǐng)移步到IOS開發(fā)頻道。
發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 新郑市| 濉溪县| 青铜峡市| 龙陵县| 调兵山市| 天祝| 策勒县| 大同县| 芜湖市| 嵊州市| 克什克腾旗| 社旗县| 利川市| 峡江县| 晋中市| 湖北省| 依安县| 军事| 金阳县| 阿鲁科尔沁旗| 甘南县| 平邑县| 两当县| 东乌珠穆沁旗| 隆林| 嫩江县| 平舆县| 库伦旗| 马鞍山市| 柳江县| 合山市| 汉中市| 连州市| 水城县| 新化县| 泽库县| 延庆县| 新和县| 曲靖市| 梁河县| 新营市|