不同iPhone设备上环绕imageView的环形图层错位问题如何解决？

我来帮你搞定这个环形图层在不同iPhone上显示异常的问题！核心原因其实很简单：你现在是在视图布局还没完成的时候（比如viewDidLoad里）就用了profileImage的center和frame属性来计算环形路径，但AutoLayout下这些值在布局完成前都是不准确的——不同设备屏幕尺寸、布局约束生效时机不同，自然只有某一款设备显示正常。

下面是具体的修复步骤：

1. 把环形图层的创建逻辑移到布局完成后的时机 #

最可靠的做法是把代码放到viewDidLayoutSubviews方法里，这个方法会在所有约束生效、视图布局完成后调用，此时profileImage的frame和center都是准确的。另外要注意避免重复创建图层，所以我们把trackLayer定义成类的属性：

// 先在类里声明trackLayer属性，方便后续判断是否已创建
private var trackLayer: CAShapeLayer?

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // 已经创建过的话就直接返回，避免重复添加
    guard trackLayer == nil else { return }
    
    // 把imageView的内部中心坐标转换到self.view的坐标系下，比直接用center更可靠
    let imageCenterInView = profileImage.convert(profileImage.bounds.center, to: view)
    
    // 用safeAreaInsets来适配不同机型的导航栏+状态栏高度，比硬取navigationBar frame更准确
    let topExtraOffset = view.safeAreaInsets.top + 20
    let center = CGPoint(x: imageCenterInView.x, y: imageCenterInView.y + topExtraOffset)
    
    // 用imageView的bounds宽度计算半径，bounds是视图自身的尺寸，不受父布局影响
    let radius = (profileImage.bounds.width / 2) + 2
    let circularPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: -CGFloat.pi - CGFloat.pi/2, endAngle: CGFloat.pi/2, clockwise: true)
    
    // 创建并配置环形图层
    trackLayer = CAShapeLayer()
    trackLayer?.path = circularPath.cgPath
    trackLayer?.strokeColor = Functions.hexStringToUIColor(hex: "#3859B9").cgColor
    trackLayer?.lineWidth = 3
    trackLayer?.lineCap = kCALineCapRound
    trackLayer?.fillColor = UIColor.clear.cgColor
    
    view.layer.addSublayer(trackLayer!)
}

2. 优化导航栏高度的获取方式 #

原来的代码直接取navigationBar.frame.size.height，但在有刘海的设备上，状态栏高度也需要考虑进去。用view.safeAreaInsets.top可以自动适配所有机型——它已经包含了状态栏+导航栏的总高度，不需要再单独计算导航栏高度，更省心。

3. 处理后续布局变化（可选） #

如果你的profileImage可能在后续发生布局变化（比如屏幕旋转、动态调整约束），可以在viewDidLayoutSubviews里去掉guard trackLayer == nil else { return }的判断，而是每次都更新trackLayer的路径：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    let imageCenterInView = profileImage.convert(profileImage.bounds.center, to: view)
    let topExtraOffset = view.safeAreaInsets.top + 20
    let center = CGPoint(x: imageCenterInView.x, y: imageCenterInView.y + topExtraOffset)
    let radius = (profileImage.bounds.width / 2) + 2
    let circularPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: -CGFloat.pi - CGFloat.pi/2, endAngle: CGFloat.pi/2, clockwise: true)
    
    if let trackLayer = trackLayer {
        // 已存在则更新路径
        trackLayer.path = circularPath.cgPath
    } else {
        // 不存在则创建
        trackLayer = CAShapeLayer()
        trackLayer?.path = circularPath.cgPath
        trackLayer?.strokeColor = Functions.hexStringToUIColor(hex: "#3859B9").cgColor
        trackLayer?.lineWidth = 3
        trackLayer?.lineCap = kCALineCapRound
        trackLayer?.fillColor = UIColor.clear.cgColor
        view.layer.addSublayer(trackLayer!)
    }
}

这样不管布局怎么变，环形图层都会跟着profileImage的位置和尺寸自动调整，完美适配所有iPhone设备。

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