UIPageViewController、UIScrollView实现分页效果

公司一直在做一款有许多textFeild需要填写的项目,当填完第一页之后,向右滑动,然后填写第二页。通过如此三步,创建一个类似于书籍上,滑一下,翻一页的效果,效果图如下:

步骤一.png

第一步:填表


步骤二.png

第二步: 向右滑动


步骤三.png

第三步: 进入第二页

为了达到上面的效果,我们创建一个UIScrollView,然后在上面添加4个UIView(分别对应:收款方信息、付款方信息、证明材料、申请开票4个页面),并设置UIScrollView的contentSize为4个屏幕宽度,开启pagingEnabled为YES,这样就达到了,翻一页的效果。

但是问题有一个问题,UIScrollView并没有API告诉我们当前是第几页,那么我们如何确定当前是第几页了?

我们在UIScrollView的代理方法中,可以监听到UIScrollView滑动的偏移量,如果偏移量超过1/2的屏幕宽度,我们就认为是翻到下一页了,这时利用一个int类型的全局变量currentPage记录下当前的页数,就能巧妙的解决当前是第几页的问题(AS_SCREEN_WIDTH为屏幕的宽度)。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    int page = (scView.contentOffset.x+ AS_SCREEN_WIDTH/2.0) / AS_SCREEN_WIDTH;
    if (currentPage == page)
    {
        return;
    }
    currentPage = page;
    switch (currentPage)
    {
        case 0:
            NSLog(@"第一页");
            break;
        case 1:
           NSLog(@"第二页");
            break;
      case 2:
           NSLog(@"第三页");
            break;
    case 3:
           NSLog(@"第四页");
            break;
    }
}

也许你要问为什么要加1/2屏幕的宽度了,你可以试验下UIScrollView开启pagingEnabled后,有个有趣的现象当滑动的偏移量小于1/2屏幕宽度时会自动弹回当前页,如果滑动偏移量超过1/2屏幕宽度时会自动进入下一页, 所以我也学系统样当偏移量超过1/2屏幕时,我认为是进入了下一页。

有时我也在想系统有没有存在一个控件,刚好是做分页效果的,就像许多小说阅读器那样,可以翻页的。苹果还真提供了一个控件,就是我们的今天的主角--UIPageViewController。

我先把UIPageViewController Demo上传下,有需要的可以看下实现效果。

UIPageViewController的使用比较简单,主要是有一个实例创建方法,
一个减号方法和两个dataSource的方法需要实现。

  • 实例化方法:- (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary<NSString *, id> *)options
    //  options设置翻页时两个页面之间的间隔,自己可以设置为10看下效果,我这里设置为0
    NSDictionary *options1 = @{UIPageViewControllerOptionInterPageSpacingKey : @(0)};
    //  实例化方法
    UIPageViewController *pageController = [[UIPageViewController alloc] 
initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:options1];
    pageController.view.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
  • 减号方法:- (void)setViewControllers:(nullable NSArray<UIViewController *> *)viewControllers direction:(UIPageViewControllerNavigationDirection)direction animated:(BOOL)animated completion:(void (^ __nullable)(BOOL finished))completion;
    // 一个必须要实现的减号方法, 设置显示的第一页,注意viewControllers只能传一个。
    FirstViewController *vc1 = [[FirstViewController alloc] init];
    vc1.pageIndex = 0;  // 设置这是第一个页面
    NSArray *vcsArr = @[vc1];
    [pageController setViewControllers:vcsArr direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:^(BOOL finished) {
        
    }];
  • DataSource的两个代理方法,设置上一页和下一页
#pragma Mark---  两个必须要实现的DataSource方法
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController
               viewControllerBeforeViewController:(UIViewController *)viewController;
{
   
    NSUInteger index = ((HTBaseViewController *) viewController).pageIndex;
    if (index == 0 || index == NSNotFound)
    {
        return nil;
    }
    index -= 1;
    return [self viewControllerAtIndex:index];
}
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController
{

     NSUInteger index = ((HTBaseViewController *) viewController).pageIndex;
    if (index == NSNotFound)
    {
        return nil;
    }
    index += 1;
    return [self viewControllerAtIndex:index];
}

根据页面index,返回相应的页面。

-(UIViewController *)viewControllerAtIndex:(NSUInteger)index
{
    switch (index)
    {
        case 0:
        {
            FirstViewController *vc1 = [[FirstViewController alloc] init];
            vc1.pageIndex = index;
            return vc1;
        }
            break;
        case 1:
        {
            SecondViewController *vc2 = [[SecondViewController alloc] init];
            vc2.pageIndex = index;
            return vc2;
        }
            break;
        default:
            return nil;
            break;
    }
}

使用UIPageViewController比较纠结的是需要给每个页面分配一个页面标示符pageIndex(参数名随意)记录其为第几页。

UIPageViewController简单介绍就到这里了,其他的用法后续有机会再逐渐完善。UIPageViewController完整的Demo请参见上面的链接。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,975评论 4 60
  • 在iOS中,滚动视图UIScrollView用于查看大于屏幕的内容。Scroll View有两个主要目的: 让用户...
    pro648阅读 38,059评论 4 37
  • 小白是个闷骚的人,但从不胡作非为, 性格一直是胆小怕事,有贼心没贼胆。 路上看见漂亮的妹子,顶多盯着瞄几眼。 没人...
    孖此一生阅读 412评论 1 2
  • 一个非常简单的常识和本质规律, 鸟与鱼不同, 腊梅与昙花不同, 人与人不同。 所以,绝对的鸡汤和二元对立论是需要清...
    孙晓晓晓阅读 301评论 0 0