UIBezierPath:如何在带圆角的视图周围添加边框? [英] UIBezierPath: How to add a border around a view with rounded corners?

问题描述

我正在使用 UIBezierPath 使我的图像视图具有圆角，但我也想为图像视图添加边框.请记住，顶部是 uiimage，底部是标签.

I am using UIBezierPath to have my imageview have round corners but I also want to add a border to the imageview. Keep in mind the top is a uiimage and the bottom is a label.

当前使用此代码产生:

let rectShape = CAShapeLayer()
rectShape.bounds = myCell2.NewFeedImageView.frame
rectShape.position = myCell2.NewFeedImageView.center
rectShape.path = UIBezierPath(roundedRect: myCell2.NewFeedImageView.bounds,
    byRoundingCorners: .TopRight | .TopLeft,
    cornerRadii: CGSize(width: 25, height: 25)).CGPath
myCell2.NewFeedImageView.layer.mask = rectShape

我想添加一个绿色边框，但我不能使用

I want to add a green border to that but I cant use

myCell2.NewFeedImageView.layer.borderWidth = 8
myCell2.NewFeedImageView.layer.borderColor = UIColor.greenColor().CGColor

因为它切断了边框的左上角和右上角，如下图所示:

because it cuts off the top left and top right corner of the border as seen in this image:

有没有办法用 UIBezierPath 和我当前的代码一起添加边框?

Is there a way too add in a border with UIBezierPath along with my current code?

推荐答案

您可以重用 UIBezierPath 路径并向视图添加形状图层.这是视图控制器中的示例.

You can reuse the UIBezierPath path and add a shape layer to the view. Here is an example inside a view controller.

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create a view with red background for demonstration
        let v = UIView(frame: CGRectMake(0, 0, 100, 100))
        v.center = view.center
        v.backgroundColor = UIColor.redColor()
        view.addSubview(v)

        // Add rounded corners
        let maskLayer = CAShapeLayer()
        maskLayer.frame = v.bounds
        maskLayer.path = UIBezierPath(roundedRect: v.bounds, byRoundingCorners: .TopRight | .TopLeft, cornerRadii: CGSize(width: 25, height: 25)).CGPath
        v.layer.mask = maskLayer

        // Add border
        let borderLayer = CAShapeLayer()
        borderLayer.path = maskLayer.path // Reuse the Bezier path
        borderLayer.fillColor = UIColor.clearColor().CGColor
        borderLayer.strokeColor = UIColor.greenColor().CGColor
        borderLayer.lineWidth = 5
        borderLayer.frame = v.bounds
        v.layer.addSublayer(borderLayer)   
    }

}

最终结果是这样的.

请注意，这仅在视图大小固定时才能按预期工作.当视图可以调整大小时，您将需要创建一个自定义视图类并在 layoutSubviews 中调整图层的大小.

Note that this only works as expected when the view's size is fixed. When the view can resize, you will need to create a custom view class and resize the layers in layoutSubviews.

这篇关于UIBezierPath:如何在带圆角的视图周围添加边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！