iOS Tutorial Junction - iOS application development tutorial

Sunday, 16 July 2017

Create UIProgressView in swift

UIProgressView Swift Tutorial

Introduction to UIProgressView:

                 UIProgressView is the control used in iOS apps to show the progress of a particular task of the app and how much it's remain in order to complete the task. One can think of an example, like we when we install a particular software on desktop. During installation process we see a progress bar that tells how much the software is pending. In the same when we have to show progress of a particular task in iOS app we can use or we will use UIProgressView to full-fill our need. In this tutorial, you will learn how to create UIProgressView in swift.

In this tutorial we will, only covered basic functionality of UIProgressView in swift. Some of the important properties of UIProgressView are 
  1. trackTintColor  = Change color of UIProgressView track i.e. unfilled part of UIprogressView
  2. progressTintColor = Change color of UIProgressView progress o.e. filled part of UIProgressView
  3. trackImage = An image to use for the portion of the track that is not filled.
  4. progressImage =  An image to use for the portion of the progress bar that is filled.

Steps to create UIProgressView in swift:

Step 1: Create a new Xcode project, select template "Single View Application". Give product name "UIProgressViewTutorialSwift", set language to "Swift". Same is shown in the picture below

Creating new project - UIProgressview tutorial in swift

Step2: Open "Main.storyboard", drag "UIProgressView" control from object library to ViewController's view.

Selecting UIProgressView control from object library in Main.storyboard

Step3: Add constraints to the UIProgressView as shown in below picture.

Adding constraints to UIProgressView that we dragged to View of UIViewController

 After adding constraints, check for them that they were added correctly as shown in the image below

Added constraints to UIProgressView
Step4: Open "ViewController.swift" and add given below code to as shown

In above code, we created IBOutlet for UIProgressView, so that we can connect it in "Main.storyboard" and created a variable "progressValue"(this variable will get increased after 0.2 seconds). Then we created a function "updateProgress" that will increase the progress of UIProgressView  as per "progressValue". The function "updateProgress"will continuously gets called until our "progressValue" reach at 1.0. UIProgressView has minimum value = 0.0 and maximum value = 1.0

Step5: Open Main.storyboard and connect IBOultlet to UIProgressView as shown below

Showing all IBOutlet we created in ViewController.swift

Connecting IBOutlet to UIProgressView

Step6: Run the app and you will see the UIProgressView will gets updated and blue bar fills up grey one.

Where to go from here:

 In this tutorial, we learn how to create and use UIProgressView in swift. We only covered basic functionality of UIProgressView. Hope you enjoyed the tutorial. Stay tuned for more tutorial on swift.
Get source code from

Monday, 3 July 2017

Programmatically get height of keyboard in swift 3 language in iOS app - Tutorial

Get keyboard height in swift3 tutorial with example

Introduction to the tutorial programmatically get height of keyboard in swift 3 language in iOS app 

With the introduction of different size of iPhone devices,  getting keyboard height is a pain for iOS developers. With the addition of suggestion toolbar above keyboard in iOS, it's necessary for iOS developers to get exact height of the keyboard so that they can meet the app requirements where they have to show button above keyboard when user is typing on text field or other input field. 

                               iOS sends notifications each time keyboard comes up or goes off from screen. We, iOs developers can take advantage of this notification. Below are the codes that gives keyboard height in swift 3 

Adding notification observers for  UIKeyboardWillShowUIKeyboardWillHide notifications

First we have to add notification observers to our class where we want to get keyboard height as soon as user start editing an input field. You can add them in viewWillAppear()

Adding selectors/methods definition for the notification observers added 

Remove observers 

You can remove observers in viewWillDisappear(). 

Monday, 19 June 2017

Convert Date to time ago in swift 3 - Tutorial

Convert Date to time ago  in swift3 - Tutorial

Introduction to tutorial on Convert Date to time ago in swift 3

I in this tutorial I am going to share a short written extension of Date class that will convert given date and time with respect to current date time into seconds ago, minutes ago, days ago, and so on. If we are creating a feed based app or app showing listing of posts, then we have requirement to show time elapsed from the time of feed/post posting to the current time of the device.

Extension for Date that convert given date to time ago

Below is the code for the extension

Step 2: In  ViewController.swift file, viewDidLoad function, we will use it as shown below. We are passing -180 to create date 3 minutes behind current date.

Monday, 5 June 2017

Create dynamic height UITableViewCell in Swift- tutorial

Create dynamic height UITableViewCell in Swift- tutorial

Introduction to create dynamic height UITableViewCell in Swift

In this tutorial, we will learn create dynamic height UITableViewCell in Swift or how to create multi line UILabel in UITableView using swift language.
                                     We will use the new UITableViewAutomaticDimension property. UITableViewAutomaticDimension property is a handy thing for iOS developers as it sets the cell height automatically, only condition is that you set up your cell constraints correctly. So let us jump to the tutorial and learn how can we create create dynamic height UITableViewCell or multi line UILabel in UITableView using swift.

Steps to create the multi line UILable in UITableViewCell of the UITableView

Step 1: Create a signle view application and name it "Multi-Line-UILable". After creating the project you will see following files contained by the project (i am mentioning only 3 files here) 
  1. AppDelegate.swift
  2. ViewController.swift
  3. Main.Storyboard

Step 2:  Open ViewController.swift and create an IBOutLet for UITableView. 

Step 3: Create a new file which is a base class of UITableViewCell class.  

Creating MultilineLabel UItableViewCell class

Step 4: Open MultilineLabelCell.xib and follow the steps as shown in below image sequence. Here constraints will play important role in determining  UITableViewCell height, because Autolayout always consider the constraint during rendering of the content. In our case the cell will always  have 11.5 pixel space from bottom of the cell. You can change constant value of bottom constraint to see the different scenarios and also leading, trailing, top constraint value's, so that layout will look more attractive.

Step 5: Open MultilineLabelCell.swift and create IBOulet for the UILabel, we added to the UITableViewCell class.

Step 6: Open MultilineLabelCell.xib and connect IBOutlet lblTitle to UILabel.

Step 7: Open ViewController.swift and add below code.

In the above code we created IBOutlet for UITableView, named it as tblList and set delegate and datasource for our tblList UITbaleView. Here we need to tell the default estimated row height so that it improved performance as explained by APPLE. Also telling our ViewController.swif class that we are going to implement delegate and datasource for UITableView.
                                                             As we are using custom class so it's also good place to register custom cell xib name here. By now you are seeing error in your xcode, this is because we haven't yet implemented the delagets and datasource for uITableView.

Step 8: Below is the complete code that will produce dynamic cell height for UITableView row, as per the content displayed by UILabel.

Run your code and you will see, cell of dynamic height based on content length.

Tuesday, 16 May 2017

How to use NSNotification/NSNotificationCenter or NotificationCenter in Swift3 in iOS SDK

How to use NSNotification/NSNotificationCenter or NotificationCenter in Swift3 in  your iOS app

Introduction to NSNotification/NSNotificationCenter/ NotificationCenter :

Notification are good source when some one wants to trigger an action upon certain events happening during iOS app development. This thing can be achieved using NotificationCenter as it works like one to may relation using observers in comparison with delegates where we only have one to one relation between objects.  

With the introduction swift3 lots of syntax changes happened. In this post we will learn about how to implement NotificationCenter in iOS using swift3.

Implementation of code : 

 In swift3 NSNOtificationCenter class is no longer available and is replaced with NotificationCenter

First add notification observer  to the class where we want to get notified of certain event like if user went offline and did not connected to internet then show him message about No internet connection.

Adding Notification observer

   NotificationCenter.default.addObserver(self, selector: #selector(moveSegmentYPosition), name: Notification.Name("NO_INTERNET_CONNECTIVITY"), object: nil)

 In above code we did following things 

1) added observer using addObserver() method of NotificationCenter, it takes three parameters 
  • observer: the class you want to get notified when notification gets fired up (in out=r case when user went offline) 
  • selector: method name you want to get called 
  • name: name of the notification, in swift it take parameter of type Notification class. 
  • object: object whose notifications the observer wants to receive; that is, only notifications sent by this sender are delivered to the observer
2) set name of our notification, in our case it's "NO_INTERNET_CONNECTIVITY"

Defining our method

    func showInterentMessage() {
        // this will gets called when ever out no interenet

 Posting Notification

 At this moment we are done with adding our notification center and now we have to trigger/fire it when internet went off. You can post notification or fire the notification using below code Notification.Name("NO_INTERNET_CONNECTIVITY"), object: nil, userInfo: nil)

 In above code we did following things 

1) posted notification using post() method of NotificationCenter, it takes following parameters
  • name: name of the notification, in swift it take parameter of type Notification class.
  • object: object who triggers this notification, can be nil
  • userInfo: information associated with the notification, it takes NSDictionary and can be nil if there is no information you want while receiving the notification.

 Where to go from here :

In this post we learn how to use or implement NotificationCenter in Swift3 in our iOS app. If you have any question please free to comment. Happy coding :)

Thursday, 27 April 2017

Integrate search functionality in iOS app using Swift3

Integrate search functionality in iOS app using Swift3

Introduction to how to integrate search functionality using Swift3

This tutorial is focused on how to integrate search functionality within our app using swift language. Sometimes we got requirement where a large list displayed to user and at the top there is search bar from where user can perform search to sort out the listing as per text input. We will implement same search functionality using swift language in this tutorial. You can also use UISearchBar, but here we are using UITextField which acts as our search-bar, so this tutorial is focused on search using UITextfield in swift language. If you are looking for objective C version, check below link showing how to implement search using UITextField in iOS

Designing our User-Interface

Create a new single view application and name it "Search_Using_textField_Swift3". Open up main.storyboard and drag an UITableView and UITextField to it as shown in the image given below.

Adding UITableView and UITextField to our ViewControllers while developing  tutorial Search Using UITextField Swift3

Open ViewController.swift and create IBOutlet's to UITableView and UITextField so that we can connect them to our main.storyboard. Also we will create two arrays
1)  countriesArray : Array holding our original data i.e. in this case we are showing countries list
2) searchedArray :  Array holding searched results only.

The trick here is to assign all objects of originalArray to searchedArray and populate UITableView.
After populating UITableView we will add target to out UITextField for events editingchanged. Connect your Outlets before moving forward in the tutorial.

Below is the code for the whole things we discussed so far.

At this moment, you can see UITableView is showing countries names. So it's time to add search functionality and implement searchRecordsAsPerText function. Below is the code that implements the same.

Now run your code and you will see UITableView is changing data as per searched text.

Where to go from here

In this tutorial you learned, how to integrate search functionality in your app using Swift3 language. Stay tuned for more tutorials. You can download full source code from here Download source code for Search Using UITextField in Swift3

Sunday, 23 April 2017

UIPickerView example Swift3 - IOS Tutorial


UIPickerView Introduction

UIPickerView is common control used to allow user select from a list of drop-down option in IOS apps. In this tutorial we will learn how to create UIPickerView in Swift3/Swift language. 
                   This UIPickerView tutorial  is written in Swift language so you need xcode 6 and higher version to run the sample code.

Steps to create UIPickerView in Swift

Step 1: Create a single view application and name it UIPickerView-Swift. Chose development language as swift.


Step 2: Open Main.storyboard and select iPhone SE as our default layout screen so that it can adjust UIPickerView control can adapt to higher device automatically as we are going to use Auto-layouts. Drag UIPickerView on to the view and add constraints to it as shown in the image.


Step 3: Open ViewController.swift and create IBOutlet for UIPickerView added to our view in Main.storyboard. 

 @IBOutlet weak var customPicker: UIPickerView!

Step 4: Connect IBOutlet created in last step to UIPickerView in Main.storyboard


Step 5: In ViewController.swift, set UIPickerView delegates and datasource as shown in below code

 customPicker.dataSource = self

and also let the class know that we are going to implement UIPickerView delegate and datasource methods by writing the UIPickerViewDelegate, UIPickerViewDataSource against the line from where class or viwcontroller implementation starts. You can write delegate and datasource names using comma separation as shown below

import UIKit
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource

Step 6: Data-source and delegates methods are required to show data in UIPickerView and to know which row is selected by user. For this we create pickerDataSource array that contain list of countries.

 var pickerDataSource = ["India", "Australia", "United   Kingdom", "South Africa"];

Step 7: Since we are with are datasource array it's time to implement our UIPickerView delegates and datasource methods. Below is the code that does the same i.e implementation of UIPickerViewDelegate and UIPickerViewDataSource methods

  func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return pickerDataSource.count;
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return pickerDataSource[row] as String

Step 8: Run your code and you will see UIPickerView showing list of countries we added to our pickerDataSource array.

Step 9: To check which UIPickerView row is selected by user we have to implement one more UIPickerViewDelegate method. Below is the code for the method that shows which row is selected by user

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

Step 10:  Run your app now and when ever you spin the UIPickerView, the above delegate gets called each time as UIPickerView wheel stops thus giving us the user selection. You can check the console of your project.

Where to go from here

In this post you learned about How to create UIPickerView in iOS app using swift/swift3 language. You van download the sample code from here. If you have any questions then feel free to comment.
Happy Coding :)