UIKit代码约束UISegmentedControl布局异常问题求助

我尝试用UIKit代码约束搭建一个简单界面：一行里左侧是UISegmentedControl，右侧是黄色UIView。我希望黄色View的高度和分段控件保持一致，但实际效果里黄色View的底部并没有对齐分段控件的底部，情况如图所示：

以下是我写的相关代码：

parentGuide = top.layoutMarginsGuide 
let choices = UISegmentedControl(items: ["Op1", "Op2"]) 
choices.translatesAutoresizingMaskIntoConstraints = false 
top.addSubview(choices) 
choices.leadingAnchor.constraint(equalTo: parentGuide.leadingAnchor).isActive = true 
choices.topAnchor.constraint(equalTo: parentGuide.topAnchor).isActive = true 

let yellow = UIView() 
yellow.translatesAutoresizingMaskIntoConstraints = false 
top.addSubview(yellow) 
yellow.backgroundColor = UIColor.yellow 
yellow.trailingAnchor.constraint(equalTo: parentGuide.trailingAnchor).isActive = true 
yellow.topAnchor.constraint(equalTo: parentGuide.topAnchor).isActive = true 
yellow.leadingAnchor.constraint(equalTo: parentGuide.trailingAnchor, constant: -40).isActive = true 
yellow.bottomAnchor.constraint(equalTo: choices.layoutMarginsGuide.bottomAnchor).isActive = true 

问题原因分析 #

你这里的核心问题出在错误使用了choices.layoutMarginsGuide.bottomAnchor作为黄色View底部的约束参考。UISegmentedControl的layoutMarginsGuide是控件内部的边距参考线，它的底部锚点比控件本身的实际底部边界要高，并不是控件的真实底部位置。用这个锚点约束黄色View的底部，自然会导致黄色View比分段控件短一截。

修复方案 #

只需要把黄色View底部约束的参考锚点从choices.layoutMarginsGuide.bottomAnchor改成choices.bottomAnchor，直接对齐分段控件本身的底部边界即可：

修改后的约束代码：

yellow.bottomAnchor.constraint(equalTo: choices.bottomAnchor).isActive = true

另外，为了让布局更严谨，你可以把黄色View的宽度约束改成更直观的写法，比如替换当前的leadingAnchor约束为：

yellow.widthAnchor.constraint(equalToConstant: 40).isActive = true
yellow.leadingAnchor.constraint(equalTo: choices.trailingAnchor, constant: 8).isActive = true

这样既明确了黄色View的宽度，还能让它和分段控件之间保持合理间距，整体布局会更规范。

内容的提问来源于stack exchange，提问作者J.Doe