带有内部阴影的自定义圆形文本字段没有得到正确的布局

Question

我想制作一个带有内嵌阴影的文本框。

我找到了一个答案但我没有得到预期的结果，因为我没有足够的业力并且无法 post 发表评论。

这是我得到的结果：

这是代码：

func applyDesign() {

    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.darkGray.cgColor
    innerShadow.shadowOffset = CGSize(width: 0, height: 2)
    innerShadow.shadowOpacity = 0.5
    innerShadow.shadowRadius = 2
    innerShadow.cornerRadius = self.frame.size.height/2
    layer.addSublayer(innerShadow)
}

我如何编辑代码以使文本字段再次正确缩放屏幕？

Answer 1

关键是你在哪里调用applyDesign。加载视图时，它通常具有从 nib / init 方法派生的大小。因此，如果您当时应用设计，它可能与稍后屏幕上的内容不匹配。

在您的情况下，您应该在每次文本字段由自动布局引擎布局时重新应用这些自定义设计。

简短示例：

class CustomField: UITextField {

    lazy var innerShadow: CALayer = {
        let innerShadow = CALayer()
        layer.addSublayer(innerShadow)
        return innerShadow
    }()

    override func layoutSubviews() {
        super.layoutSubviews()
        applyDesign()
    }

    func applyDesign() {
        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.darkGray.cgColor
        innerShadow.shadowOffset = CGSize(width: 0, height: 2)
        innerShadow.shadowOpacity = 0.5
        innerShadow.shadowRadius = 2
        innerShadow.cornerRadius = self.frame.size.height/2
    }
}

您可以通过将一些冗余设置从 applyDeisgn 移动到某种一次性初始化器（即使在这个惰性变量定义中）来改进它。

带有内部阴影的自定义圆形文本字段没有得到正确的布局

Custom rounded Textfield with inner shadows does not get a correct layout

xcode

calayer

uiview

uibezierpath

swift