Inner shadow in UITextField with rounded corners

问题

I want to implement this UITextField design:

In Zeplin here is the properties of the shadow:

What I have tried ?

override func layoutSubviews() {
    super.layoutSubviews()
    self.layer.cornerRadius = self.frame.size.height/2
    self.addInnerShadow()
}


private func addInnerShadow() {
    let innerShadow = CALayer()
    innerShadow.frame = bounds
    // Shadow path (1pt ring around bounds)
    let path = UIBezierPath(rect: innerShadow.bounds.insetBy(dx: -1, dy: -1))
    let cutout = UIBezierPath(rect: innerShadow.bounds).reversing()
    path.append(cutout)
    innerShadow.shadowPath = path.cgPath
    innerShadow.masksToBounds = true
    // Shadow properties
    innerShadow.shadowColor = UIColor.black.cgColor
    innerShadow.shadowOffset = CGSize(width: 0, height: 3)
    innerShadow.shadowOpacity = 0.05
    innerShadow.shadowRadius = 3
    innerShadow.cornerRadius = self.frame.size.height/2
    layer.addSublayer(innerShadow)
}

result:

Update:

override func layoutSubviews() { super.layoutSubviews() self.layer.cornerRadius = self.frame.size.height/2 self.addInnerShadow() }

private func addInnerShadow() {
    let innerShadow = CALayer()
    innerShadow.frame = bounds
    // Shadow path (1pt ring around bounds)
    let path = UIBezierPath(roundedRect: innerShadow.bounds.insetBy(dx: -1, dy: -1), cornerRadius: self.frame.size.height/2)
    let cutout = UIBezierPath(rect: innerShadow.bounds).reversing()
    path.append(cutout)
    innerShadow.shadowPath = path.cgPath
    innerShadow.masksToBounds = true
    // Shadow properties
    innerShadow.shadowColor = UIColor.black.cgColor
    innerShadow.shadowOffset = CGSize(width: 0, height: 3)
    innerShadow.shadowOpacity = 0.05
    innerShadow.shadowRadius = 3
    //innerShadow.cornerRadius = self.frame.size.height/2
    layer.addSublayer(innerShadow)
}

result:

the corner radius is causing a problem because the path is still rectangular and the shadow looks different

回答1:

Just use a rounded rect path:

private func addInnerShadow() {
    let innerShadow = CALayer()
    innerShadow.frame = bounds

    // Shadow path (1pt ring around bounds)
    let radius = self.frame.size.height/2
    let path = UIBezierPath(roundedRect: innerShadow.bounds.insetBy(dx: -1, dy:-1), cornerRadius:radius)
    let cutout = UIBezierPath(roundedRect: innerShadow.bounds, cornerRadius:radius).reversing()


    path.append(cutout)
    innerShadow.shadowPath = path.cgPath
    innerShadow.masksToBounds = true
    // Shadow properties
    innerShadow.shadowColor = UIColor.black.cgColor
    innerShadow.shadowOffset = CGSize(width: 0, height: 3)
    innerShadow.shadowOpacity = 0.15
    innerShadow.shadowRadius = 3
    innerShadow.cornerRadius = self.frame.size.height/2
    layer.addSublayer(innerShadow)
}

Result screenshot

来源：https://stackoverflow.com/questions/47789872/inner-shadow-in-uitextfield-with-rounded-corners

标签

ios

swift

uitextfield

Shadow