The missing UIKit component. A scrollable alternative to UISegmentedControl

Hugo Pivaral

Last update: Nov 18, 2022

Related tags

Layout UITabControl

Overview

Requirements

iOS 15.0 and higher

Installation

Swift Package Manager:

dependencies: [
  .package(url: "https://github.com/hugo-pivaral/UITabControl.git", .exact("1.0.0")),
],

After installing the SPM into your project import UITabControl with

import UITabControl

Usage

If you're not using storyboards, jut use the init(tabs: [String]) method to create a new UITabControl instance, set the views frame and add it to your superview. Please note that UITabControl has an intrinsic content size value of 48, so make sure to set the height value or constraint to 48.

let tabControl = UITabControl(tabs: ["All", "Business", "Technology", "Science", "Politics", "Health"])
tabControl.frame = CGRect(x: x, y: y, width: width, height: 48)

self.view.addSubview(tabControl)

If you are using the interface builder in your project, add a UIView to your view controller scene or xib file, and make it inherit from UITabControl. Again, remember to set a height constraint with a constant value of 48.

In your swift file, configure your @IBOutlet like this.

@IBOutlet weak var tabControl: UITabControl! {
    didSet {
        tabControl.setTabs(["All", "Business", "Technology", "Science", "Politics", "Health"])
    }
}

UITabControl inherits from UIControl, so to handle touch events you can use the addTarget(_:action:for:) method, and set the value for controlEvents to .valueChanged.

tabControl.addTarget(self, action: #selector(handleEvents(_:)), for: .valueChanged)

Finally, add your @objc method.

@objc func handleEvents(_ sender: UITabControl) {
    let selectedIndex = sender.selectedTabIndex
    // Do something...
}

Customization

To customize UITabControl, create a new instance of UITabControl.Appearance with your custom values, and assign it in the init(tabs: [String], appearance: Appearance) method, or using the .setAppearance(_) method.

let appearance = UITabControl.Appearance(style: UITabControl.Style,
                                         textColor: UIColor,
                                         contentInset: CGFloat,
                                         separatorColor: UIColor,
                                         separatorEnabled: Bool,
                                         selectedTabTextColor: UIColor,
                                         selectedTabShadowEnabled: Bool,
                                         selectedTabBackgroundColor: UIColor)
tabControl.setAppearance(appearance)