我有一个如屏幕截图所示的 UI。我目前已经使用 tableviews 完成了这项工作。屏幕是一个带有 4 行静态原型单元格的表格视图。一个用于包含个人资料图像的标题,下一个用于个人资料简介,第三行用于收藏夹、订阅、事件图像按钮,最后一行用于内容,这是另一个表格视图。
最喜欢的部分
订阅部分
我对内容使用了一个内部表格视图,其中包含收藏夹、订阅和事件中的所有元素在一个单元格中。一次加载,我隐藏其他元素并根据图标点击仅显示一个。
问题是收藏夹部分的单元格高度不一致。标签中多于一行时存在间隙。在订阅部分,最后一项触及标签栏。
我禁用了外部表格视图的滚动,因此只有内部表格视图(内容部分)滚动,这在较小的屏幕上并不令人愉快。
class ProfileViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
profileTableView = ProfileSectionTableView() // inner table view
profileTableView.profileDelegate = self
profileSectionTableView.delegate = profileTableView
profileSectionTableView.dataSource = profileTableView
profileSectionTableView.rowHeight = UITableView.automaticDimension
profileSectionTableView.estimatedRowHeight = 44
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
switch (indexPath.row) {
case 0:
return 176
case 1:
return 72
case 2:
let height = self.view.frame.height - (176 + 72 + (self.tabBarController?.tabBar.frame.height)! + 8)
return height
default:
return UITableView.automaticDimension
}
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return 44
}
}
内容节表视图代码为:
class ProfileSectionTableView: UITableView, UITableViewDelegate, UITableViewDataSource, ProfileSectionViewDelegate {
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let cell = updateTableCell(tableView, indexPath) as! ProfileCell
var height = UITableView.automaticDimension
if (ProfileData.profileViewType == .favourite) {
height = cell.favouritesTitleLabel.text!.height(withConstrainedWidth: cell.favouritesTitleLabel.frame.width - 64, font: UIFont(name: "Roboto", size: 17.0)!) + 28
} else if (ProfileData.profileViewType == .subscription) {
height = cell.subscriptionTitleLabel.text!.height(withConstrainedWidth: cell.subscriptionTitleLabel.frame.width - 64, font: UIFont(name: "Roboto", size: 17.0)!) + 16
}
return height
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
// ...
}
extension String {
func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [.font: font], context: nil)
return ceil(boundingBox.height)
}
}
如何修复细胞之间的间隙?我将标签线设置为0
. 如何为这样的屏幕布局 UI 元素?上述方法正确吗?或者我应该使用 UIViewController 和部分的容器视图?