Customize Segmented Control or ..? - ios

Question

Screenshot from twitter
I want this type of segmented control in Swift 4. I've researched Apple Documents but I couldn't find some of things which are I need such as removing borders, removing cornerRadius etc. How can I customize Segmented Control like Twitter's ? Or is there any another tab/segment solution ? Thanks.

Answer 1

Here is how to customize the UISegmentedControl to display a bottom border when it is selected:
Create a container view for the segmented control and pin it with Auto Layout to its super view.
Add a segmented control to the container view as a subview, and pin it with Auto Layout to the container view's edges.
Create a bottom underline view, add it as a subview to the container view, and apply Auto Layout to it (see example implementation).
Then set up an event listener: on the segmented control's value changed event, change the origin of the bottom underline view so that it is moved below the selected segment.
I also added some code on how to format the segmented control labels' font and text color, see it in the example below.
This is how it will look like:
Example implementation where the container and segmented control views are created programmatically:
Swift 4.2:
import UIKit
class ViewController: UIViewController {
private enum Constants {
static let segmentedControlHeight: CGFloat = 40
static let underlineViewColor: UIColor = .blue
static let underlineViewHeight: CGFloat = 2
}
// Container view of the segmented control
private lazy var segmentedControlContainerView: UIView = {
let containerView = UIView()
containerView.backgroundColor = .clear
containerView.translatesAutoresizingMaskIntoConstraints = false
return containerView
}()
// Customised segmented control
private lazy var segmentedControl: UISegmentedControl = {
let segmentedControl = UISegmentedControl()
// Remove background and divider colors
segmentedControl.backgroundColor = .clear
segmentedControl.tintColor = .clear
// Append segments
segmentedControl.insertSegment(withTitle: "First", at: 0, animated: true)
segmentedControl.insertSegment(withTitle: "Second", at: 1, animated: true)
segmentedControl.insertSegment(withTitle: "Third", at: 2, animated: true)
// Select first segment by default
segmentedControl.selectedSegmentIndex = 0
// Change text color and the font of the NOT selected (normal) segment
segmentedControl.setTitleTextAttributes([
NSAttributedStringKey.foregroundColor: UIColor.black,
NSAttributedStringKey.font: UIFont.systemFont(ofSize: 16, weight: .regular)], for: .normal)
// Change text color and the font of the selected segment
segmentedControl.setTitleTextAttributes([
NSAttributedStringKey.foregroundColor: UIColor.blue,
NSAttributedStringKey.font: UIFont.systemFont(ofSize: 16, weight: .bold)], for: .selected)
// Set up event handler to get notified when the selected segment changes
segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged), for: .valueChanged)
// Return false because we will set the constraints with Auto Layout
segmentedControl.translatesAutoresizingMaskIntoConstraints = false
return segmentedControl
}()
// The underline view below the segmented control
private lazy var bottomUnderlineView: UIView = {
let underlineView = UIView()
underlineView.backgroundColor = Constants.underlineViewColor
underlineView.translatesAutoresizingMaskIntoConstraints = false
return underlineView
}()
private lazy var leadingDistanceConstraint: NSLayoutConstraint = {
return bottomUnderlineView.leftAnchor.constraint(equalTo: segmentedControl.leftAnchor)
}()
override func viewDidLoad() {
super.viewDidLoad()
// Add subviews to the view hierarchy
// (both segmentedControl and bottomUnderlineView are subviews of the segmentedControlContainerView)
view.addSubview(segmentedControlContainerView)
segmentedControlContainerView.addSubview(segmentedControl)
segmentedControlContainerView.addSubview(bottomUnderlineView)
// Constrain the container view to the view controller
let safeLayoutGuide = self.view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
segmentedControlContainerView.topAnchor.constraint(equalTo: safeLayoutGuide.topAnchor),
segmentedControlContainerView.leadingAnchor.constraint(equalTo: safeLayoutGuide.leadingAnchor),
segmentedControlContainerView.widthAnchor.constraint(equalTo: safeLayoutGuide.widthAnchor),
segmentedControlContainerView.heightAnchor.constraint(equalToConstant: Constants.segmentedControlHeight)
])
// Constrain the segmented control to the container view
NSLayoutConstraint.activate([
segmentedControl.topAnchor.constraint(equalTo: segmentedControlContainerView.topAnchor),
segmentedControl.leadingAnchor.constraint(equalTo: segmentedControlContainerView.leadingAnchor),
segmentedControl.centerXAnchor.constraint(equalTo: segmentedControlContainerView.centerXAnchor),
segmentedControl.centerYAnchor.constraint(equalTo: segmentedControlContainerView.centerYAnchor)
])
// Constrain the underline view relative to the segmented control
NSLayoutConstraint.activate([
bottomUnderlineView.bottomAnchor.constraint(equalTo: segmentedControl.bottomAnchor),
bottomUnderlineView.heightAnchor.constraint(equalToConstant: Constants.underlineViewHeight),
leadingDistanceConstraint,
bottomUnderlineView.widthAnchor.constraint(equalTo: segmentedControl.widthAnchor, multiplier: 1 / CGFloat(segmentedControl.numberOfSegments))
])
}
#objc private func segmentedControlValueChanged(_ sender: UISegmentedControl) {
changeSegmentedControlLinePosition()
}
// Change position of the underline
private func changeSegmentedControlLinePosition() {
let segmentIndex = CGFloat(segmentedControl.selectedSegmentIndex)
let segmentWidth = segmentedControl.frame.width / CGFloat(segmentedControl.numberOfSegments)
let leadingDistance = segmentWidth * segmentIndex
UIView.animate(withDuration: 0.3, animations: { [weak self] in
self?.leadingDistanceConstraint.constant = leadingDistance
self?.layoutIfNeeded()
})
}
}

Answer 2

You may use part of CarbonKit. It has TabBar like you want. But it is necessary to code analyzing a little.
There is class CarbonTabSwipeSegmentedControl. There is property UIImageView indicator with tint color background (line 41) that draws upside or at bottom of string of segment. Also there is function updateIndicatorWithAnimation that resizes segment line. Also there is variable that helps draw and control this drawing.
I don't sure but you may simply include this class to your project and use it even in swift.