9.2 C
London
Tuesday, November 21, 2023

ios – Want Assist Making a Particular UI Component


I am new to Swift and iOS growth, and I am making an attempt to create a particular UI aspect that I noticed in a picture, however I am unsure easy methods to method it in Swift. I’ve connected the picture for reference.Design

May somebody information me on easy methods to create this UI aspect utilizing Swift?
Thanks!

I attempted utilizing this UIBezierPath however im not in a position get the specified outcome.

class CustomBubbleView: UIView {
    
    override init(body: CGRect) {
        tremendous.init(body: body)
        commonInit()
    }
    
    required init?(coder: NSCoder) {
        tremendous.init(coder: coder)
        commonInit()
    }
    
    non-public func commonInit() {
        // Customized initialization
        backgroundColor = .clear
    }
    
    override func draw(_ rect: CGRect) {
        let radius: CGFloat = 10
        let triangleWidth: CGFloat = 20
        let triangleHeight: CGFloat = 20
        
        // Create the trail for the triangle and the rounded rectangle
        let path = UIBezierPath()
        
        // Begin with the triangle half
        path.transfer(to: CGPoint(x: triangleWidth, y: rect.top / 2))
        path.addLine(to: CGPoint(x: 0, y: rect.top / 2 + triangleHeight / 2))
        path.addLine(to: CGPoint(x: triangleWidth, y: rect.top / 2 + triangleHeight / 2))
        
        // Proceed with the rounded rectangle half
        path.addArc(withCenter: CGPoint(x: triangleWidth + radius, y: rect.top / 2 + triangleHeight / 2 + radius),
                    radius: radius,
                    startAngle: CGFloat.pi * 1.5,
                    endAngle: CGFloat.pi,
                    clockwise: false)
        path.addLine(to: CGPoint(x: triangleWidth, y: rect.top - radius))
        path.addArc(withCenter: CGPoint(x: triangleWidth + radius, y: rect.top - radius),
                    radius: radius,
                    startAngle: CGFloat.pi,
                    endAngle: CGFloat.pi / 2,
                    clockwise: false)
        path.addLine(to: CGPoint(x: rect.width - radius, y: rect.top))
        path.addArc(withCenter: CGPoint(x: rect.width - radius, y: rect.top - radius),
                    radius: radius,
                    startAngle: CGFloat.pi / 2,
                    endAngle: 0,
                    clockwise: false)
        path.addLine(to: CGPoint(x: rect.width, y: radius))
        path.addArc(withCenter: CGPoint(x: rect.width - radius, y: radius),
                    radius: radius,
                    startAngle: 0,
                    endAngle: -CGFloat.pi / 2,
                    clockwise: false)
        path.addLine(to: CGPoint(x: triangleWidth + radius, y: 0))
        path.addArc(withCenter: CGPoint(x: triangleWidth + radius, y: radius),
                    radius: radius,
                    startAngle: -CGFloat.pi / 2,
                    endAngle: -CGFloat.pi,
                    clockwise: false)
        path.shut()
        
        // Set the stroke colour to grey
        UIColor.grey.setStroke()
        
        // Set the fill colour to white
        UIColor.white.setFill()
        
        // Draw the stuffed path
        path.fill()
        
        // Draw the trail with stroke
        path.stroke()
    }
}

Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here