Панель навигации с тенью и угловым радиусом

Question

Я хотел бы добавить угловой радиус и тень на моем контроллере навигации. Я знаю, как это сделать по отдельности, но когда я пытаюсь поставить оба одновременно, применяется только один. Я пробовал с CALayer, но безуспешно.

Изображение для иллюстрации того, что я хочу

Answer 1

Вот код,

    // 1. Enable prefersLargeTitles and title
    self.navigationController?.navigationBar.prefersLargeTitles = true
    self.title = "Title"

    // 2. Add left, right bar buttons
    let leftBtn = UIBarButtonItem(title: "Edit", style: .done, target: self, action: #selector(item))
    let rtBtn = UIBarButtonItem(title: "Add", style: .done, target: self, action: #selector(item))

    self.navigationItem.rightBarButtonItem = rtBtn
    self.navigationItem.leftBarButtonItem = leftBtn

    //3. Change default navbar to blank UI
    self.navigationController?.navigationBar.isTranslucent = false
    self.navigationController?.navigationBar.tintColor = UIColor.orange

    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.backgroundColor = UIColor.white

    //4. Add shadow and cirner radius to navbar
    let shadowView = UIView(frame: CGRect(x: 0, y: -20,
                                       width: (self.navigationController?.navigationBar.bounds.width)!,
                                       height: (self.navigationController?.navigationBar.bounds.height)! + 20))
    shadowView.backgroundColor = UIColor.white
    self.navigationController?.navigationBar.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)

Вывод:

Редактировать

Вы можете получить высоту динамически, используя

self.navigationController?.view.safeAreaInsets.top

, вернется 44 для iPhone X и 20 для iPhone 8

Код

var offset : CGFloat = (self.navigationController?.view.safeAreaInsets.top ?? 20)

let shadowView = UIView(frame: CGRect(x: 0, y: -offset,
                                   width: (self.navigationController?.navigationBar.bounds.width)!,
                                   height: (self.navigationController?.navigationBar.bounds.height)! + offset))

Выход iPhoneX

Answer 2

Лучший способ - добавить это расширение в ваш класс, добавить расширение в конце вашего класса и добавить тень, а также радиус угла к любому виду, а также к контроллеру навигации:)

изображение показывает Xcode вид

Выход навигационного контроллера

extension UIView {


@IBInspectable
var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        layer.cornerRadius = newValue
    }
}

@IBInspectable
var borderWidth: CGFloat {
    get {
        return layer.borderWidth
    }
    set {
        layer.borderWidth = newValue
    }
}

@IBInspectable
var borderColor: UIColor? {
    get {
        if let color = layer.borderColor {
            return UIColor(cgColor: color)
        }
        return nil
    }
    set {
        if let color = newValue {
            layer.borderColor = color.cgColor
        } else {
            layer.borderColor = nil
        }
    }
}

@IBInspectable
var shadowRadius: CGFloat {
    get {
        return layer.shadowRadius
    }
    set {
        layer.shadowRadius = newValue
    }
}

@IBInspectable
var shadowOpacity: Float {
    get {
        return layer.shadowOpacity
    }
    set {
        layer.shadowOpacity = newValue
    }
}

@IBInspectable
var shadowOffset: CGSize {
    get {
        return layer.shadowOffset
    }
    set {
        layer.shadowOffset = newValue
    }
}

@IBInspectable
var shadowColor: UIColor? {
    get {
        if let color = layer.shadowColor {
            return UIColor(cgColor: color)
        }
        return nil
    }
    set {
        if let color = newValue {
            layer.shadowColor = color.cgColor
        } else {
            layer.shadowColor = nil
        }
    }
}
}

Answer 3

Для решения этой проблемы используйте пользовательский UIView.Смотрите следующий код и вывод, как вы ожидали, я надеюсь, что это вам поможет.

Используя cornerRadius и maskedCorners, вы можете установить конкретныерадиус угла.

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        navigationView.layer.cornerRadius = 20
        navigationView.layer.maskedCorners = [.layerMinXMaxYCorner ,  .layerMaxXMaxYCorner]
        navigationView.addShadow(shadowColor: UIColor.gray.cgColor, shadowOffset: CGSize(width: 1, height: 2), shadowOpacity: 0.5, shadowRadius: 20)
    }

Добавить следующее расширение

extension UIView {

    @IBInspectable var shadow: Bool {
        get {
            return layer.shadowOpacity > 0.0
        }
        set {
            if newValue == true {
                self.addShadow()
            }
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return self.layer.cornerRadius
        }
        set {
            self.layer.cornerRadius = newValue

            // Don't touch the masksToBound property if a shadow is needed in addition to the cornerRadius
            if shadow == false {
                self.layer.masksToBounds = true
            }
        }
    }


    func addShadow(shadowColor: CGColor = UIColor.black.cgColor,
                   shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),
                   shadowOpacity: Float = 0.4,
                   shadowRadius: CGFloat = 3.0) {
        layer.shadowColor = shadowColor
        layer.shadowOffset = shadowOffset
        layer.shadowOpacity = shadowOpacity
        layer.shadowRadius = shadowRadius
    }
}