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


    NotificationCenter.default.post(name: 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

 http://www.iostutorialjunction.com/2015/06/search-using-uitextfield-tutorial.html

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




UIDatePicker-Swift-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.

Create-Single-view-application-UIPickerView-Tutorial-Swift-ios


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.

Adding-constraints-to-UIPickerView-Tutorial-Swift-ios

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

Connecting-IBOutlet-to-UIPickerView-Tutorial-Swift-ios

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


 customPicker.delegate=self
 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) {
        print(pickerDataSource[row])
    }


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 :)

Sunday, 16 April 2017

How to create UICollectionView in Swift3 - Tutorial


UICollectionView-Tutorial-Swift-3

Introduction to UICollectionView and Swift3 

UICollectionView is control used to create grid based layouts in iOS app development. With the introduction of swift3, lot of syntax changes happened, so let us dive in to the UICollectionView tutorial created in Swift3. We will use custom UICollectionViewCell class in our tutorial.

Steps to create UICollectionView in Swift 3

Create single view application, at this moment you have 3 files. Open ViewController.swift file and create an IBOutlet for our UICollectionView (We will drag and drop UICollectionView to view in storyboard in next step )




Open Main.storyboard and drag UICollectionView to the View Conroller Scene. Connect our IBOutlet, created in last step with UICollectionView.

Create a new UICollectionViewCell class and named it DummyCell (Check-mark "Also create xib file"). Open DummyCell.xib and give it height and width as shown in the image below.

How to create UICollectionView in Swift3 - Tutorial
Create UICollectionViewCell with xib

How to create UICollectionView in Swift3 - Tutorial
Set height and with for UICollectionViewCell


Drag UILabel to DummyCell.xib  and open DummyCell.swift. Create IBOutlet for UILabel, we dragged on DummyCell.xib file.



Open DummyCell.xib and connect IBOutlet with UILabel.

Open ViewController.swift, and create UICollectionViewFlowLayout. Flowlayout is used to tell
UICollectionView following things

  • Scroll Direction
  • Item Spacing
  • line Spacing
  • Size for the cell or item
As we have UIFlowLayout created for our UICollectionView, it's time to register nib for our UICollectionView. This tells the compiler that which xib is going to be used to create cell for UICollectionView. We will also create UICollectionViewDataSource methods/functions to populate our UICollectionView.

Complete Code for UICollectionView using Swift3



Run your code and you will see the UICollectionView with two columns.

Source code for UICollectionView in swift3: UICollectionView-Tutorial.zip

Video Tutorial for UICollectionView in swift3

Sunday, 26 March 2017

Expandable and collapsable UITableView in iOS sdk using Swift3


Expandable and collapsable UITableView in iOS sdk using Swift3 - Tutorial

Introduction to Expandable and Collapsable UITableView

In this tutorial, we are going to create UITableView that will expand and collapse on tap of row or on row selection using Swift3 language for iOS app development. In more common words, showing sub-menu/ sub-items of main menu/item. Example is shown in the below given picture


       

Steps to create Expandable and collapsable UITableView

Step 1: Download the files already created with expandable and collapsable functionality. Download those files from Download Expandable and collapsable UITableView Files

Step 2:  Add the above downloaded files to your project, check mark "Copy items if needed". 

Step 3: We will create our datasource in parent child relationship. Because the classes/files downloaded by us in last step based on parent child relation. The datasource will have parent as of type String and child will be of type Array containing String type values/elements. Below is the code that shows how to create data source for the expandable and collapsable UITableView


Step 4: To use it we will create an object of ExpandableTable and give it frame with 20 pixels gap from top.
4.1) After giving frame we will assign datasource created in last step to dataSourceForPlainTable property of ExpandedTable object.
4.2) Assign delegate to self, as we want to get notified whenever a selection is made by us.
4.3) Finally we will add it as subview to our main viewController. Below is the complete code



Step 5: Run your app and you will see the Expandable and collapsable UITableView. Tap on sub menu/ sub-item. That name will get logged on your project console.

Where to go from here

In this tutorial we learned about how to create Expandable and collapsable UITableView in iOS sdk using Swift3. You can download the full source code from here. Stay tuned for more tutorials...