UIPageController实现 问卷、试卷

最近写了一个问卷、试卷类型的需求,题型包括单选、多选、简答,并且每道题包括是否必选

看到这个需求的时候第一想法就是 CollectionView 嵌套UITableView实现一个左右滑动,嵌套上下滑动,这么一个结构(网上类似的需求也多是这么实现的,大同小异)。

单选与多选的问题,参照tableView 单选及多选的简单实现

但是实现过程中,发现一下几个问题不是很容易解决

  • 滑动效果不是很理想,CollectionView的滑动,开了pageEnabled之后,滑动超过一半才会滑动过去,而不到一半的时候会回弹。

  • 更新页码的时候,发现CollectionView的代理方法不能很好的满足需求,而放在scrollViewDidScroll方法里面去判断是否超过一半的时候变动,可以实现效果,但是变化也不是很理想

  • 由于是CollectionView,对每个cell的监听就比较少了,最终必选的问题,被放大了,找不到一个系统的代理、方法可以合理的处理必选的问题

综合这些问题-------决定试试UIPageViewController

因为比较少用这个,因此也添了一些坑就不表了,直接上代码

/// 答题的主题位置
func makePageViewController() {
    //主体答题位置,设置样式为 pageCurl ,
    pageViewController =  UIPageViewController(transitionStyle: .pageCurl, navigationOrientation: .horizontal, options: [UIPageViewControllerOptionSpineLocationKey: NSNumber(value:UIPageViewControllerSpineLocation.min.rawValue)])
    pageViewController.view.frame = CGRect(x: Q_A.Padding.left, y: Q_A.Padding.top, width: view.frame.width - 2 * Q_A.Padding.left, height: view.frame.height - Q_A.Padding.top - answerCardFrame.height - 44 - 64)
    pageViewController.delegate = self
    pageViewController.dataSource = self
    
    pageViewController.isDoubleSided = false //单面
    pageViewController.cancleSideTouch()  //自定义,取消了边缘响应点击事件
            
    // 根据数据个数,设置controller的数组,并设置数据源
    for i in 0..<questions.count {
        let current = QuestionViewController()
        current.view.frame = pageViewController.view.bounds
        current.dataSource = (questions[i], realAnswer[i])
        
        viewControllers.append(current)
    }
    
    pageViewController.setViewControllers([viewControllers.first!], direction: .forward, animated: true) { (bool) in
        print("设置完成")
        self.addChildViewController(self.pageViewController)
        self.view.addSubview(self.pageViewController.view)
        
        self.pageViewController.didMove(toParentViewController: self) //前面两句已经加了,这句是什么意思?
    }
}

这个里面,UIPageViewController 的滑动类型分为2种,pageCurlscroll 设置了一个参数 *** UIPageViewControllerOptionSpineLocationKey,这个参数控制的是书脊的位置,设置这个和UI的表现形式有关系,当且仅当 spineLocationKey 为mid***的时候,界面就像一本打开的书一样,且默认设置了正反页显示。

这里面还涉及到pageViewController的 页面设置方法

   open func setViewControllers(_ viewControllers: [UIViewController]?, direction: UIPageViewControllerNavigationDirection, animated: Bool, completion: ((Bool) -> Swift.Void)? = nil) 

方法中需要传一个 viewControllers: [UIViewController]?,这个地方,根据pageViewController的 transitionStyle 的不同有所区别,当且仅当 transitionStyle 为.pageCurl && spineLocationKey 为.mid时,需要传2个,剩下的需要传一个VC

   'NSInvalidArgumentException', reason: 'The number of provided view controllers (1) doesn't match the number required (2) for the requested spine location (UIPageViewControllerSpineLocationMid)'

如果出现这种错误,就说明你的VC的个数和transitionStyle冲突了,

   'UIPageViewControllerSpineLocationMid' is specified, 'doubleSided' must be 'YES'.' 

这个错误就很明显了~

然后我们来看UIPageViewControllerDataSource中的方法

func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
    //获取即将显示的页面的后一页,
    let index = viewControllers.index(of: viewController)!
    if index == viewControllers.count - 1 { //第一条
        return nil
    }
    return viewControllers[pageIndex]
}

func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
    //获取即将显示的页面的前一页
    let index = viewControllers.index(of: viewController)!
    if index == 0 { //第一条
        return nil
    }
    return viewControllers[pageIndex]
}

这里踩过坑,试过通过pageIndex 直接设置上一个或者下一个,但是发现这里执行了方法,不意味着已经跳转到前一个或者后一个,仅仅是一个预处理,因此这里通过 let index = viewControllers.index(of: viewController)! 获取当前的页面在viewcontrollers数组中的位置,然后直接设置前一个界面|后一个界面

这里测试过程中发现: 当我每次调用setViewControllers的时候,下一次滑动,一定会分别执行一次上面两个方法,大概是手动设置当前页面之后,系统也蒙蔽了,所以要重新了解一下吧。所以在这个方法里面就不能做太多的动作了

这里说一下 解决上面滑动过程中取消滑动,pageIndex变化的问题,在UIPageViewControllerDelegate 的方法中

//将要到--
func pageViewController(_ pageViewController: UIPageViewController, willTransitionTo pendingViewControllers: [UIViewController]) {
    //提前设置页码数据,如果翻页中途取消的话,在下面设置回去
    let finishOne = pendingViewControllers.first
    let index  = viewControllers.index(of: finishOne!)
    pageIndex = index!
    pageLabel.text = "\(index! + 1)/\(questions.count)"
}
func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
    //判断是否成功,不成功,重新设置回去
    if !completed {
        //
        let finishOne = previousViewControllers.first
        
        let index  = viewControllers.index(of: finishOne!)
        pageIndex = index!
        pageLabel.text = "\(index! + 1)/\(questions.count)"
    }
}

这边设置当前的页码。更新UI,如果滑动为完成的话 complete 为false,这时候就要重新设置回去了。这样就解决了滑动过程中变化的问题--开始滑动就+1,滑动不成功再减回来!!

UIPageViewController自带了单击边缘翻页的效果,不想要,因此干掉了

//MARK: 拓展UIPageViewController,取消了边缘的点击事件
extension UIPageViewController: UIGestureRecognizerDelegate {

    /// 拓展一个方法,取消UIPageViewController的点击边界翻页
    fileprivate func cancleSideTouch() {
        for ges in gestureRecognizers {
            ges.delegate=self;
        }
    }
    
    public func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
        guard gestureRecognizer is UITapGestureRecognizer else {
            return true
        }
        return false
    }
}

检查|统计答案的时候肯定需要实现一个遍历数组的问题,推荐两个方法,

public func filter(_ isIncluded: (Element) throws -> Bool) rethrows -> [Element]

public func map<T>(_ transform: (Element) throws -> T) rethrows -> [T]

实现如下(仅供参考):

    let unDidAnswers = realAnswer.filter { (answer) -> Bool in
        return (answer.answer.isEmpty && answer.required == 1)
    }
    
    guard unDidAnswers.count == 0 else {
        print("any question required is not answerd")
        let firstUnDid = realAnswer.index(of: unDidAnswers.first!)
        let alert = UIAlertController(title: "存在未答题的必选项:\(firstUnDid! + 1)题", message: nil, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "继续答题", style: .cancel, handler: nil))
        self.present(alert, animated: true, completion: {
            //
        })
        return
    }
    //.准备提交
    let results = realAnswer.map{["id": $0.questionId,"answer": $0.answer]}

主要代码都在这了,如果找demo的话,去github

都看到这了,说明真的用到了,加了个复用的,UIPageController实现 问卷、试卷 2

虽然都很拙略,但也希望有些帮助

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

推荐阅读更多精彩内容