Swift：带有圆顶边缘和彩色边框的 UIVisualEffectView

Question

我正在尝试设置一个带有圆角但只有左上角和右上角并带有彩色边框的视图。这是我的看法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？

Answer 1

对于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)

这将导致以下结果，

Swift：带有圆顶边缘和彩色边框的 UIVisualEffectView

Swift: UIVisualEffectView with rounded top edges and colored border

swift

uiview

calayer

mask

uivisualeffectview