how to create & highlight red hairline (down) when any segmented is selected in a segmented control in Swift

Question

I have a segmented control which has 4 segments as in the picture.

Foe ex: Wireline , Managed Mobility

I would like to get a red color at the bottom (hairline) when any segment is selected ; basically it should display the red line at the selected segment

my current code is as follows

func changeColor(sender: UISegmentedControl){

    if sender.selectedSegmentIndex == 0 {
        UIView.animateWithDuration(0.5, animations: {
            self.containerAccountSummary.alpha = 1
            self.containerLocationTracker.alpha = 0
            self.containerWireline.alpha = 0
            self.containerManagedMobility.alpha = 0
            self.containerMobileVoiceAndData.alpha = 0
        })
    } else if sender.selectedSegmentIndex == 1{
        UIView.animateWithDuration(0.5, animations: {
            self.containerAccountSummary.alpha = 0
            self.containerLocationTracker.alpha = 1
            self.containerWireline.alpha = 0
            self.containerManagedMobility.alpha = 0
            self.containerMobileVoiceAndData.alpha = 0
        })
    }else if sender.selectedSegmentIndex == 2{
        UIView.animateWithDuration(0.5, animations: {
            self.containerAccountSummary.alpha = 0
            self.containerLocationTracker.alpha = 0
            self.containerWireline.alpha = 1
            self.containerManagedMobility.alpha = 0
            self.containerMobileVoiceAndData.alpha = 0
        })

    }else if sender.selectedSegmentIndex == 3{
        UIView.animateWithDuration(0.5, animations: {
            self.containerAccountSummary.alpha = 0
            self.containerLocationTracker.alpha = 0
            self.containerWireline.alpha = 0
            self.containerManagedMobility.alpha = 1
            self.containerMobileVoiceAndData.alpha = 0
        })

    }else {
        UIView.animateWithDuration(0.5, animations: {
            self.containerAccountSummary.alpha = 0
            self.containerLocationTracker.alpha = 0
            self.containerWireline.alpha = 0
            self.containerManagedMobility.alpha = 0
            self.containerMobileVoiceAndData.alpha = 1
        })
    }
}

any advice?

Answer 1

You can take UIView for hairline and place it below to segment control on your storyboard. Specified it's color and height. Give its width equal to sigle segment in your segment control and then when segment control action is invoked, take a selected segment index and according to that index, change your UIView's frame by providing X-position, Y-position, height and width. Then set this frame to your hairline and call method layoutIfNeeded() on hairline. It will change the frame of hairline. Write a function below and call this function in your segment control's action method:

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        let segmentControlFrame = self.view.convert(segmentControl.frame, from: segmentControl.superview)
        let widthForHairLine = segmentControlFrame.width / 4
        if segmentControl.selectedSegmentIndex == 0 {
            firstFrame = CGRect(x: segmentControlFrame.minX, y: segmentControlFrame.maxY , width: widthForHairLine, height: 5)
        } else if segmentControl.selectedSegmentIndex == 1 {
            firstFrame = CGRect(x: (segmentControlFrame.minX + widthForLine), y: segmentControlFrame.maxY , width: widthForHairLine, height: 5)
        } else if segmentControl.selectedSegmentIndex == 2 {
            firstFrame = CGRect(x: (segmentControlFrame.minX + widthForLine + widthForLine), y: segmentControlFrame.maxY , width: widthForHairLine, height: 5)
        } else if segmentControl.selectedSegmentIndex == 3 {
            firstFrame = CGRect(x: (segmentControlFrame.minX + widthForLine + widthForLine + widthForLine), y: segmentControlFrame.maxY , width: widthForHairLine, height: 5)
        self.hairline.backgroundColor = UIColor.red
        self.hairline.frame = firstFrame!
        self.hairline.layoutIfNeeded()
    }