how can I remove the top border on UIToolBar

Question

I have set my UIToolBar tint color to some value, and there is this border line that I see in which I want to remove:

Answer 1

The clipsToBounds technique clips the UIToolBar's shadow as well as the background view. On an iPhone X, that means the background no longer reaches outside the safe area.

The solution below uses a mask to clip only the top of the UITabBar. The mask is rendered in a UIToolBar subclass, and the mask frame is kept updated in an override of layoutSubviews.

class Toolbar: UIToolbar {

    fileprivate let maskLayer: CALayer = {
        let layer = CALayer()
        layer.backgroundColor = UIColor.black.cgColor
        return layer
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        initialize()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initialize()
    }

    fileprivate func initialize() {
        layer.mask = maskLayer
        // Customize toolbar here
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        // height is an arbitrary number larger than the distance from the top of the UIToolbar to the bottom of the screen
        maskLayer.frame = CGRect(x: -10, y: 0, width: frame.width + 20, height: 500)
    }

}