Закругленные углы и тень для панели навигации

Question

Я хочу создать что-то вроде этого: Вывод

Это то, что я пробовал до сих пор:

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"
    }
}

Проблема в том, что это делает текст заголовка находится за фактической панелью навигации, и я могу заставить его выступить, только если я создаю новый UIView для заголовка и пытаюсь расположить его на экране, что крайне затрудняет реагирование.

смещение view.safeAreaInsets.top

Я бы предпочел сделать это без создания нового UIView, потому что это усложняет ситуацию, но я даже не мог начать это делать.

Answer 1

Это обновленный и протестированный код, были определенные строки, которые необходимо обновить, чтобы преодолеть это поведение, go в моих встроенных комментариях для деталей.

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)

}

Вот подробная статья по этому вопросу. Средний