Swift - 视图不规则形状的阴影
Swift - Shadow for a irregular shape of a View
我正在努力为自定义形状添加阴影。
这是我要构建的图片:
(不要介意文字和符号)
您可以看到右侧带有弧形角的自定义形状,左侧带有阴影的矩形。
我正在使用 UIView,并在左侧添加了角。
这是我目前拥有的正确塑造视图的代码:
View1.backgroundColor = .green //green color is just to see the shape well
let path = UIBezierPath(roundedRect:View1.bounds,
byRoundingCorners:[.topRight, .bottomRight],
cornerRadii: CGSize(width: self.frame.height/2, height: self.frame.height/2))
let maskLayer = CAShapeLayer()
我试过给它加阴影,但是阴影没有出现。
这是我尝试添加阴影的代码:
View1.layer.masksToBounds = false
View1.layer.layer.shadowPath = maskLayer.path
View1.layer.shadowColor = UIColor.black.cgColor
View1.layer.shadowOffset = CGSize(width: 0.0, height: 3.0)
View1.layer.shadowOpacity = 0.5
View1.layer.shadowRadius = 1.0
如何给这个形状添加阴影?
您可以通过使用单个 UIView (shadowView)、添加 shapeLayer 子图层并设置 shadowView 图层的阴影来实现此目的。
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
setup()
}
@IBOutlet var shadowView: UIView!
func setup() {
// setup irregular shape
let path = UIBezierPath.init(roundedRect: shadowView.bounds, byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize.init(width: 20, height: 20))
let layer = CAShapeLayer.init()
layer.frame = shadowView.bounds
layer.path = path.cgPath
layer.fillColor = UIColor.white.cgColor
layer.masksToBounds = true
shadowView.layer.insertSublayer(layer, at: 0)
// setup shadow
shadowView.layer.shadowRadius = 8
shadowView.layer.shadowOpacity = 0.2
shadowView.layer.shadowOffset = CGSize.init(width: 0, height: 2.5)
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowPath = path.cgPath
}
}
注:
shadowView.clipToBounds
必须 false
才能使阴影生效。
要查看 layer.fillColor
,请将 shadowView.backgroundColor
设置为 .clear
。
通过设置 'Background' 属性 并取消选中 'Clip to Bounds' 复选框,您可以通过 Interface Builder 轻松实现上述目标。
我正在努力为自定义形状添加阴影。
这是我要构建的图片:
您可以看到右侧带有弧形角的自定义形状,左侧带有阴影的矩形。 我正在使用 UIView,并在左侧添加了角。
这是我目前拥有的正确塑造视图的代码:
View1.backgroundColor = .green //green color is just to see the shape well
let path = UIBezierPath(roundedRect:View1.bounds,
byRoundingCorners:[.topRight, .bottomRight],
cornerRadii: CGSize(width: self.frame.height/2, height: self.frame.height/2))
let maskLayer = CAShapeLayer()
我试过给它加阴影,但是阴影没有出现。 这是我尝试添加阴影的代码:
View1.layer.masksToBounds = false
View1.layer.layer.shadowPath = maskLayer.path
View1.layer.shadowColor = UIColor.black.cgColor
View1.layer.shadowOffset = CGSize(width: 0.0, height: 3.0)
View1.layer.shadowOpacity = 0.5
View1.layer.shadowRadius = 1.0
如何给这个形状添加阴影?
您可以通过使用单个 UIView (shadowView)、添加 shapeLayer 子图层并设置 shadowView 图层的阴影来实现此目的。
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
setup()
}
@IBOutlet var shadowView: UIView!
func setup() {
// setup irregular shape
let path = UIBezierPath.init(roundedRect: shadowView.bounds, byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize.init(width: 20, height: 20))
let layer = CAShapeLayer.init()
layer.frame = shadowView.bounds
layer.path = path.cgPath
layer.fillColor = UIColor.white.cgColor
layer.masksToBounds = true
shadowView.layer.insertSublayer(layer, at: 0)
// setup shadow
shadowView.layer.shadowRadius = 8
shadowView.layer.shadowOpacity = 0.2
shadowView.layer.shadowOffset = CGSize.init(width: 0, height: 2.5)
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowPath = path.cgPath
}
}
注:
shadowView.clipToBounds
必须false
才能使阴影生效。要查看
layer.fillColor
,请将shadowView.backgroundColor
设置为.clear
。通过设置 'Background' 属性 并取消选中 'Clip to Bounds' 复选框,您可以通过 Interface Builder 轻松实现上述目标。