利用AutoLayout实现随子视图动态文本自适应扩展的视图
嘿,这个需求我之前做项目时刚好碰到过,给你几个核心步骤,轻松搞定Dynamic Type下表格页脚的自适应问题:
设置正确的Auto Layout约束,让容器跟随按钮“长大”
你的容器UIView(作为table footer)和内部按钮之间的约束是关键:给按钮添加leading、trailing、top、bottom方向的约束,分别关联到容器视图的内边距(比如左右留16pt,上下留8pt的间距)。这样当按钮因字号变大而扩展时,容器视图会被按钮的约束“撑开”,自动调整自身尺寸。
另外,不需要给容器视图设置固定高度约束,让Auto Layout根据内部按钮的尺寸自动计算容器的intrinsic高度即可。给按钮开启Dynamic Type支持
别用固定字号的字体,一定要用系统提供的Dynamic Type字体,并开启自动适配开关:// 给按钮标签设置跟随系统文本样式的字体,这里用body样式,你也可以选其他比如callout、subheadline button.titleLabel?.font = UIFont.preferredFont(forTextStyle: .body) // 开启自动跟随内容尺寸类别变化的开关 button.titleLabel?.adjustsFontForContentSizeCategory = true这两行是让按钮文本随系统字号变化的核心。如果按钮文本可能较长,记得加上
button.titleLabel?.numberOfLines = 0,允许文本自动换行,避免字号变大后文本被截断。监听字号变化,刷新表格页脚高度
当用户调整系统字号时,系统会发送UIContentSizeCategory.didChangeNotification通知,我们需要监听这个通知,让表格视图重新计算页脚的高度:override func viewDidLoad() { super.viewDidLoad() // 注册通知监听 NotificationCenter.default.addObserver( self, selector: #selector(updateTableFooterSize), name: UIContentSizeCategory.didChangeNotification, object: nil ) } @objc private func updateTableFooterSize() { // 让页脚视图自动调整到合适尺寸 tableView.tableFooterView?.sizeToFit() // 刷新表格,确保页脚高度更新生效 tableView.reloadData() } // 记得在视图销毁时移除通知监听 deinit { NotificationCenter.default.removeObserver(self) }初始化页脚时的小细节
在给tableView设置tableFooterView的时候,记得先调用一次containerView.sizeToFit(),确保初始状态下页脚的高度是正确的:let containerView = UIView() // ... 添加按钮和约束 ... containerView.sizeToFit() tableView.tableFooterView = containerView
这样一套操作下来,当用户调大Dynamic Type字号时,按钮文本会自动变大,按钮本身会根据文本尺寸扩展,容器视图也会跟着按钮的约束自动调整大小,表格页脚的高度也会同步更新,完美适配~
内容的提问来源于stack exchange,提问作者SeanT

