Question

我是ios开发的新手。我想设计一个只有圆角边框的视图，如图所示。

用于qrcode扫描仪的UIView：

desired output

我可以为UIView添加边框，但我只需要白色边框进行查看，如给定图片所示。

Answer 1

问题在于：您不希望整个视图周围的边框，只能在角落里。

我认为＆＃34;清洁＆＃34;方法是在你的视图的drawRect方法中绘制它。

如果您正在寻找快速方法，并且不想为此创建一个新类。您可以在视图中添加4个子图层（每个角落一个）。请注意，一旦视图拉伸或调整大小，您就必须重新绘制这些图层（还要考虑从横向到纵向旋转）。

那样的东西？代码只是为了让您了解如何实现它 - 我无法测试代码。 ;-) 左上角的样本

// Obj-C
CAShapeLayer * maskLayer = [CAShapeLayer layer];
maskLayer.path = [UIBezierPath bezierPathWithRoundedRect: self.bounds byRoundingCorners: UIRectCornerTopLeft cornerRadii: (CGSize){10.0, 10.}].CGPath;

CALayer borderLayer = [CALayer new];
borderLayer.frame = self.view.bounds;
borderLayer.path = maskLayer.CGPath;
borderLayer.mask = maskLayer;
borderLayer.lineWidth = 5.0f;
borderLayer.strokeColor = [UIColor whiteColor].CGColor;
borderLayer.strokeColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:borderLayer];

-

// Swift
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(roundedRect: view.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 5, height: 5)).cgPath

let borderLayer = CAShapeLayer()
borderLayer.frame = self.view.bounds
borderLayer.path = maskLayer.CGPath
borderLayer.mask = maskLayer
borderLayer.lineWidth = 5.0
borderLayer.strokeColor = UIColor.white.cgColor
borderLayer.strokeColor = UIColor.clear.cgColor
self.view.layer.addSublayer(borderLayer)

Answer 2

导入 UIKit

class QRScannerVw: UIView {

override func draw(_ rect: CGRect) {
    super.draw(rect)
    
    let ctx: CGContext = UIGraphicsGetCurrentContext()!
    self.addCornerLineWithContext(ctx: ctx, rect: self.bounds)
}

}

扩展 QRScannerVw{

func addCornerLineWithContext(ctx : CGContext,rect: CGRect){
    
    ctx.setLineWidth(3)
    ctx.setStrokeColor(red: 255/255.0, green: 84/255.0, blue: 0/255.0, alpha: 1)
    
    let pointsTopLeftA : [CGPoint] = [CGPoint(x: rect.origin.x + 0.7, y: rect.origin.y),
                                      CGPoint(x: rect.origin.x + 0.7 , y: rect.origin.y + 15)]
    let pointsTopLeftB : [CGPoint] = [CGPoint(x: rect.origin.x, y: rect.origin.y + 0.7),
                                      CGPoint(x: rect.origin.x + 15, y: rect.origin.y + 0.7)]
    self.addLine(pointA: pointsTopLeftA, pointB: pointsTopLeftB, ctx: ctx)
    
    let pointsBottomLeftA : [CGPoint] = [CGPoint(x: rect.origin.x + 0.7, y: rect.origin.y + rect.size.height - 15),
                                         CGPoint(x: rect.origin.x + 0.7, y: rect.origin.y + rect.size.height)]
    let pointsBottomLeftB : [CGPoint] = [CGPoint(x: rect.origin.x , y: rect.origin.y + rect.size.height - 0.7),
                                         CGPoint(x: rect.origin.x + 15.7, y: rect.origin.y + rect.size.height - 0.7)]
    self.addLine(pointA: pointsBottomLeftA, pointB: pointsBottomLeftB, ctx: ctx)
    
    let pointsTopRightA : [CGPoint] = [CGPoint(x: rect.origin.x + rect.size.width - 15, y: rect.origin.y + 0.7),
                                       CGPoint(x: rect.origin.x + rect.size.width, y: rect.origin.y + 0.7)]
        
    let pointsTopRightB : [CGPoint] = [CGPoint(x: rect.origin.x + rect.size.width - 0.7, y: rect.origin.y),
                                       CGPoint(x: rect.origin.x + rect.size.width - 0.7, y: rect.origin.y + 15.7)]
    self.addLine(pointA: pointsTopRightA, pointB: pointsTopRightB, ctx: ctx)
            
    let pointsBottomRightA : [CGPoint] = [CGPoint(x: rect.origin.x + rect.size.width - 0.7, y: rect.origin.y + rect.size.height - 15),
                                          CGPoint(x: rect.origin.x - 0.7 + rect.size.width, y: rect.origin.y + rect.size.height)]
        
    let pointsBottomRightB : [CGPoint] = [CGPoint(x: rect.origin.x + rect.size.width - 15, y: rect.origin.y + rect.size.height - 0.7),
                                          CGPoint(x: rect.origin.x + rect.size.width, y: rect.origin.y + rect.size.height - 0.7)]
    self.addLine(pointA: pointsBottomRightA, pointB: pointsBottomRightB, ctx: ctx)
    ctx.strokePath()
            
}


func addLine(pointA: [CGPoint],pointB:[CGPoint],ctx: CGContext){
    ctx.move(to: pointA[0])
    ctx.addLine(to: pointA[1])
    ctx.move(to: pointB[0])
    ctx.addLine(to: pointB[1])
}

}

设计一个角落边界swift 3的视图

2 个答案: