Swift：Snapchat渐变圆角导航栏实现方法咨询

嘿，我来帮你搞定这个Snapchat风格的导航栏！既然你是在UITableViewController里开发，那咱们一步步来实现渐变背景和圆角效果：

1. 基础准备：让系统导航栏“让位” #

首先得把系统默认的导航栏背景清空，这样我们才能自定义渐变和圆角效果。在viewDidLoad里先加这段代码：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 清除系统导航栏的默认背景和阴影
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
    
    // 调整tableView的内边距，避免内容被导航栏挡住
    tableView.contentInset = UIEdgeInsets(top: navigationController?.navigationBar.frame.height ?? 0, left: 0, bottom: 0, right: 0)
}

2. 添加渐变背景层 #

接下来创建渐变层，用Snapchat标志性的黄橙渐变（你可以随便换成自己想要的颜色），并添加到导航栏的layer里：

// 在viewDidLoad里继续添加
let gradientLayer = CAGradientLayer()
// 渐变颜色数组，按顺序从左到右/从上到下过渡
gradientLayer.colors = [UIColor.systemYellow.cgColor, UIColor.systemOrange.cgColor]
// 设置渐变的起始和结束点，这里是从左上角到右下角的对角线渐变
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)

// 让渐变层铺满整个导航栏
guard let navBarBounds = navigationController?.navigationBar.bounds else { return }
gradientLayer.frame = navBarBounds

// 将渐变层插入到导航栏layer的最底层，避免挡住标题和按钮
navigationController?.navigationBar.layer.insertSublayer(gradientLayer, at: 0)

3. 给导航栏添加圆角 #

Snapchat的导航栏一般是底部两个角带圆角，我们用mask层来实现这个效果（直接给layer加圆角容易出现内容裁切问题）：

// 在添加渐变层之后继续写
let maskLayer = CAShapeLayer()
// 创建圆角路径：只给底部左右两个角设置圆角，半径20（可以根据需求调整）
let cornerPath = UIBezierPath(roundedRect: navBarBounds, 
                              byRoundingCorners: [.bottomLeft, .bottomRight], 
                              cornerRadii: CGSize(width: 20, height: 20))
maskLayer.path = cornerPath.cgPath
// 把mask层应用到渐变层上
gradientLayer.mask = maskLayer

4. 适配屏幕旋转 #

当屏幕旋转时，导航栏的frame会变化，我们需要更新渐变层和mask层的尺寸，在viewWillLayoutSubviews里添加：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    
    guard let navBar = navigationController?.navigationBar,
          let gradientLayer = navBar.layer.sublayers?.first(where: { $0 is CAGradientLayer }) as? CAGradientLayer else {
        return
    }
    
    // 更新渐变层的frame
    gradientLayer.frame = navBar.bounds
    
    // 更新mask层的圆角路径
    let maskLayer = CAShapeLayer()
    let cornerPath = UIBezierPath(roundedRect: navBar.bounds, 
                                  byRoundingCorners: [.bottomLeft, .bottomRight], 
                                  cornerRadii: CGSize(width: 20, height: 20))
    maskLayer.path = cornerPath.cgPath
    gradientLayer.mask = maskLayer
}

5. 优化文字和按钮样式 #

为了让导航栏的标题和按钮在渐变背景上更清晰，我们可以设置它们的颜色：

// 在viewDidLoad里添加
navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
navigationController?.navigationBar.tintColor = .white

可选：添加导航栏阴影 #

如果想要一点阴影增强立体感，可以给渐变层加上阴影效果：

// 在创建gradientLayer之后添加
gradientLayer.shadowColor = UIColor.black.cgColor
gradientLayer.shadowOpacity = 0.2
gradientLayer.shadowOffset = CGSize(width: 0, height: 2)
gradientLayer.shadowRadius = 4

这样一套操作下来，你就能得到一个和Snapchat风格一致的渐变圆角导航栏啦！可以根据自己的需求调整渐变颜色、圆角位置和大小哦～

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