Swift：导航栏中SegmentedControl与小型titleView的布局问题

我完全懂你现在的困扰——开启大标题模式给导航栏留了两行空间，但原本想放在上方的"fetching..."文本偏偏跑到了SegmentedControl下面，和预期完全相反。别着急，咱们可以通过两种方式搞定这个布局问题：

方案一：用自定义容器视图控制上下顺序（最稳妥） #

核心思路是把"fetching..."标签和SegmentedControl放进一个垂直排列的栈视图里，再把这个栈视图设为导航栏的titleView，这样就能精准控制两者的上下顺序。

代码示例：

// 1. 创建垂直排列的容器栈视图
let containerView = UIStackView()
containerView.axis = .vertical
containerView.alignment = .center
containerView.spacing = 8 // 调整两个元素之间的间距

// 2. 创建"fetching..."标签
let fetchingLabel = UILabel()
fetchingLabel.text = "fetching..."
fetchingLabel.font = UIFont.systemFont(ofSize: 14)
fetchingLabel.textColor = .gray

// 3. 初始化你的SegmentedControl
let segmentedControl: UISegmentedControl = {
    let items = ["Now","In 15 mins", "In 1 hour"]
    let sc = UISegmentedControl(items: items)
    sc.selectedSegmentIndex = 0
    sc.apportionsSegmentWidthsByContent = true // 让分段宽度适配文本
    return sc
}()

// 4. 把两个元素按顺序加入栈视图
containerView.addArrangedSubview(fetchingLabel) // 先加标签，放在上方
containerView.addArrangedSubview(segmentedControl) // 再加分段控件，放在下方

// 5. 设置导航栏的titleView为这个容器
navigationItem.titleView = containerView

// 确保大标题模式已开启（你已经做了这一步，这里再确认下）
navigationController?.navigationBar.prefersLargeTitles = true

这个方法的好处是完全利用系统导航栏的布局逻辑，不需要额外处理约束冲突，滚动时大标题的缩放也能正常适配。

方案二：直接给导航栏子视图加约束（灵活但需额外处理） #

如果不想用容器视图，也可以直接把"fetching..."标签加到导航栏上，通过约束强制它在SegmentedControl上方：

// 1. 先把SegmentedControl设为titleView
let segmentedControl: UISegmentedControl = {
    let items = ["Now","In 15 mins", "In 1 hour"]
    let sc = UISegmentedControl(items: items)
    sc.selectedSegmentIndex = 0
    return sc
}()
navigationItem.titleView = segmentedControl

// 2. 创建并添加"fetching..."标签到导航栏
let fetchingLabel = UILabel()
fetchingLabel.text = "fetching..."
fetchingLabel.font = UIFont.systemFont(ofSize: 14)
fetchingLabel.textColor = .gray
navigationController?.navigationBar.addSubview(fetchingLabel)

// 3. 通过约束固定标签位置
fetchingLabel.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    fetchingLabel.centerXAnchor.constraint(equalTo: navigationController!.navigationBar.centerXAnchor),
    fetchingLabel.bottomAnchor.constraint(equalTo: segmentedControl.topAnchor, constant: -8),
    segmentedControl.centerXAnchor.constraint(equalTo: navigationController!.navigationBar.centerXAnchor),
    segmentedControl.bottomAnchor.constraint(equalTo: navigationController!.navigationBar.bottomAnchor, constant: -12)
])

⚠️ 注意：这种方式需要额外处理导航栏滚动时的布局变化（比如大标题缩小为普通标题），可能要监听UIScrollView的滚动事件动态调整约束，所以更推荐第一种方案。

额外注意点 #

• 确保导航控制器的prefersLargeTitles确实设为true，否则导航栏高度不够会导致内容遮挡。
• 可以根据需求调整容器视图的spacing或者标签的字体大小，优化视觉效果。
• 测试不同屏幕尺寸，保证布局在所有设备上都正常显示。

内容的提问来源于stack exchange，提问作者Koh