Swift:带有圆顶边缘和彩色边框的 UIVisualEffectView
Swift: UIVisualEffectView with rounded top edges and colored border
我正在尝试设置一个带有圆角但只有左上角和右上角并带有彩色边框的视图。这是我的看法class:
class PullUpOverview: UIVisualEffectView {
override init(effect: UIVisualEffect?) {
super.init(effect: effect)
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: bounds,
byRoundingCorners: [.topRight, .topLeft],
cornerRadii: CGSize(width: 25, height: 25)).cgPath
layer.mask = maskLayer
let borderLayer = CAShapeLayer()
borderLayer.frame = bounds
borderLayer.path = maskLayer.path
borderLayer.lineWidth = 1
borderLayer.strokeColor = UIColor.gray.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
layer.addSublayer(borderLayer)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
我在 viewDidLoad
方法中将视图添加到我的 viewController 视图,如下所示(overviewRect
已正确设置):
let overview = PullUpOverview(effect: UIBlurEffect(style: UIBlurEffect.Style.extraLight))
overview.frame = overviewRect
self.mapView.addSubview(overview)
但是如果我添加视图,则什么也不会出现。如果我将 PullUpOverview
的超级 class 更改为 UIView 并将我在 viewDidLoad
方法中的代码更改为跟随视图,并且正确添加和应用了它的遮罩(显然缺少模糊效果这就是为什么我尝试对 UIVisualEffectView
):
做同样的事情
let overview = PullUpOverview(frame: overviewRect)
self.mapView.addSubview(overview)
那么我需要更改什么才能获得带有两个圆角(两个顶角)和一个边框层的 UIVisualEffectView?
对于bounds
,size
是zero
,所以两个图层都不可见。您可以像下面这样引入一个自定义初始化器,
class PullUpOverview: UIVisualEffectView {
init(effect: UIVisualEffect?, size: CGSize) {
super.init(effect: effect)
let rect = CGRect(origin: .zero, size: size)
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: rect,
byRoundingCorners: [.topRight, .topLeft],
cornerRadii: CGSize(width: 25, height: 25)).cgPath
maskLayer.frame = rect
layer.mask = maskLayer
let borderLayer = CAShapeLayer()
borderLayer.frame = rect
borderLayer.path = maskLayer.path
borderLayer.lineWidth = 1
borderLayer.strokeColor = UIColor.yellow.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
layer.addSublayer(borderLayer)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
现在您可以初始化并将此 view
添加为,
let overviewRect = CGRect(origin: CGPoint(x: 100, y: 200), size: CGSize(width: 200, height: 200))
let overview = PullUpOverview(effect: UIBlurEffect(style: .dark), size: overviewRect.size)
overview.frame = overviewRect
self.view.addSubview(overview)
这将导致以下结果,
我正在尝试设置一个带有圆角但只有左上角和右上角并带有彩色边框的视图。这是我的看法class:
class PullUpOverview: UIVisualEffectView {
override init(effect: UIVisualEffect?) {
super.init(effect: effect)
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: bounds,
byRoundingCorners: [.topRight, .topLeft],
cornerRadii: CGSize(width: 25, height: 25)).cgPath
layer.mask = maskLayer
let borderLayer = CAShapeLayer()
borderLayer.frame = bounds
borderLayer.path = maskLayer.path
borderLayer.lineWidth = 1
borderLayer.strokeColor = UIColor.gray.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
layer.addSublayer(borderLayer)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
我在 viewDidLoad
方法中将视图添加到我的 viewController 视图,如下所示(overviewRect
已正确设置):
let overview = PullUpOverview(effect: UIBlurEffect(style: UIBlurEffect.Style.extraLight))
overview.frame = overviewRect
self.mapView.addSubview(overview)
但是如果我添加视图,则什么也不会出现。如果我将 PullUpOverview
的超级 class 更改为 UIView 并将我在 viewDidLoad
方法中的代码更改为跟随视图,并且正确添加和应用了它的遮罩(显然缺少模糊效果这就是为什么我尝试对 UIVisualEffectView
):
let overview = PullUpOverview(frame: overviewRect)
self.mapView.addSubview(overview)
那么我需要更改什么才能获得带有两个圆角(两个顶角)和一个边框层的 UIVisualEffectView?
对于bounds
,size
是zero
,所以两个图层都不可见。您可以像下面这样引入一个自定义初始化器,
class PullUpOverview: UIVisualEffectView {
init(effect: UIVisualEffect?, size: CGSize) {
super.init(effect: effect)
let rect = CGRect(origin: .zero, size: size)
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: rect,
byRoundingCorners: [.topRight, .topLeft],
cornerRadii: CGSize(width: 25, height: 25)).cgPath
maskLayer.frame = rect
layer.mask = maskLayer
let borderLayer = CAShapeLayer()
borderLayer.frame = rect
borderLayer.path = maskLayer.path
borderLayer.lineWidth = 1
borderLayer.strokeColor = UIColor.yellow.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
layer.addSublayer(borderLayer)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
现在您可以初始化并将此 view
添加为,
let overviewRect = CGRect(origin: CGPoint(x: 100, y: 200), size: CGSize(width: 200, height: 200))
let overview = PullUpOverview(effect: UIBlurEffect(style: .dark), size: overviewRect.size)
overview.frame = overviewRect
self.view.addSubview(overview)
这将导致以下结果,