带有圆角的UITextField中的内部阴影 [英] Inner shadow in UITextField with rounded corners
本文介绍了带有圆角的UITextField中的内部阴影的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要实现此UITextField
设计:
在Zeplin中,这是阴影的属性:
In Zeplin here is the properties of the shadow:
我尝试了什么?
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)
}
结果:
更新:
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)
}
结果:
拐角半径引起问题,因为路径仍然是矩形并且阴影看起来不同
the corner radius is causing a problem because the path is still rectangular and the shadow looks different
推荐答案
只需使用四舍五入的rect路径:
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)
}
这篇关于带有圆角的UITextField中的内部阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文