how can I create a UIView with a shadow that would be like iOS keyboards’s keys?

I tried adding a CALayer with

view.layer.insertSublayer(shadowLayer, below: view.layer) // view is the keyboard key view

But I can’t see the new layer doing so. Could you help me?

Thank you

CodePudding user response：

If you inspect the keyboard view using Debug View Hierarchy, you can see that the "key buttons" do not have a shadow ... they have a single-point line on the bottom.

Various ways to do that, but one of the easiest is to add a white CAShapeLayer, give both the view's layer and the shape layer the same size and corner radius, and then shift the shape layer up by one point.

Here's a quick, simple view subclass - marked as @IBDesignable so you can see it in Storyboard / Interface Builder:

@IBDesignable
class BottomShadowView: UIView {
    
    let topLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() {
        
        // add the "white" layer
        layer.addSublayer(topLayer)

        // give both layers the same corner radius
        layer.cornerRadius = 8
        topLayer.cornerRadius = 8

        // set top layer to white
        topLayer.backgroundColor = UIColor.white.cgColor
        
        // if background color is not set, or is clear
        //  set it to dark gray
        if self.backgroundColor == nil || self.backgroundColor == .clear {
            self.backgroundColor = .darkGray
        }
        
    }
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        // if background color is not set, or is clear
        //  set it to dark gray
        if self.backgroundColor == nil || self.backgroundColor == .clear {
            self.backgroundColor = .darkGray
        }
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // make top layer the same size as bounds
        //  offset up 1-point
        topLayer.frame = bounds.offsetBy(dx: 0, dy: -1.0)
    }
    
}

It looks like this (on a systemYellow background):

and zoomed-in for clarity:

CodePudding user response：

I think you can just use the backing CALayer that comes with every UIView for this.

    func keyLetterButtonView ( havingLetter letter : String) -> UIView
    {
        let v = UIView()
        let l = v.layer
        l.cornerRadius = 4.0
        l.shadowOpacity = 1.0
        l.shadowRadius = 0
        l.shadowColor = UIColor.systemGray.cgColor
        l.shadowOffset = CGSize ( width: 0, height: 1.0)
        v.backgroundColor = .systemGray6
        
        // Key letter
        let label = UILabel()
        label.font = UIFont.preferredFont(forTextStyle: .title3)
        label.textAlignment = .center
        label.text = letter
        v.addSubview ( label)
        
        var constraints = [NSLayoutConstraint]()
        for vv in [ v, label] {
            vv.translatesAutoresizingMaskIntoConstraints = false
            let sizeConstraints = [
                vv.widthAnchor.constraint (
                    equalToConstant: 28.0
                )
              , vv.heightAnchor.constraint (
                    equalToConstant: 42.0
                )
            ]
            constraints.append (
                contentsOf: sizeConstraints
            )
        }
        NSLayoutConstraint.activate ( constraints)
        
        return v
    }