CODEWITHSUNDEEP
iosobjective-cswift3
karthikeyan
karthikeyan

Reputation: 3898

Draw UIView with bezier path

How to draw a view like image below

Desing

I want to UIView like annotation view in picture,
I know get image from designer and assign it in UIImageView and i don't want do that way and pop over presentation also no need.

I wanted to do this with UIView by UIBezierPath or some other other way..

Help would be appreciated and Thanks in advance!!

Upvotes: 1

Views: 1482

Answers (1)

Aakash
Aakash

Reputation: 2269

You can try this: 

class PopUpView: UIView {

    override func draw(_ rect: CGRect) {

        let width: CGFloat = rect.width
        let height: CGFloat = rect.height

        let radius: CGFloat = 8
        let arrowRadius: CGFloat = 4

        let arrowWidth: CGFloat = 24
        let arrowHeight: CGFloat = 18

        let startingPoint = CGPoint(x: radius, y: 0)
        let upperRightCenter = CGPoint(x: width - radius, y: radius)
        let bottomRightCenter = CGPoint(x: width - radius, y: height - radius - arrowHeight)
        let bottomLeftCenter = CGPoint(x: radius, y: height - radius - arrowHeight)
        let upperLeftCenter = CGPoint(x: radius, y: radius)

        let path: UIBezierPath = UIBezierPath()

        path.move(to: startingPoint)

        path.addArc(withCenter: upperRightCenter, radius: radius, startAngle: 270.degreesToRadians, endAngle: 0, clockwise: true)

        path.addArc(withCenter: bottomRightCenter, radius: radius, startAngle: 0, endAngle: 90.degreesToRadians, clockwise: true)

        path.addArc(withCenter: CGPoint(x: (width + arrowWidth)/2 + arrowRadius, y: height + arrowRadius - arrowHeight), radius: arrowRadius, startAngle: 270.degreesToRadians, endAngle: 225.degreesToRadians, clockwise: false)

        path.addArc(withCenter: CGPoint(x: width/2, y: height - arrowRadius), radius: arrowRadius, startAngle: 45.degreesToRadians, endAngle: 135.degreesToRadians, clockwise: true)

        path.addArc(withCenter: CGPoint(x: (width - arrowWidth)/2 - arrowRadius, y: height + arrowRadius - arrowHeight), radius: arrowRadius, startAngle: 315.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: false)

        path.addArc(withCenter: bottomLeftCenter, radius: radius, startAngle: 90.degreesToRadians, endAngle: 180.degreesToRadians, clockwise: true)

        path.addArc(withCenter: upperLeftCenter, radius: radius, startAngle: 180.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true)

        path.close()

        UIColor.gray.setFill()
        UIColor.clear.setStroke()

        path.fill()
        path.stroke()
    }

}

extension Int {
    var degreesToRadians: CGFloat {
        return CGFloat(M_PI) * CGFloat(self) / 180.0
    }
}

Basically I subclassed a UIView, overidden the drawRect method and used UIBezierPath to create a similar shape. You may want to change the values I used to suite your requirement.

Upvotes: 4

Related Questions