前言：
现在教育培训类、考试类软件都具备考试答题这样的功能，现提供一个非常简陋的示例以供参考。
本示例以UICollectionView控件为底层，进行简陋开发。商业化的答题功能具备后台监控、粘贴板监控、网络异常监控、答题时长控制、多形式答题（填空、选择、判断、作图等）、答案提示、增值服务推送、数据库缓存读取、语音播报等诸多功能，以商业化封装SDK形式出现，本例就以纯手动滑动的判断题进行示例讲解。再次重申，本例是简陋开发，功能上以“怎么写着快”为主，仅提供思路。工程性与商业性、安全性不在考虑范围之内。
某商业级答题页面组件效果：
简易效果：
思路：
FlowLayout的尺寸接近屏幕尺寸即可，然后cell内控件布局按照全屏模式进行布局。通常答题是由左至右进行答题，因此设置scrollDirection为水平即可。另外一定要设置flowLayout.minimumLineSpacing = 0.000001，否则滑动会有间隔。
cell基本的控件包括题型，题目，正确与错误的选项，答题结果，题目进度。在这里Model内应设置题目的正确答案，类型为Int或其他都行（虽然是以判断题为主，但后期可能有选择题等）。正确和错误选项的按钮监听事件内根据泛型集合内题目的答案结果进行答案结果的控制/
代码：
Model
import Foundation
class ExamModel: NSObject{
var examTitleString: String!
var examAnswerIndex: Int!
var examTypeString: String!
init(examTitleString: String, examAnswerIndex: Int,examTypeString: String) {
self.examTitleString = examTitleString
self.examAnswerIndex = examAnswerIndex
self.examTypeString = examTypeString
}
}
Cell
import UIKit
import SnapKit
class ExamCell: UICollectionViewCell {
var data: Array<ExamModel>!
var tempIndex: Int = 0
var isAnswerSucceed: Bool = false
var examType: UILabel!
var examTitle: UILabel!
var examRightButton: UIButton!
var examWrongButton: UIButton!
var examJudgeResult: UILabel!
var examTopicCount: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
// self.backgroundColor = UIColor.clear
installExamType()
installExamTitle()
installExamRightButton()
installExamWrongButton()
installExamJudgeResult()
installExamTopicCount()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func installExamType(){
examType = UILabel()
examType.layer.masksToBounds = true
examType.layer.cornerRadius = 5
examType.font = UIFont.systemFont(ofSize: 12)
examType.textAlignment = .center
examType.backgroundColor = UIColor.init(red: 0, green: 0.6, blue: 0.2, alpha: 0.5)
self.contentView.addSubview(examType)
examType.snp.makeConstraints{ make in
make.width.equalTo(35)
make.height.equalTo(20)
make.left.equalTo(self.contentView.snp.left).offset(20)
make.top.equalTo(self.contentView.snp.top).offset(70)
}
}
private func installExamTitle(){
examTitle = UILabel()
examTitle.numberOfLines = 0
self.contentView.addSubview(examTitle)
examTitle.snp.makeConstraints { make in
make.width.equalTo(UIScreen.main.bounds.width - 78)
make.left.equalTo(self.examType.snp.right).offset(5)
make.top.equalTo(self.contentView.snp.top).offset(70)
}
}
private func installExamRightButton(){
examRightButton = UIButton(type: UIButton.ButtonType.system)
examRightButton.setTitle("正确", for: UIControl.State.normal)
examRightButton.sizeToFit()
self.contentView.addSubview(examRightButton)
examRightButton.snp.makeConstraints{ make in
make.width.equalTo(40)
make.height.equalTo(30)
make.top.equalTo(self.examTitle.snp.bottom).offset(66)
make.left.equalTo(self.contentView.snp.left).offset(20)
}
}
private func installExamWrongButton(){
examWrongButton = UIButton(type: UIButton.ButtonType.system)
examWrongButton.setTitle("错误", for: UIControl.State.normal)
self.contentView.addSubview(examWrongButton)
examWrongButton.snp.makeConstraints{ make in
make.width.equalTo(40)
make.height.equalTo(30)
make.top.equalTo(self.examRightButton.snp.bottom).offset(36)
make.left.equalTo(self.contentView.snp.left).offset(20)
}
}
private func installExamJudgeResult(){
examJudgeResult = UILabel()
self.contentView.addSubview(examJudgeResult)
examJudgeResult.snp.makeConstraints{ make in
make.width.equalTo(100)
make.height.equalTo(30)
make.left.equalTo(self.contentView.snp.left).offset(35)
make.bottom.equalTo(self.contentView.snp.bottom).offset(-75)
}
}
private func installExamTopicCount(){
examTopicCount = UILabel()
examTopicCount.layer.masksToBounds = true
examTopicCount.layer.cornerRadius = 5
examTopicCount.font = UIFont.systemFont(ofSize: 12)
examTopicCount.textAlignment = .center
examTopicCount.backgroundColor = UIColor.init(red: 0.9, green: 0.9, blue: 0.9, alpha: 0.7)
self.contentView.addSubview(examTopicCount)
examTopicCount.snp.makeConstraints{ make in
make.width.equalTo(70)
make.height.equalTo(20)
make.right.equalTo(self.contentView.snp.right).offset(-20)
make.bottom.equalTo(self.contentView.snp.bottom).offset(-80)
}
}
}
extension ExamCell{
public func setData(data: Array<ExamModel>){
self.data = data
}
public func updateCell(indexPath: IndexPath){
examTitle?.text = data[indexPath.row].examTitleString
examType.text = data[indexPath.row].examTypeString
examTopicCount.text = "\(indexPath.row)/\(data.count)"
examJudgeResult.text = ""
}
// 响应答题结果事件
public func responseCellEvent(i: Int){
tempIndex = i
examRightButton.addTarget(self, action: #selector(rightListener), for: .touchDown)
examWrongButton.addTarget(self, action: #selector(wrongListener), for: .touchDown)
}
// 对于正确按键而言，该按键触发的事件意味着泛型集合内指定IndexPath的Model内答案索引与其相同（人工指定0意味着该题目叙述为错误，1为正确），则说明用户该题回答正确，错误按键原理亦是如此，不再赘述
@objc func rightListener(){
if data[tempIndex].examAnswerIndex == 0 {
isAnswerSucceed = false
examJudgeResult.text = "回答错误"
examJudgeResult.textColor = UIColor.red
} else if data[tempIndex].examAnswerIndex == 1 {
isAnswerSucceed = true
examJudgeResult.text = "回答正确"
examJudgeResult.textColor = UIColor.systemGreen
}
}
@objc func wrongListener(){
if data[tempIndex].examAnswerIndex == 0 {
isAnswerSucceed = true
examJudgeResult.text = "回答正确"
examJudgeResult.textColor = UIColor.systemGreen
} else if data[tempIndex].examAnswerIndex == 1 {
isAnswerSucceed = false
examJudgeResult.text = "回答错误"
examJudgeResult.textColor = UIColor.red
}
}
// 是否回答正确
@objc func isAnswerSucced() -> Bool{
print("------> \(isAnswerSucceed)")
return isAnswerSucceed
}
}
ViewController
import UIKit
import SnapKit
class ExamViewController: BaseViewController, UICollectionViewDelegate, UICollectionViewDataSource {
let EXAM_CELL_ID = "EXAM_CELL_ID"
var nextIndex: Int = 0
var data: Array<ExamModel>!
var collectionView: UICollectionView!
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return data.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: EXAM_CELL_ID, for: indexPath) as! ExamCell
cell.setData(data: self.data)
cell.updateCell(indexPath: indexPath)
cell.responseCellEvent(i: indexPath.row)
return cell
}
private func initData(){
data = Array<ExamModel>()
data.append(ExamModel(examTitleString: "在Swift中，class是引用传递，struct是值传递", examAnswerIndex: 1, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "viewDidLoad()方法在应用程序的生命周期仅且仅调用一次", examAnswerIndex: 1, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "iOS12及以上默认支持http请求", examAnswerIndex: 0, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "class方法可被子类继承并重写", examAnswerIndex: 0, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "View及其子类设置maskToBounds及其相关属性，绘制帧率不变", examAnswerIndex: 0, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "一般而言，Alamofire可在reponse获取到后直接更新UI", examAnswerIndex: 1, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "一般而言，URLSessionTask可在reponse获取到后直接更新UI", examAnswerIndex: 0, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "MVVM架构中，V与M的通信是双向的", examAnswerIndex: 0, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "Navigation导航的机制是先进先出", examAnswerIndex: 0, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "双赋值号可直接用来判断字符串、数值、对象是否相等", examAnswerIndex: 1, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "MVC架构中，V与M的通信是双向的", examAnswerIndex: 1, examTypeString: "判断"))
data.append(ExamModel(examTitleString: "在select语句中，*号查询与罗列查询所需字段进行查询其性能消耗是一样的", examAnswerIndex: 0, examTypeString: "判断"))
}
private func initView(){
initData()
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: self.view.frame.width, height: self.view.frame.height)
flowLayout.minimumLineSpacing = 0.000001
flowLayout.scrollDirection = .horizontal
collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 0, height: 0), collectionViewLayout: flowLayout)
collectionView.register(ExamCell.self, forCellWithReuseIdentifier: EXAM_CELL_ID)
collectionView.backgroundColor = UIColor.white
collectionView.delegate = self
collectionView.dataSource = self
collectionView.allowsMultipleSelection = true
collectionView.isPagingEnabled = true
self.view.addSubview(collectionView)
collectionView.snp.makeConstraints{ make in
make.width.equalToSuperview()
make.top.equalTo(self.view.snp.top).offset(100)
make.bottom.equalTo(self.view.snp.bottom)
make.center.equalToSuperview()
}
}
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.clear
// Do any additional setup after loading the view.
initView()
}
// MARK: - Event.
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! ExamCell
print("------> EXECUTE.")
collectionView.layoutIfNeeded()
if cell.isAnswerSucced(){
self.nextIndex = (indexPath.row + 1)
print("NEXT INDEX:\(nextIndex)")
self.collectionView.scrollToItem(at: IndexPath(row: nextIndex, section: 0), at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true)
}
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if collectionView.contentOffset.x > 0 {
collectionView.bounces = true
}
if collectionView.contentOffset.x < 0 {
collectionView.bounces = false
}
}
}
注意：有点遗憾的是没做到答题正确后能自动跳至下一题，希望有读者能提出解决方法。
扫一扫
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
