Search code examples
iosswiftios13uisegmentedcontrol

UISegmentedControl Corner Radius Not Changing


UISegmentedControl corner radius is not changing. I also followed some answers in this question, my UISegmentedControl's corner radius still is not changing. I followed This tutorial to create UISegmentedControl.

Code:


import UIKit

class SegmentViewController: UIViewController {

    private let items = ["Black", "Red", "Green"]
    lazy var segmentedConrol: UISegmentedControl = {
        let control = UISegmentedControl(items: items)
        
        return control
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupViews()
    }
    fileprivate func setupViews(){
        view.addSubview(segmentedConrol)
        
        segmentedConrol.translatesAutoresizingMaskIntoConstraints = false //set this for Auto Layout to work!
        segmentedConrol.heightAnchor.constraint(equalToConstant: 40).isActive = true
        segmentedConrol.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 40).isActive = true
        segmentedConrol.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -40).isActive = true
        segmentedConrol.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        segmentedConrol.selectedSegmentIndex = 1
        //style
        segmentedConrol.layer.cornerRadius = 20
        segmentedConrol.layer.borderWidth = 2
        segmentedConrol.layer.borderColor = UIColor.black.cgColor
        segmentedConrol.backgroundColor = .red
        segmentedConrol.selectedSegmentTintColor = .darkGray
//        segmentedConrol.clipsToBounds = true
        segmentedConrol.layer.masksToBounds = true
    }

}

(PS. Probably the answer is so simple for most people, please do not mind me, I am new in this field.)


Solution

  • Subclass UISegmentedControl and override layoutSubviews. Inside the method set the corner radius to what you want it to be, and you can remove the portion where you set the corner radius in setupViews():

    class YourSegmentedControl: UISegmentedControl {
        override func layoutSubviews() {
            super.layoutSubviews()
            layer.cornerRadius = 20
        }
    }
    

    In your view controller where you create segmentedControl create an instance of YourSegmentedControl like below.

    lazy var segmentedConrol: YourSegmentedControl = {
                let control = YourSegmentedControl(items: items)
    
                return control
            }()
    

    The result is:

    enter image description here