Monday, 12 February 2018

Add shadow to all sides of UIView in swift 4


Add shadow to all sides of UIView in swift 4

Add shadow to all sides of UIView in swift 4

 In this tutorial, we are going to learn about adding shadow to view (UIView) in swift/ swift 4. Giving shadow to our view controls increase the visibility of app's user interface. Follow the below steps that will create shadow on all sides of UIView. 


Step 1: shadowColor: this property of CALayer, allows us to give type of color to our shadow we want to give to an UIView.

            self.cntView.layer.shadowColor = UIColor.lightGray.cgColor

Note: replace cntView, with your view object.

Step 2: shadowOpacity: this property allows us too give transparency to our view. Default value is 0.0 (complete transparent). You can set the value between 0.0 to 1.0

            self.cntView.layer.shadowOpacity = 0.5

Step3: shadowRadius: this property allows us to give radius to the shadow    

           self.cntView.layer.shadowRadius = 10.0

Step 4:shadowOffsett: offset for layer's shadow. Default is (0.0, -3.0). Default To give shadow to all sides of view, we will set this to .zero

            self.cntView.layer.shadowOffset = .zero

Step 5 : shadowPath: shape of the shadow. Default is nil, we will use UIBezierPath to set path for our shadow.
            self.cntView.layer.shadowPath = UIBezierPath(rect: self.cntView.bounds).cgPath
            self.cntView.layer.shouldRasterize = true

Complete Code:




Video tutorial to add shadow to all sides of UIView:










Tuesday, 6 February 2018

Add custom checkbox on UITableViewCell or UITableView in swift 4





Introduction to how to add custom checkbox on UITableViewCell or UITableView in swift 4

In this tutorial, we are going to learn about how can we create or add custom checkbox on UItableViewCell or UITableView in swift and perform IBAction on our custom checkbox placed on UITableViewCell or UITableView in swift 4. We will place UIButton on UITableViewCell that will act as checkbox for our UITableViewCell in UITableView using swift 4. In the end of this tutorial, we will have output as shown in below picture
Learn how to create checkbox in swift from HERE

Steps to create or add custom checkbox on UITableViewCell or UITableView

Step 1 : Create a new Xcode project and select "Single View App" template. Name  project as "addCheckBoxonTable-Tutorial".

Add custom checkbox on UITableViewCell or UITableView in swift 4

Step 2: Open "Main.storyboard" file and drag UITableView object on to the view. Then we will add constraints to UITableView so that it fits to our screen size. Please follow the steps as shown in the below picture

Add custom checkbox on UITableViewCell or UITableView in swift 4


Step 3: Now we need to add UITableViewCell to our UITableView. Drag UItableViewCell on to UITableView, added in step 2.

Add custom checkbox on UITableViewCell or UITableView in swift 4


Step 4: Select UITableViewCell and select option "Size inspector" (option will  be on right hand side of your screen) change the height to 100.0 and background color to yellow, will get it changed from "Attribute inspector". Also change the UITableView Row height to 100.0 also. Change UITableViewCell identifer ro "CheckBoxCell"

Add custom checkbox on UITableViewCell or UITableView in swift 4
Add custom checkbox on UITableViewCell or UITableView in swift 4

Add custom checkbox on UITableViewCell or UITableView in swift 4

Step 6:  Drag UILable and UIButton (this UIButton will act as checkbox for our cell in UITableview) to content view of UITableViewCell. Add constraints to both object 

  • UILable constraint: (Top = 0, Bottom = 0, Leading = 10, Trailing = 10 w.r.t. UIButton)
  • UIButton constraint: (Trailing = 10, height = 50, width = 50, align center Y to superview)
Step 7: Add images to your project. Download images from Archive-CheckBoximages.zip. Change UIButton type to custom and remove title. Set images to UIButton as follows

  1. Default state - set image Checkmarkempty
  2. Selected state - set image Checkmark

You can change state of UIButton by changing "State config" property in attribute inspector.

Step 8: Set tag for UILable  = 1 and for UIButton = 2. You will find this property under attribute inspector too.

Step 9: Open ViewController.swift. Here we will create IBOutlet for UITableView first and connect it with UITable in "Main.storyboard". Then we will write down UITableViewDatasource methods for our UITableView.  Below is the complete code for ViewController.swift file

 


In above code, we write down UITabelViewDatasource methods. numberOfRows and cellForRow,in cellForRow we get UILable using the tags we set in prototype cell, same for UIButton. Lastly, we add target to UIButton. In the selector, we set sender selected property to the opposite of its  current elected property. In more clear word if UIButton has state not selected (state other than selected state) then we make it selected and vice-versa.

Where to go from here

In this tutorial, we learned how to add checkbox on UITableViewCell in swift 4. We use UIButton to act as custom checkbox and then ad target to it in cellForRow method. You can grab the copy of source code from addCheckBoxonTable-Tutorial.zip.





Sunday, 28 January 2018

Email address validation in swift


Email address validation in swift

Introduction to email address validation in swift

                 In this tutorial we will learn how to validate email address in swift4. We will use NSPredicate with regex to validate email of format "xxx@xx.xxx". Also we will learn how to validate an empty UITextField in swift using guard statement. Let us jump to the tutorial and learn how to validate email address in swift and check for empty UITextFields in swift.

Step 1: Open up Xcode and select "Single View App" template, name it "ValidationsAndEmailValidation".

Step 2: Open "Main.storyboard" as we are going to create user interface as shown in given below picture

Email validation in swift

Step 3: Drag UILabel to view as we want to display validation message to user if inputs failed to validate email address or if UITextFields are empty i.e empty UITextField validation and add constraints as shown below

Email address validation in swift

Step 4: Drag UITextField for Email address to be entered by user and add constraints as shown below

Email address validation in swift

Step 5: Drag UITextField for password to be entered by user and add constraints as shown below


Step 6: Drag UIButton so that we can validate the values inputted by user when he tap on button and add constraints as shown below

email validation in swift

Step 7: As of now we are done with our user interface design and if you run your app, you will see its nicely comes up on iPhone simulator screen.

Step 8: Open "ViewController.swift" and create IBOutlet for two UITextFields, UILabel and IBAction for our UIButton.


Step 9: Open "Main.storyboard" and connect IBOutlets created in step 8 to UILabel and UITextFields. Connect IBAction to "touchupinside" event of UIButton.

Step 10:
Now in viewDidLoad function set "lblValidationMessage" to hidden as we did not want to show any message until use tap on UIButton.




Step 11: We will create another function named "isValidEmail", accepting email as parameter and return TRUE or FALSE based upon email validation using regex and NSPredicate.



Step 12:
In our "loginUser" IBAction, we will call the above script and validate our email typed in "txtEmail" UITextField. Also we will use "guard" statement to check whether our UITextFields contains any value or are empty. If empty then we will show validation message in "lblValidationMessage" UILabel.



Step 13
: Run your app and you will see the validations are working.

Complete Code:

Where to go from here:

In this tutorial, we learned how to validate email address in swift. Also  we learned to validate empty UITextField using guard statement in swift. Download the source code from here. If you have any question then please feel free to ask. Thanks

Sunday, 21 January 2018

How to create checkbox in swift - tutorial



How to create checkbox in swift - tutorial

Introduction to How to create check box in swift - tutorial

          In iOS, there is no default uicontrol for creating check box in iOS app development using swift. Thus we have to create our own check box to use in our iOS apps by using other uicontrol's like UIButton. In this tutorial we will learn how to create check box in swift in ios sdk and also animating it while changing checkbox state from un-selected to selected and vice versa. Follow below given steps

Step 1: Create a new xcode project using single view application template and named it "AnimatedCheckbox".

Step 2: Open "Main.storyboard" and drag UIButton from object library to our ViewController.

How to create checkbox in swift - tutorial

Step 3: Add constraints to the UIButton as shown below

How to create checkbox in swift - tutorial


How to create checkbox in swift - tutorial

Step 4: Download the images for Check box from here AssetsCheckmark.zip

Step 5: Add the assets/images to your projects "Assets.xcassets".

How to create checkbox in swift

Step 6: Open "ViewController.swift", and create an IBOutlet for the button which is going to be used as check box for our app. Also we will assign our image/assets to button, un-selected checkbox image is assigned to default/normal state of UIButton and selected checkbox image is assigned to selected state of UIButton. Lastly, we will create an IBAction for UIButton so that we can detect the touch event,


Step 7: Open "Main.storyboard" and connect IBOutlet and IBaction(touchupinside event) to button.

How to create checkbox in swift

How to create checkbox in swift

Step 8: Also change button type and remove title as shown in the image below

 How to create checkbox in swift - tutorial

Step 9: Open "ViewController.swift" so that we can add code inside our IBAction "checkMarkTapped" so that btnCheckMark beahve like a Checkbox.  Below is the code


Step 10: Run your app and tap on Button with green circle image, you will see checkbox on or off / selected or UN-selected.

Where to go from here:

In this tutorial, we learned how to create a checkbox in swift using UIButton in ios sdk, The tutorial is basic and simple so that one can understand how we can use check box in swift in ios app as i received few emails of blog follower who are no-voice to iOS app development. If you have any question then please feel free to comment them out. You  can also download the sample code for creating checkbox in swift tutorial from this link  AnimatedCheckbox.zip

Tuesday, 9 January 2018

How to create csv file in swift programmatically - Tutorial



Introduction to how to create CSV file in swift programmatically - Tutorial

As the heading of this tutorial says, we are going to learn how to create CSV(comma separated values) file in swift programmatically. CSV(comma separated values) or excel files as they are commonly known are not a difficult task in iOS app development using swift. In this post, we will learn the code to create CSV(comma separated values) file in swift programmatically and save it to document directory. If you are looking for objective c version then please follow the given below link 


Jump to code

Step 1: Create an array, named as "employeeArray" which will store all our records for the employees as key value objects. Also we will add dummy data to the newly created array


Step 2: Now we have data with us, and its time to create CSV(comma separated values) file using swift programmatically. For this we will loop through our records in "employeeArray" and append them in a string. Then we will write this string to our document directory of the app. All the stuff goes in different function named as "createCSV", below is the code for the same


Step 3: Finally we will call our function from "viewDidLoad". Below is the complete code


Note: Please remove "comma" for your data in order to create accurate CSV file.

Where to go from here:

In this post, we learned how to create CSV file in swift programmatically. If you have any query then please free to ask using our comment section and we will respond back to you as soon as we can. Thank you :)

Tuesday, 26 December 2017

Create UITabBarController Programmatically in swift (swift 4 + xcode 9.1)



 Tutorial how to create UITabBarController Programatically in swift


Introduction to the tutorial how to create UITabBarController Programatically in swift


UITabBarController is the main controller used in ios app development. You can take the example of shopping apps or workouts app which contains the bottom tab, those app uses UITabBarController. In this tutorial, we will learn how to create UITabBarController programmatically in swift language (swift 4). Follow below steps to create UITabBarController Programmatically in swift.

Step 1: Create a new project using "SingleView App" template. We are not going to use "Tabbed App" template for our tutorial. We will name our project as "UITabBarController-Tutorial". Move to step 2 after creating your project.

Create UITabBarController Programatically in swift (swift 4 + xcode 9.1)


Step 2: Open "ViewController.swift" file. We will create function that will create TabBarController for us. We will named it "createTabBarController". Inside our function we will create an instance of UITabBarController and add it to our view.


Step 3: Call the function created in step 2, inside our viewDidLoad function.


Step 4: At this moment if you run your code, then you will see something like this

UITabBarController- programattically tutorial in swift

It's not showing any tabs, as we haven't added any viewcontrollers to it yet.

Step 5: Let us now add Tabs and ViewControllers to our UITabBarController. We will create two viewcontroller named as, "FirstVc" and "SecondVc". Below is the code of updated "createTabBarController" function.


Step 6: If you, run your code now. You will see two tabs with title "First"  and "Second". These are the titles we gave to  our two viewcontrollers.

UITabBarController- programattically tutorial in swift

Step 7: Here we are done with creating UITabBarController programmatically in swift (swift 4). But still we need to add images to our tabs. For this we can use UITabBarItem. Below is the  updated code of "createTabBarController" function. Here we set tabbaritem to our ViewControllers and also added images to them.


Step 8: Below is the app, how it looks after step 7 after running it successfully.

UItabBarController programmatically in swift - tutorial


Step 9: In order to add navigation to your view-controllers we need to add UINavigationController too. For this we will change the line where we are assigning array of ViewControllers to UITabBarController with the below code.


Step 10: Now if you run your app, you will find your tab's view background color are changed. But wait here is one issue as tabs are changing but same background color is appearing. For this error, and to resolve it please initialize  UITabBarController as global instance for the class. You can check it here in below code for whole class


Where to go from here:

In this post we learned, how to create UITabBarController programmatically in swift (swift 4). Also we add images to our UITabBarController using UITabBarItem and used UINavigationController within each tab.

Source code: UITabBarController-Tutorial.zip

Sunday, 12 November 2017

Multiple component UIPickerView in swift 4


Multiple component UIPickerView in swift 4 - tutorial with sample code

Multiple component UIPickerView in swift

As the title of this post says, Multiple component UIPickerView in swift. So in this tutorial, we are going to learn, how to create multiple component or multi component UIPickerView in swift. Generally a UIPickerView contains only single component, it is the default behavior of UIPickerView, but sometimes during app development we required two components or two lists to be displayed inside single UIPicker. In this tutorial we are going to covered the same thing. So let us start

Step 1: Create a new xcode project by selecting "Single View  App" template and name it "Multicomponent UIPickerView". Note: Please select development language as swift.

Select Singleview app template in xcode 9


Step 2: Open "Main.storyboard" file.

Select Main.storyboard file


Step 3: Drag an UIPickerView object  from object library and an UILabel, so that we can display our output of the picker selection.

Drag and drop UIPickerView and UIlabel on to ViewController from object library


Step 4: Add constraints to UIPickerView and UILabel as shown in the image.

Constraints given to UILabel

Constraints given to UIPickerView


Step 5: Open "ViewController.swift" file and first declare our IBOutlet's to both the controls, dragged in step 3.


Step 6: Open "Main.storyboard" and connect both  IBOutlet's with the respective objects.
Connect IBOutlet with the UIPickerView and UILabel


Step 7: In order to populate UIpickerView with our desired values or options we will take two arrays. With these arrays we will populate our UIPickerView.


Step 8: As we are done with are arrays, its time to write down UIPickerViewDataSource and UIPickerViewDelegate methods.

Step 9: If you run the code, you will see the following output.
If you run the code till now you will see output like this


On changing values, you will notice that label value will not be updated. So let us fix this problem.

Step 10: To detect a picker selection, we need to implement another delegate method named as "didSelectRow". Below is the code 


Step 11: Run the code and you will see whenever you change  UIPickerView values, label will get updated.

Complete code: 

Where to go from here:

In this tutorial, we learned how to create and use multiple component UIPickerView or multi component picker in swift language (swift3 / swift4).

Download source code from Multicomponent-UIPickerView.zip

If you any questions or doubts then please feel free to post your doubts in the comment section and will try to answer as soon as we can. Thank you