Pages

How to design UISegment Control programmatically in Swift

Drawing Segment Control Programmatically :

        A segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.  A segmented control affords a compact means to group together a number of controls.

        This definition is good to to get an idea of what is a segment control but now lets deal with the real thing means drawing the segment control programmatically. It is same as we draw buttons programmatically.

1. Now lets again as usual create a Xcode project by usual setting of Single View Application & selecting the language Swift.


2. Now add following below written code in your viewDidLoad() method of ViewController.swift class because whenever view will load you Segment Control will be drawn automatically.

       1. segmentController.frame = CGRectMake(100, 200, 200, 30)    
                            //segment frame size
       2. segmentController.insertSegmentWithTitle("first", atIndex: 0, animated: true
                            //inserting new segment at index 0
       3. segmentController.insertSegmentWithTitle("second", atIndex: 1, animated: true
                            //inserting new segment at index 1
       4. segmentController.backgroundColor = UIColor.blueColor()   
                            //setting the background color of the segment controller
       5. segmentController.selectedSegmentIndex = 0                
                            //setting the segment which is initially selected
       6. segmentController.addTarget(self, action: "segment:", forControlEvents: UIControlEvents.ValueChanged)  
                            //calling the selector method
        self.view.addSubview(segmentController)        
      //adding the view as subview of the segment comntroller w.r.t. main view controller

       In this code everything looks fine but the two line (2 & 3) deserves a little more attention.
Basically what these lines do is just add a segment to the segment controller. You are not bind to only two segments in segment control you can add more with these lines.


3. Now lets add the function that the selector method of segment control will call when any of the segment of the segment control will be tapped.

 func segment(sender : UISegmentedControl) {
        if sender.selectedSegmentIndex == 0 {
            println("segment 0 is selected")
        } else if sender.selectedSegmentIndex == 1 {
            println("segment 1 is selected")
        }
    }

3. After this function added your ViewController.Swift will look like:


4. Now build & run your app & Your simulator will look like:


        Here in the simulator you can see that there are two sections in Segment Control. The first one set the title "first" & second one's title is "second". Both of these segments will perform different tasks. When you press 1st segment it will result on console "segment 1 is selected" && when you press 2nd segment it will print "segment 2 is selected", this is what the function do that the segment control called in selector. There is the output of your console...


    As usual I hope this project was a good exercise for you.

No comments:

Post a Comment