ios开发翻页效果,ios 翻书效果

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

一、引言

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了且末免费建站欢迎大家使用！

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

@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 ()

{

//翻页视图控制器对象

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*)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) iddelegate;

//设置代理

@property (nullable, nonatomic, weak) iddataSource;

//获取翻页风格

@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*)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*)pendingViewControllers NS_AVAILABLE_IOS(6_0);

//翻页动画执行完成后回调的方法

- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray*)previousViewControllers transitionCompleted:(BOOL)completed;

//屏幕防线改变时回到的方法，可以通过返回值重设书轴类型枚举

- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation;

iphone翻页效果怎么设置

需越狱，安装一个插件叫做Barrel实现旋转3D

翻页，具体操作方法如下：

第一步，添加源：apt.weiPad.com；

第二步，在搜索框中输入barrel，安装完毕后重启手机；

第三步，开机后，手机设置会有barrel的选项，进入选择一个效果即可。

ios开发类似qq阅读的翻页特效怎么做

就是简单的js特效，明白了分页的原理，一切都好做

DataGridView 后台数据绑定 前台不要用自带的分页，用js去做分页控制

比如： 页面加个 Label控件， Label值就是如你图中所示的分页的数据，这里的text值要在后台绑定好，

当点击每个数字时,调用一下js函数，后数字传给后台，后台再根据传入的数字进行数据绑定，然后再绑定下text值

iOS 中逼真的翻页效果是怎么做出来的

1、先把四张素材照片放到同一个文件里，这里用小狗四张照片。 2、把第一个图层复制一个拖到最下面。 3、把前四个图层分别建立一个组。 4、将第一个图层复制再次，先处理第一个副本图层，点击“编辑”-“变换”-“变形”，拖动鼠标制作第一下翻页的效果...

ios 翻页效果动画

项目当中要实现一个电子档案，效果呢是类似小说翻页的效果。很简单，先来说一下实现思路

写一个用来接收你想展示信息的控件，如果只是文字展示，那就label，如果带图片什么的，那就自定义一个view

然后就是左右滑动的手势，在左右手势实现方法中做数据判断展示，加上动画效果就ok 了

1、在self.view 上创建label

2、添加左右手势

3、根据左右手势实现方法，给 label.text 数组判断赋值

4、执行翻页动画

- ( void )viewDidLoad {

[ super viewDidLoad];

self .view.backgroundColor = [UIColor whiteColor];

_arr = @[@"11111",  @"22222", @"33333",@"44444",@"55555"];

[ self buildLable];

[ self configTapGes];

_count=0;

}

#pragma mark - label

- ( void )buildLable {

_labelView= [[UIViewalloc]init];

[ self .view addSubview:_labelView];

[_labelView mas_makeConstraints:^(MASConstraintMaker *make) {

    make.centerX.equalTo( self .view.mas_centerX);

    make.centerY.equalTo( self .view.mas_centerY);

    make.width.mas_offset(WIDTH-40);

    make.height.mas_offset(500);

}];

_labelView.backgroundColor = [UIColor orangeColor];

_label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, WIDTH-40, 500)];

_label.backgroundColor = [UIColor grayColor];

_label.numberOfLines = 0;

_label.text = [_arr objectAtIndex:0];

[ self .labelView addSubview:_label];

}

#pragma mark - 手势

- ( void )configTapGes {

_fromRightSwip= [[UISwipeGestureRecognizeralloc]initWithTarget: self action: @selector (nextPage:)];

_fromRightSwip.direction = UISwipeGestureRecognizerDirectionLeft;

[ self .view addGestureRecognizer:_fromRightSwip];

_fromLeftSwip= [[UISwipeGestureRecognizeralloc]initWithTarget: self action: @selector (forwardPage:)];

_fromLeftSwip.direction = UISwipeGestureRecognizerDirectionRight;

[ self .view addGestureRecognizer:_fromLeftSwip];

}

#pragma mark - 下一页按钮响应事件

- ( void )nextPage:(UIButton*)btn {

if (_count_arr.count-1) {

    _label.text= [_arrobjectAtIndex:_count+1];

    NSString*subtypeString;

    subtypeString =kCATransitionFromRight;

    [ self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:_labelView];

    _count=_count+1;

} else {

    _count=_arr.count-1;

//        [self showAlert:@"已经是最后一页"];

}

NSLog(@"下一页：%ld", ( long )_count);

}

#pragma mark - 上一页按钮响应事件

- ( void )forwardPage:(UIButton*)btn {

if (_count0) {

    _label.text= [_arrobjectAtIndex:_count-1];

    NSString*subtypeString;

    subtypeString =kCATransitionFromLeft;

    [ self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:_labelView];

    _count=_count-1;

} else {

    _count=0;

//        [self showAlert:@"已经是第一页"];

}

NSLog(@"上一页：%ld", ( long )_count);

}

#pragma CATransition动画实现

/**

*  动画效果实现

*

*  @param type    动画的类型 在开头的枚举中有列举,比如 CurlDown//下翻页,CurlUp//上翻页

,FlipFromLeft//左翻转,FlipFromRight//右翻转 等...

*  @param subtype 动画执行的起始位置,上下左右

*  @param view    哪个view执行的动画

*/

- ( void )transitionWithType:(NSString*) typeWithSubtype:(NSString*) subtypeForView: (UIView*) view {

CATransition *animation = [CATransition animation];

animation.duration=0.7f;

animation.type= type;

if (subtype != nil ) {

    animation.subtype= subtype;

}

animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;

[view.layeraddAnimation:animationforKey:@"animation"];

}