iOS如何将圆形UIImageView设置为导航栏navigation bar的titleView

问题根因 #

• 你给titleView设置的固定frame会被UINavigationBar的自动布局逻辑覆盖，实际运行时titleView的尺寸会被压缩，导致预先计算的cornerRadius不准，最终圆形被裁切
• UIImageView使用了.scaleAspectFit，图片会自适应缩放后在视图内留白，有效显示区域小于imageView本身尺寸，切圆角后视觉上不是正圆贴合图片
• 没有添加约束固定titleView和imageView的尺寸关系，尺寸会随导航栏状态变化发生错位

修正后代码 #

let imageView = UIImageView(image: UIImage(named: "test-image"))
// 改为scaleAspectFill让图片铺满视图，不留空白区域
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
// 圆角值和后续约束的头像尺寸对应，36pt高度对应18pt圆角
imageView.layer.cornerRadius = 18
// 可选：添加细边框，和系统信息app原生效果对齐，自动适配明暗模式
imageView.layer.borderWidth = 0.5
imageView.layer.borderColor = UIColor.separator.cgColor

let titleView = UIView()
titleView.addSubview(imageView)

// 关闭autoresizing自动转化为约束
imageView.translatesAutoresizingMaskIntoConstraints = false
titleView.translatesAutoresizingMaskIntoConstraints = false

// 添加布局约束固定尺寸和位置
NSLayoutConstraint.activate([
    imageView.widthAnchor.constraint(equalToConstant: 36),
    imageView.heightAnchor.constraint(equalToConstant: 36),
    imageView.centerXAnchor.constraint(equalTo: titleView.centerXAnchor),
    imageView.centerYAnchor.constraint(equalTo: titleView.centerYAnchor),
    
    // 固定titleView尺寸，避免被导航栏布局压缩
    titleView.widthAnchor.constraint(equalToConstant: 36),
    titleView.heightAnchor.constraint(equalToConstant: 36)
])

self.navigationItem.titleView = titleView

核心修改说明 #

• 替换contentMode为.scaleAspectFill，保证图片完全铺满imageView，不会出现多余留白，切圆角后正好贴合图片边缘
• 改用自动布局约束固定头像和titleView的尺寸，避免被UINavigationBar的默认布局逻辑压缩，彻底解决圆形被裁切的问题
• 可选添加的分隔边框和系统原生信息app的导航栏头像效果完全一致，会随系统明暗模式自动切换边框颜色

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