我想实现以下重点用户界面。它基本上是指南教程视图为我的用户。
背景是我的主视图控制器,有一堆真实的的功能视图,我在它上面放了一个黑色的50%透明度的视图,以实现聚焦的UI,但它离我试图实现的还很远。任何建议都将不胜感激。
代码:
func createOverlay(frame: CGRect,
xOffset: CGFloat,
yOffset: CGFloat,
radius: CGFloat) -> UIView {
// Step 1
let overlayView = UIView(frame: frame)
overlayView.backgroundColor = UIColor.black.withAlphaComponent(0.5)
// Step 2
let path = CGMutablePath()
path.addArc(center: CGPoint(x: xOffset, y: yOffset),
radius: radius,
startAngle: 0.0,
endAngle: 2.0 * .pi,
clockwise: false)
path.addRect(CGRect(origin: .zero, size: overlayView.frame.size))
// Step 3
let maskLayer = CAShapeLayer()
maskLayer.backgroundColor = UIColor.black.cgColor
maskLayer.path = path
// For Swift 4.0
maskLayer.fillRule = CAShapeLayerFillRule.evenOdd
// For Swift 4.2
maskLayer.fillRule = .evenOdd
// Step 4
overlayView.layer.mask = maskLayer
overlayView.clipsToBounds = true
return overlayView
}
电流输出:
1条答案
按热度按时间a8jjtwal1#
我们可以通过在叠加视图的图层上使用一个“反向”阴影路径来实现这一点。这将给予我们一个“羽化边缘”的椭圆。
下面是一个示例视图类:
我们将添加6个彩色矩形作为“背景”,并添加一个
UILabel
作为“焦点”:在任何地方每次轻按都会淡入或淡出焦点视图: