UITableView实现步骤
- 创建UITableviewController或在UIViewController中添加tableView
- 设置tableView的代理(delegate、dataSource)
- 根据需求设计cell,并注册复用
- 实现tableView的代理方法
一个tableView中有多个不同的cell,怎么设置比较好
这种问题在日常开发中经常会遇到网上也有很多解决方案,这里根据本人日常工作作出总结
- 情况一
-
整个tableView结构分成A, B, C三部分如下图
- 只有B部分涉及到复用的,那么我们可以将A, C两部分分别设置为header与footer
这样可以免去根据indexPath去选择cell的类型,省去一堆if...else
代码看起来会更加简洁,后期维护起来也会更方便 - 如果是A, B, C三部分循环也可以用这种方案,一个循环是一个section,A, C分别是section的header与footer
-
- 情况二
- A, B, C三部分都会循环
这样我习惯会采用枚举,根据枚举分section的操作
在枚举里面还可以设置一些属性参数
- A, B, C三部分都会循环
enum SectionType: Int, CaseIterable {
case pollTitle
case description
case pollOption
var title: String {
switch self {
case .pollTitle:
return "New Poll"
case .description:
return "Optional Description"
case .pollOption:
return "Poll Options"
}
}
}
override func numberOfSections(in tableView: UITableView) -> Int {
return SectionType.allCases.count
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
guard let section = SectionType(rawValue: section) else { return 0 }
switch section {
case . pollTitle, .description: return 1
case . pollOption: return pollOptions.count
}
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let section = SectionType(rawValue: indexPath.section) else { return UITableViewCell() }
switch section {
case .pollTitle:
let cell: XOFormSingleLineTableViewCell = tableView.dequeueReusableCell(for: indexPath)
return cell
case .description:
let cell: XOFormParagraphTableViewCell = tableView.dequeueReusableCell(for: indexPath)
return cell
case .pollOption:
let cell: CommunityPollTableViewCell = tableView.dequeueReusableCell(for: indexPath)
return cell
}
}
tableView应该group还是plain
UITableView有两种表现形式,一种是plain(默认)一个是group
最直观的区别就是plain形式下,header与footer会悬浮,group不会,并且对内容进行了分组(section)
- 正如上述,如果我们创建tableView在第一种情况,那么会发现无论怎么滑动,header与footer都是固定在顶部与底部的,不会随着tableView而滚动
如果需要header与footer一起滚动,我们把tableView style设置为group就可以解决这问题
plain | group |
---|---|
- 把tableView style改为group将会引发第二个问题
实现效果与我们UI设计预想有了出入
无论是顶部的空白条还是comments下面的那个间隙都不是我们想要的
当现实现 | 设计 |
---|---|
- 解决方案
因为gruop style会默认带了header与footer,如果你没有设置header与footer高度,会有一个默认值,我们需要设置一个很小是值去替换掉默认值,网上一般用0.01或者0.1去替换,但是个人觉得用leastNonzeroMagnitude
会更好,代码可读性会更高
This value compares less than or equal to all positive numbers, but
greater than zero. If the type supports subnormal values,
leastNonzeroMagnitude
is smaller thanleastNormalMagnitude
;
otherwise they are equal.
tableView.sectionHeaderHeight = CGFloat.leastNonzeroMagnitude
tableView.sectionFooterHeight = CGFloat.leastNonzeroMagnitude
tableView.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: CGFloat.leastNonzeroMagnitude))
这样处理下来,整个tableView与我们UI设计稿上一样的效果了
当Cell含有textField时,滑动textField的文字会消失
- 很多App会有输入信息这样的功能,在做这些功能的时候会将textField放在cell上,但是如果没处理好就会出现滑动textField的文字消失的情况
- 我们可以通过一个model把cell的index与text对应存起来,那么就可以避免这样的问题出现
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: TableViewCell_textField = tableView.dequeueReusableCell(for: indexPath)
cell.setup(index: indexPath.row, model: array[indexPath.row], delegate: self)
return cell
}
func tableViewCell(_ cell: TableViewCell_textField, inputTextFieldDidChange index: Int, text: String?) {
guard let text = text else { return }
if array.count > index {
array[index].text = text
}
}
本文主要用于记录工作中使用tableView时遇到的问题及解决方案
如果大家有其他解决方案欢迎留言交流
支持原创,版权所有
未完待续
- UITableView相关文章更新
UITableView--分离代理为VC瘦身
UITableView--代码优化