Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Round Top Corners of a UIView in Swift

I am trying to round top corners using below code

func roundCorners(corners:UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = self.bounds
        maskLayer.path = path.cgPath
        self.layer.mask = maskLayer
    }

use myView.roundCorners(corners:[.topLeft, .topRight], radius: radius)

But it's rounding one side of the view:
enter image description here

this is in a tableView sectionHeader if I scroll down then up it rounded using same code: enter image description here

And also top discount view corners are rounded using same function.

thank's for help.

Update if I fix the width on the view then it works fine.

like image 251
Abdul Rehman Avatar asked Sep 12 '17 15:09

Abdul Rehman


People also ask

How do you round UIView corners?

If you start with a regular UIView it has square corners. You can give it round corners by changing the cornerRadius property of the view's layer . and smaller values give less rounded corners. Both clipsToBounds and masksToBounds are equivalent.

How do you round the corners of an imageView in Swift?

To make an image with round corners or to make any view or button or any UI element with round corners in swift, we need to access the corner radius property of its layer. Every UI element in iOS is based on a layer. First of all, let's add an UIImageView Object in our storyboard. Or let's create one programmatically.


2 Answers

iOS 11 introduced maskedCorners which results in smoother and better quality results. You can still use the UIRectCorner in the function call and have it translated to CACornerMask:

Swift 5:

extension UIView {

    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        if #available(iOS 11.0, *) {
            clipsToBounds = true
            layer.cornerRadius = radius
            layer.maskedCorners = CACornerMask(rawValue: corners.rawValue)
        } else {
            let path = UIBezierPath(
                roundedRect: bounds, 
                byRoundingCorners: corners, 
                cornerRadii: CGSize(width: radius, height: radius)
            )
            let mask = CAShapeLayer()
            mask.path = path.cgPath
            layer.mask = mask
        }
    }
}
like image 95
José Avatar answered Nov 05 '22 04:11

José


Solved this with the help of @Paolo and below is the working code.

Swift 3.2

extension UIView {

    func roundCorners(corners:UIRectCorner, radius: CGFloat) {

        DispatchQueue.main.async {
            let path = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: corners,
                                    cornerRadii: CGSize(width: radius, height: radius))
            let maskLayer = CAShapeLayer()
            maskLayer.frame = self.bounds
            maskLayer.path = path.cgPath
            self.layer.mask = maskLayer
        }
    }
}

for calling this function use below line and mention which corners you want to round

self.myView.roundCorners(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 8.0)
like image 44
Abdul Rehman Avatar answered Nov 05 '22 05:11

Abdul Rehman