Saturday, July 4, 2015

Create an app with three tabs using the storyboard

This tutorial shows how to create tab bar items with custom icons using the storyboard.

1. Create a new project and select iOS/Application/Tabbed Application template:



2. Create a new file named ThirdViewController.swift and change the content as:

import UIKit

class ThirdViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }

}

3. Drag a ViewController to the storyboard. Select the new ViewController and make it as a ThirdViewController class in the Identity Inspector.


4. Drag a label to ThirdViewController in the storyboard. Drag it to the center. Select 'Align' at the bottom right of the interface builder, click for both horizontal and vertical center in container, and select Add 2 Constraints.


5. Control-drag from the Tab Bar Controller to the Third View Controller. Select Relationship Segue/view controllers.


6. Now the Third View Controller is renamed as Item. Select it. Change  Attributes Inspector/View Controller/Title as Third.


7. Select Item under Third/View and change Attributes Inspector/Bar Item/Title as Third.


8. Select 'Preview' as a tool to make three icons with transparent background. Make the size of the icons as 25x25 with BatchImageResizerLite. Drag the icons to the project:


9. Select Tab Bar Item under  First View Controller Scene/First View Controller/View and select an image under Attributes Inspector/Bar Item/Image.
Repeat this process for the Tab Bar Items inside the Second and Third Scenes.


10. Run the app. Try tap on 1, 2, and 3.



1 comment: