UITextField中的内部阴影带圆角

Question

我想实现这个UITextField设计：

在Zeplin中，这里是阴影的属性：

我试过了什么？

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)
}

结果：

更新：

覆盖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)
}

结果：

角半径导致问题，因为路径仍然是矩形，阴影看起来不同

Answer 1

只需使用圆角矩形路径：

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

Answer 2

要达到这个目的，我添加了一个uiimageview并将图像输入为阴影文本单元格，然后在uiimageview顶部放置了具有清晰背景的标签，这样您就可以通过文本看到阴影图像。这一切都是使用情节提要完成的，因此我没有要显示的代码，也不允许上传图像。希望这可以帮助。