CODEWITHSUNDEEP
iosswiftuiviewswift4
NullHypothesis
NullHypothesis

Reputation: 4516

Border Padding for a UIView

I created a standard border around my UIView like so:

 vwGroup.layer.borderColor = UIColor.yellow.cgColor
 vwGroup.layer.borderWidth = 2.0;

but I would like to have 5px of padding/margin/spacing between the UIView, and the border that surrounds it.

Right now it just draws the border immediately around it. I'd like to push it out so there is clear space between.

Any suggestions? I suspect insets are the way to go but can't figure it out.

Thank you!

Upvotes: 4

Views: 4696

Answers (3)

dengST30
dengST30

Reputation: 4047

swift 5.4

call like this:

customView.layer.innerBorder()

did it, by add a sublayer

extension CALayer {


    func innerBorder(borderOffset: CGFloat = 24.0, borderColor: UIColor = UIColor.blue, borderWidth: CGFloat = 2) {
        let innerBorder = CALayer()
        innerBorder.frame = CGRect(x: borderOffset, y: borderOffset, width: frame.size.width - 2 * borderOffset, height: frame.size.height - 2 * borderOffset)
        innerBorder.borderColor = borderColor.cgColor
        innerBorder.borderWidth = borderWidth
        innerBorder.name = "innerBorder"
        insertSublayer(innerBorder, at: 0)
    }
}

Upvotes: 1

Niilesh R Patel
Niilesh R Patel

Reputation: 707

Try this, it is helpful for you.

First, Add this extension

extension CALayer {
    func addGradientBorder(colors:[UIColor],width:CGFloat = 1) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame =  CGRect(origin: CGPoint.zero, size: self.bounds.size)
        gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
        gradientLayer.endPoint = CGPoint(x:1.0,y:1.0)
        gradientLayer.colors = colors.map({$0.cgColor})

        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = width
        shapeLayer.path = UIBezierPath(rect: self.bounds).cgPath
        shapeLayer.fillColor = nil
        shapeLayer.strokeColor = UIColor.red.cgColor
        gradientLayer.mask = shapeLayer

        self.addSublayer(gradientLayer)
    }
}

Then add the UIView with border

let vwGroup = UIView(frame: CGRect(x: 50, y: 150, width: 200, height: 200))
vwGroup.backgroundColor = .red

//-- This is for padding between boarder and view -- you can set padding color ---
vwGroup.layer.addGradientBorder(colors:[UIColor.black,UIColor.black] , width: 40)

//--  This is for outer boarder -- you can also change the color of outer boarder --
vwGroup.layer.addGradientBorder(colors:[UIColor.white,UIColor.white] , width: 10)
self.view.addSubview(vwGroup)

Output is:

enter image description here

Upvotes: 0

alanpaivaa
alanpaivaa

Reputation: 2089

Insets isn't the way to go. You use inset for padding a view's internal content from its margins. For what you need your best option is to wrap your vwGroup inside another UIView and set the border in the wrapping view. Something like:

let wrappingView = UIView(frame: someFrame)
wrappingView.backgroundColor = .clear
wrappingView.layer.borderColor = UIColor.yellow.cgColor
wrappingView.layer.borderWidth = 2.0;
wrappingView.addSubview(vwGroup)

Of course this is just for you to get the big picture. You might want to set proper frames/constraints.

Upvotes: 5

Related Questions