带有固定页脚UIButton的TableView中的多个单元格类型

带有固定页脚UIButton的TableView中的多个单元格类型

此案例终于实作成功啰!为了感谢社群的温暖力量,我分享我自己实作后遇到的困难点,希望也能帮助其他跟我一样遇到困难的朋友们。

画面需求:

1.有五种搜寻items的方式,两个栏位是透过api回传可选的选项,两个栏位是跳出日期选择,一种栏位是输入编号,共有五种(分四个部分)。

2.使用者点击文本字段之后,会跳出pickerView压在tableView上面

3.有一个修复页脚按钮作用是送出筛选条件的提交按钮

根据图片所示的需求,我苦恼很久,在通过各位好心的大大给的各种建议,我决定先采用tableView搭配类似的单元格类型去实作里面的内容。虽然有其他大大推荐的滚动视图,也是很不错的方案,但我暂时无法自己应付自动布局,会花比较多的时间。tableView的好处是可以帮我处理自动布局。

困难1。 在实作的过程中,遇到比较难的问题在于,我要的是触发里面的文本字段,而不是触发cell,所以我必须要禁用(取消)cell的触发事件功能,然后使用addTarget这个方法去触发功能,再透过功能的发件人获得我为文本字段设置的标签编号去攫取文本字段的值。

注意:可是我还是无法达到不要让textfield可以输入字,但依然触发tag event

演示:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
switch indexPath.section {
case 0:
let cell = tableView.dequeueReusableCell(withIdentifier: "dateCell")! as! SearchByDateCell

cell.dataTest.tag = 11
cell.dataTest.addTarget(self, action: #selector(OrderViewController.selectAction), for: UIControlEvents.editingDidBegin)

Return cell
default:
// code here
return cell
}
}

困难2。 选择器视图与表视图的实作函数在同一个视图控制器类中,感觉非常杂,只好使用备注,和排放整齐来让程序码更易读。另外的选择器视图要压在表视图这个地方不是穿透IB或纯代码一开始实作很不适应,因为不了解UIView之前的层次优先问题,导致选择器视图一直出不来。以下是成功的实际选择器视图压在表视图的功能代码

 func configSortPickerView(pickerViewTag: Int, doneButtonTag: Int) { 

//Create the view
let inputView = UIView(frame: CGRect(x: 0, y: self.view.frame.height - 200, width: self.view.frame.width, height: 200))
inputView.backgroundColor = UIColor.lightGray
inputView.tag = 1111

// 建立 UIPickerView
testPickerView = UIPickerView(frame: CGRect(x: 0, y: 20, width: self.view.frame.width, height: 180))

// Set UIPickerView's tag to distinguishing
testPickerView .tag = pickerViewTag
testPickerView .backgroundColor = UIColor.lightGray

// 設定 UIPickerView 的 delegate 及 dataSource
testPickerView .delegate = self
testPickerView .dataSource = self

inputView.addSubview(testPickerView )

// 實作一個按鈕,在picker view讓使用者可以確認選項後,讓picker view隱藏起來。
let doneButton = UIButton(frame: CGRect(x: ((self.view.frame.size.width/2) - (100/2)),y: 0,width: 100,height: 50))
doneButton.setTitle("Done", for: UIControlState.normal)
doneButton.setTitle("Done", for: UIControlState.highlighted)
doneButton.setTitleColor(UIColor.black, for: UIControlState.normal)
doneButton.setTitleColor(UIColor.gray, for: UIControlState.highlighted)

inputView.addSubview(doneButton) // add Button to UIView

doneButton.tag = doneButtonTag
doneButton.addTarget(self, action: #selector(PageViewController.doneButton), for: UIControlEvents.touchUpInside) // set button click event
self.view.addSubview(inputView)
}

困难3.xib与cell的绑定不知道应该在哪里实作。因为以前一开始写学ios都是使用Story board IB,所以要客制化视图反而很失措。后来才在网路上找到资源,每一个cell的xib应该要在viewDidLoad()里面去实作绑定,请看我的范例程式码:

 // Config the tableView and cells 
tableView.frame = CGRect(x: 0, y: 65, width: screenWidth, height: screenHeight - 98)
tableView.delegate = self
tableView.dataSource = self
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
tableView.register(UINib(nibName: "SearchSortTypeCell", bundle: nil), forCellReuseIdentifier: "sortCell")
tableView.register(UINib(nibName: "SearchByDateCell", bundle: nil), forCellReuseIdentifier: "dateCell")
tableView.register(UINib(nibName: "SearchByBnBCell", bundle: nil), forCellReuseIdentifier: "bnbCell")
tableView.register(UINib(nibName: "SearchByOrdNumCell", bundle: nil), forCellReuseIdentifier: "ordNumCell")
tableView.rowHeight = UITableViewAutomaticDimension; //<--Calculates rows height
tableView.estimatedRowHeight = 50.0

tableView.allowsSelection = false

tableView.backgroundColor = UIColor(hexString: "#f2f2f2")
self.view.addSubview(tableView)

困难4.因为有实质上单元配合五种textField,还有少量pickerView,都是都是不同的内容,所以我都必须要用标签去辨别是哪个文本字段被触发,里面的值是什么,要更新内容等等,所以整个视图控制器充满了标签的使用率之高。

tag之所以一直用到,是因为我自己写的功能会被点击触发,但是function是共享给不同的textField使用,所以当功能被fire的时候透过sender.tag可以去识别是哪一个textField被触发了,并透过self.view.viewWithTag(数字)去拿取该文本字段或更新里面的值。我比较好奇的是,之前写网页都可以利用id =“ pickDate”命名后,在使用JS或JQ直接用$ (“ #pickDate”)。click(…..)的方式去listen事件,但ios上面去只能使用标签,而且只能输入Int…,很难透过Int数字去辨别触发源,我认为维护性很低。

以上就是我实作作这个页面克服遇到的困难,还有目前依然疑惑的地方,欢迎各位大大或者朋友们一起看看有没有更好地做好喔〜