CODEWITHSUNDEEP
swift
B.Saravana Kumar
B.Saravana Kumar

Reputation: 1242

How to make rounded corner progress bar in swift?

Here I Have tried to make Rounded Rect corner progress bar but I have some problem to create it, here I have post my code what I am tried?

Any one Give idea to customize the progress bar to rounded rect corner progress bar.

self.progressView.frame=CGRectMake(55, 490, 200, 15)
self.progressView.layer.cornerRadius = 15.0
self.progressView.transform=CGAffineTransformMakeScale(1.0, 7.0)

Upvotes: 25

Views: 18915

Answers (6)

soufianeios
soufianeios

Reputation: 456

Here's an other way to make the change global and update the corner radius from the storyboard. you can add this as an extension to the UIProgressView Note: Make sure that you set your custom height is set by constraints

extension UIProgressView {

@IBInspectable var cornerRadius: CGFloat {
    
    get {
        self.cornerRadius
    }
    
    set {
        self.layer.cornerRadius = newValue
        self.clipsToBounds = true
        self.layer.sublayers![1].cornerRadius = newValue
        self.subviews[1].clipsToBounds = true
    }
  }
}

Upvotes: 0

Devendra Agnihotri
Devendra Agnihotri

Reputation: 253

Swift 5.0 

//Extension to set corner any view  set border width and color. 
extension UIView{
    func setCorner(withRadius:Int, borderWidth:Int = 0, color: UIColor = .clear){
        self.layer.cornerRadius = radius
        self.layer.borderColor = color
        self.layer.borderWidth = borderWidth
        self.clipsToBounds = true
    }
}

use it as

self.progressView.setCorner(withRadius: 12)

Upvotes: 2

Muhammad Ahmad
Muhammad Ahmad

Reputation: 398

In which it tells you to set the corner radius and then clip to bounds: (The sublayers is so the inside bar has rounded corners as well.) soo add these lines because you need to set both the progress color and his layer also...

 progressBar.layer.cornerRadius = 8
 progressBar.clipsToBounds = true
 progressBar.layer.sublayers![1].cornerRadius = 8
 progressBar.subviews[1].clipsToBounds = true

Upvotes: 5

Lê Tấn Thành
Lê Tấn Thành

Reputation: 347

UIProgressView changed position of UIImageView which show current value of progress bar. I have small update to fix this issue

 self.layer.cornerRadius = 12
 self.clipsToBounds = true
 for subview in subviews {
    if let imageView = subview as? UIImageView {
       imageView.layer.cornerRadius = 12
       imageView.clipsToBounds = true
    }
 }

Upvotes: 1

Andre
Andre

Reputation: 7648

And if you want to have rounded edges for the inner bar too, you can also add this code:

// Set the rounded edge for the outer bar
self.layer.cornerRadius = 12
self.clipsToBounds = true

// Set the rounded edge for the inner bar        
self.layer.sublayers![1].cornerRadius = 12
self.subviews[1].clipsToBounds = true

Upvotes: 20

Swinny89
Swinny89

Reputation: 7373

Although you have set the corner radius, you also need to tell the view not to draw anything outside of the view's bounds by setting

self.progressView.clipsToBounds = true

Upvotes: 36

Related Questions