How to add dashed border on View's frame not on bounds [Swift]

Question

I am trying to add a dashed border on View which will always be on the view's frame not on it's bound .

My code :

func addDashedBorder() {

    let color = UIColor.red.cgColor
    shapeLayer = CAShapeLayer()
    let frameSize = self.bounds.size
    let shapeRect = CGRect(x:0 , y: 0, width: frameSize.width, height: frameSize.height)

    shapeLayer.frame = shapeRect
    shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height/2)
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = color
    shapeLayer.lineWidth = 2
    shapeLayer.lineJoin = CAShapeLayerLineJoin.round
    shapeLayer.lineDashPattern = [6,3]
    shapeLayer.path = UIBezierPath(roundedRect: self.frame, cornerRadius: 5).cgPath

    self.layer.addSublayer(shapeLayer)
}

Result

I don't want to rotate the Border on View if we rotate the view . it should indicate how much space its is taking on view .

Expectation

You outer dashed view should have the height and width equal to the inner views diagonal √2 * width of the arrow view. Then it's just a matter of animating the arrow view. P.S - you first image will have a larger padding between the arrows and the border. — Rakesha Shastri, Oct 09 '18 at 06:31
padding is ok , my task is to show , what us the frame of innner view . view can be Square or rectangular — Dhiru, Oct 09 '18 at 06:52
The outer view will always be a square having the its side length and the longest diagonal of the inner view. — Rakesha Shastri, Oct 09 '18 at 06:53
That can be anything or image why dont you talk to your designer about rotating the image and then you stick into the UIImage rather than trying at your end. — Harjot Singh, Oct 09 '18 at 06:58
My task is not that @HarjotSingh , it is a ImageView is has Rotation Gesture enabled , user can rotate and drag to any place . it is not a static image — Dhiru, Oct 09 '18 at 07:00

score 3 · Accepted Answer · answered Oct 09 '18 at 07:48

You need to take two view i.e inner and outer view. Inner view (rotation view) should be in the subview of outer view. The frame must be same for both views. Use the following line of code -

@IBOutlet weak var viewOuter: UIView! //static outer view
@IBOutlet weak var viewInner: UIView! // View that will be use for rotation

func addDashedBorder() {

    let color = UIColor.red.cgColor
    let shapeLayer = CAShapeLayer()
    let frameSize = viewInner.bounds.size
    let shapeRect = CGRect(x:0 , y: 0, width: frameSize.width, height: frameSize.height)
    shapeLayer.frame = shapeRect
    shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height/2)
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = color
    shapeLayer.lineWidth = 2
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineDashPattern = [6,3]
    shapeLayer.path = UIBezierPath(roundedRect: viewInner.frame, cornerRadius: 5).cgPath
    self.viewOuter.layer.addSublayer(shapeLayer)

}

How to add dashed border on View's frame not on bounds [Swift]

1 Answers1