Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact
Home » UISegmentedControl example using swift in ios

UISegmentedControl example using swift in ios

December 28, 2022 by Source Freeze 4 Comments

UISegmentedControl example  introduction

In the previous  tutorial we have learned about working with UISwitch, in this “UISegmentedControl Example” tutorial going to explain about creating UISegmentedControl. The iOS segmented control is a UI component that is used to display, in a compact UI with serious of segment options for the user to choose from, each segment work like a button you can use text or image in the segment but not both, if you are an HTML developer you can easily related iOS segmented control to HTML radio button group.

This UISegmentedControl Example is written in swift so must need Xcode 6 or higher version to run this application.

Open Xcode and create a new single view application, enter the product name as “UISegmentedControl Example”, fill out the Organization and  Organization Identifier details, and select the “Swift” in the language field and remains the Use Core Data field as unselected because we are not using that feature, then select next and save the project.

uisegmentedcontrol example single view application

to create an iOS segmented control either we can use a storyboard or code instance let’s start our tutorial using storyboard.

Adding UISegmentedControl into a storyboard

Open the Main.storyboard file, then drag the UISegmentedControl into the main view it looks like the below,

adding uisegmentedcontrol into the storyboard

then, select the segmented control, and Press the command+option+4 to open the Attributes inspector, change the “Segments” option to 3, next select the Segment drop-down menu choose “Segment 2”, and enter the Title as “Third” as shown in the below.

select ios segmented control file inspectorthen center align the uisegmented control using align tab listed in the bottom of the storyboard view, click the check box of Horizontal center in container and Vertical center in container Next select the “Add 2 constraints” as shown in the below, Now segmented control added into the center of the view.

add contraints in the uisegmented control

Now, drag the UILabel into the main view, Select the label and in the Attributes Inspector set text Text Alignment to center, next click the align tab select only Horizontal center in container and click the Add 2 Constraints.

Next, we have to add IBOutlet and IBActions for the UISegmentedControl. Create an IBOutlet for UISegmentedControl and name it as “segmentedControl”

adding the iboutlet for segmented control

Then, create the IBAction for Segmented Control and Name it as “segmentedControlAction”

adding iboutlet for segmented control

Now, Create the IBOutlet for added label and name it as “textLabel” as shown in the below.

adding the iboutlet for segmented control label

UISegmentedControl Coding Part

Then add the below code snippet into viewDidLoad method, like below for changing the textLabel value as “First Segment Selected” because by default the first segment is selected.

override func viewDidLoad() 
{         
super.viewDidLoad()         
// Do any additional setup after loading the view, typically from a nib.         
textLabel.text = "First Segment Selected";     
}

Now we are going to change the textLabel values, while clicking the UISegementedControl Segments, just add the below code into the “segmentedControlAction” method in the ViewController.swift file.

@IBAction func segmentedControlAction(sender: AnyObject) 
{ 
if(segmentedControl.selectedSegmentIndex == 0) 
{ 
textLabel.text = "First Segment Selected"; 
} 
else if(segmentedControl.selectedSegmentIndex == 1) 
{ 
textLabel.text = "Second Segment Selected"; 
} 
else if(segmentedControl.selectedSegmentIndex == 2) 
{ 
textLabel.text = "Third Segment Selected"; } 
}

Then go ahead Build and Run the application will get the below output in the selected iphone or ios simulator.

uisegmentedcontrol example output

 Create UISegmentedControl Programmatically

Instead of using the storyboard can implement  uisegmentedcontrol programatically by adding the below code into viewDidLoad method in ViewController.swift file. first create the object for uisegmentedcontrol and add the frame where have to place segmented control. next add selectedSegmentIndex we have added index as 0, and create the action for segmentedControl finally add the Segmented control into the view.

var segmentedControl:UISegmentedControl! 
override func viewDidLoad() 
{ 
super.viewDidLoad() 
// Do any additional setup after loading the view, typically from a nib. 
segmentedControl = UISegmentedControl (items: ["First","Second","Third"]) 
segmentedControl.frame = CGRectMake(60, 250,200, 30) 
segmentedControl.selectedSegmentIndex = 0 
segmentedControl.addTarget(self, action: "segmentedControlAction:", forControlEvents: .ValueChanged) 
self.view.addSubview(segmentedControl) 
}

I hope this project is cool!!  you can download the Source Code here.

Filed Under: ios-tutorial, swift

Comments

  1. Nito Shon says

    March 12, 2015 at 6:41 pm

    Hi thanks for this beautiful tutorial. Can you explain how I can have two Segmented Control working in the same UIViewController? I can do what ever you have done with one segment control, but when I add another segment control, Xcode wont allow me to create an action function. I know we can use Tag, but not sure how. Can you help? Code? Any help would be appreciated. Thanks

    Reply
    • sourcefreeze says

      March 13, 2015 at 10:48 am

      Hi Nito Shon,

      Yes, you can create two segmented control in the same uiviewcontroller, but two uisegmentedcontrol having different name and different actions methods, if you still facing problem. please let me know i will update sample for that.

      Thanks,
      Source Freeze

      Reply
  2. Niklas Hucke says

    May 28, 2015 at 8:57 pm

    I have an error……

    Reply
    • sourcefreeze says

      May 30, 2015 at 4:44 am

      May i know the error you are facing?.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Parse Float with 2 decimals in javascript
  • Best Next JS courses to learn Next JS in 2023
  • How to redirect to another page in next js
  • How to get the query parameters from URL in Next JS?
  • iOS DatePicker tutorial (UIDatePicker) using Swift
  • UIAlertController iOS 8 using Swift

Recent Posts

  • Parse Float with 2 decimals in javascript
  • Best Next JS courses to learn Next JS in 2023
  • How to redirect to another page in next js
  • How to get the query parameters from URL in Next JS?
  • iOS DatePicker tutorial (UIDatePicker) using Swift
  • UIAlertController iOS 8 using Swift

Recent Comments

  • zulfi on iOS UIPickerView Example using Swift
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework

Tags

cross-platform ionic iOS javascript mobile application development nextjs objective-c swift uiwebview Visual Studio plugin

Copyright © 2023 Source Freeze