Question

我想创建类似这样的东西： Output

这是我到目前为止尝试过的：

class RoundedShadowCorners {
    func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat,_ navigationItem: UINavigationItem){
        topBar.isTranslucent = false
        topBar.tintColor = UIColor.orange

        topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        topBar.shadowImage = UIImage()
        topBar.backgroundColor = UIColor.white
        let shadowView = UIView(frame: CGRect(x: 0, y: -offset, width: (topBar.bounds.width), height: (topBar.bounds.height) + offset))
        shadowView.backgroundColor = UIColor.white
        topBar.insertSubview(shadowView, at: 1)

        let shadowLayer = CAShapeLayer()
        shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight , .topLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath

        shadowLayer.fillColor = UIColor.white.cgColor

        shadowLayer.shadowColor = UIColor.darkGray.cgColor
        shadowLayer.shadowPath = shadowLayer.path
        shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0)
        shadowLayer.shadowOpacity = 0.8
        shadowLayer.shadowRadius = 2

        shadowView.layer.insertSublayer(shadowLayer, at: 0)

        topBar.prefersLargeTitles = true
        topBar.topItem?.title = "HJFSKDJKA"
    }
}

问题在于，这会使标题文本位于实际的NavigationBar后面，并且只有为标题创建新的UIView并尝试将其放置在屏幕上时，才能显示标题文本，这使得将标题文本变得非常困难响应的。

偏移量是view.safeAreaInsets.top

我宁愿不做一个新的UIView来做，因为这会使事情变得复杂，但是我什至无法开始做。

Answer 1

这是经过更新和测试的代码，有些行需要更新以克服此行为，请通过我的在线注释获取详细信息。

func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat){
    // Set the prefers title style first
    // since this is how navigation bar bounds gets calculated
    // 
    topBar.prefersLargeTitles = true
    topBar.topItem?.title = "HJFSKDJKA"

    topBar.isTranslucent = false
    topBar.tintColor = UIColor.orange

    topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    topBar.shadowImage = UIImage()
    topBar.backgroundColor = UIColor.white
    // Make your y position to the max of the uiNavigationBar
    // Height should the cornerRadius height, in your case lets say 20
    let shadowView = UIView(frame: CGRect(x: 0, y: topBar.bounds.maxY, width: (topBar.bounds.width), height: 20))
    // Make the backgroundColor of your wish, though I have made it .clear here
    // Since we're dealing it in the shadow layer
    shadowView.backgroundColor = .clear
    topBar.insertSubview(shadowView, at: 1)

    let shadowLayer = CAShapeLayer()
    // While creating UIBezierPath, bottomLeft & right will do the work for you in this case
    // I've removed the extra element from here.
    shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath

    shadowLayer.fillColor = UIColor.white.cgColor
    shadowLayer.shadowColor = UIColor.darkGray.cgColor
    shadowLayer.shadowPath = shadowLayer.path
    // This too you can set as per your desired result
    shadowLayer.shadowOffset = CGSize(width: 2.0, height: 4.0)
    shadowLayer.shadowOpacity = 0.8
    shadowLayer.shadowRadius = 2
    shadowView.layer.insertSublayer(shadowLayer, at: 0)

}

这是一篇详细的文章。 Medium

导航栏的圆角和阴影

1 个答案: