I want to recreate this design with storyboard and swift

Viewed 51

I think about having a custom navigation bar. But I don't know how to create the rounded corner effect with swift and storyboard. Can you help me please ?

An iOS application with a customized header

2 Answers

For rounded coreners you just need to set the layers cornerRadius:

searchBar.layer.cornerRadius = searchBarHeight/2

If you want to do it on storyboards add this code to your custom class or into your extension:

extension UIView {
    @IBInspectable var cornerRadius: Double {
        get {
            return Double(self.layer.cornerRadius)
        }set {
            self.layer.cornerRadius = CGFloat(newValue)
        }
    }
}

If you want to round Just top two corners

    yourView.layer.cornerRadius = 18
    yourView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    yourView.clipsToBounds = true

Also you can use this extension

extension UIView {

    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
         let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
         let mask = CAShapeLayer()
         mask.path = path.cgPath
         self.layer.mask = mask
    }

}

how to use

view.roundCorners([.topLeft,.topRight], radius: 20)

if you want to round all corners you can do it

view.roundCorners([.allCorners], radius: 20)
Related