Design a view with corner border swift 3

Question

I am new to ios development.I want to design a view which has only corner border rounded as shown in image.

UIView for qrcode scanner:

desired output

I can add border to UIView but i need only white border for view as shown in given image.

Possible duplicate of http://stackoverflow.com/questions/40185419/how-to-make-a-rounded-oval-button?noredirect=1&lq=1 — ankit, Apr 20 '17 at 10:29
Possible duplicate of [How to make a rounded oval button?](http://stackoverflow.com/questions/40185419/how-to-make-a-rounded-oval-button) — ankit, Apr 20 '17 at 10:33
Yes because above comments(guys) I think didnt understand your question , if you dont like to use overlay image than you need to inherit your view from UIView Class. — Matloob Hasnain, Apr 20 '17 at 10:51
http://stackoverflow.com/questions/15378290/how-to-remove-border-from-some-part-of-uiview — Matloob Hasnain, Apr 20 '17 at 11:09

Lepidopteron · Answer 1 · 2017-04-20T13:32:44.760

Problem here: You don't want the border around the entire view, but only in the corners.

I think the "cleaner" approach would be to draw this in the drawRect-method of your view.

If you are looking for a quick approach and don't want to create a new one class for that. You could add 4 sublayers to your view (one for each corner). Beware that you have to redraw these layers as soon as the view stretches or is being resized (also consider Landscape to Portrait rotations).

Something like that ? Code is just to give you some idea of how to implement it - I couldnt test the code. ;-) Sample for top left

// 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)

Nice solution @Lepidopteron – Martin Muldoon Apr 20 '17 at 17:05 — Martin Muldoon, Apr 20 '17 at 17:05

score 0 · Answer 2 · answered Mar 25 '21 at 19:09

import UIKit

class QRScannerVw: UIView {

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

}

extension 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])
}

}

Design a view with corner border swift 3

2 Answers2