TheDeveloperBlog.com

Home | Contact Us

CSharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript

<< Back to SWIFT

Swift UISegmentedControl

UISegmentedControl. It has 2 parts. It has 3 parts. A Segmented Control is a strip of buttons that are visually connected. Each acts like a button.
Let us start. Create a Single View Application and drag a Segmented Control from the object library. Place it on the iPhone screen.

Tip: For a Segmented Control, we usually set the "segments" in Xcode. But they can be set in Swift code.

Add Label. For this tutorial we also need a label. So place a Label next to the Segmented Control while in the same window. The initial text is not important.
Add outlet. Find the control key on your keyboard and press it. Please drag the Segmented Control (and the Label afterwards) to the ViewController.swift file.

Names: Provide names for the Segmented Control and the Label. I used "simpleSegmented" and "simpleLabel."

Action: Next, please right click on the Segmented Control, and drag the "Primary Action Triggered" circle to your device screen.

And: Call the Primary Action Triggered func something like "actionTriggered." It is easy to remember.

Code so far. Here is our ViewController.swift file. We see the two fields from our Segmented Control and our Label. These are of types UISegmentedControl and UILabel.UILabel
Example ViewController: Swift // // ViewController.swift // ExampleTime13 // // ... // import UIKit class ViewController: UIViewController { // Outlets. @IBOutlet weak var simpleSegmented: UISegmentedControl! @IBOutlet weak var simpleLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() } // Segment action func. @IBAction func actionTriggered(sender: AnyObject) { } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }
Implement func. Add some Swift statements to our actionTriggered func. We use selectedSegmentIndex and numberOfSegments—these are Ints.

So: Whenever a button in the UISegmentedControl is tapped, actionTriggered will run and change the UILabel's text.

Example func, uses selectedSegmentIndex: Swift // // ViewController.swift // ExampleTime13 // // ... // import UIKit class ViewController: UIViewController { // Outlets. @IBOutlet weak var simpleSegmented: UISegmentedControl! @IBOutlet weak var simpleLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() } // Segment action func. @IBAction func actionTriggered(sender: AnyObject) { // The index of the selected segment. let index = simpleSegmented.selectedSegmentIndex // Total segment count. let total = simpleSegmented.numberOfSegments // Set label. simpleLabel.text = "Index: \(index) of \(total)" } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }
Add segments. Now go back to the Segmented Control and select it. Use Xcode to set the Title property for the segments. Additional segments can be added by increasing "Segments."

Here: I use 2 segments. One has title "Cat" and the other "Dog." So we can decide whether a user is a cat or dog person.

Run simulator. Now start the simulator with the right-arrow in Xcode. If you are lucky the program will run. With the mouse click on the Segmented Control parts.

Result: The UILabel is changed whenever a click (or tap) occurs. It reads out the selected segment's index (starting at 0).

With UISegmentedControl, we have a panel of buttons. This leads to a clean and usable appearance. It is a useful way to group many buttons together.
© TheDeveloperBlog.com
The Dev Codes