iosswiftuisegmentedcontrolhuman-interface

Scroll dynamic UISegmentedControl in Swift 3


Hi i want to create a dynamic UISegmented View with more than 20 Items. I tried it, but the output is like this.

enter image description here

the text is sliced not visible fully. I want it to scroll to the left and right and also display the full text. can some one help me to fix this. tnx

View Controller

override func viewDidLoad() {
    super.viewDidLoad()

    let items = ["All Fruits", "Orange", "Grapes", "Banana",  "Mango", "papaya", "coconut", "django"]
    let filtersSegment = UISegmentedControl(items: items)
    filtersSegment.frame = CGRect.init(x: 10, y: 60, width: 300, height: 50)
    filtersSegment.selectedSegmentIndex = 0
    filtersSegment.tintColor = UIColor.black
    filtersSegment.addTarget(self, action: #selector(self.filterApply), for: UIControlEvents.valueChanged)
    self.view.addSubview(filtersSegment)
}

@objc private func filterApply(segment:UISegmentedControl) -> Void {
    print("Selected Index : \(segment.selectedSegmentIndex)")
}

Solution

  • It's better to use another controller rather then segment controller to achieve your goal.

    But If you are going with segment controller only then you must add segment controller to scroll view, because titles are dynamic so we can't recognise hows it's wide that's why.

    First add segment controller to scroll view. and segment controller has method name setWidth(_ width: CGFloat, forSegmentAt segment: Int) to set width of each segment at index.

    so here I'm writing my logic .

        var scrollViewWidth:Float = 0.0
        let items  = ["All Fruits", "Orange", "Grapes", "Banana",  "Mango", "papaya", "coconut", "django"]
        for (index, element) in items.enumerated() {
            let size = element.size(attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 20.0)]) //you can change font as you want
            segmentCon.setWidth(size.width, forSegmentAt: index)
            scrollViewWidth = scrollViewWidth + Float(size.width)
        }
    
        // Here you can set content width of UIScollView by use of "scrollViewWidth"
        // scrollView.contentSize = CGSize(width: scrollViewWidth, height: 40)// height should whatever you want.