Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
hire developers

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
Started with SwiftUI

Getting Started with SwiftUI: A Comprehensive Guideline to Build A Form UI for iPhone Apps

Jaini Darji
Jaini Darji Lead Software Engineer
Last Updated on May 19, 2022
January 7, 2020 7 min read

What is SwiftUI?

SwiftUI is a general-purpose, multi-paradigm, compiled programming language developed and managed by Apple to build and design applications for both iOS, macOS, and tvOs.

It is a revolutionary way to build interactive UIs across all Apple platforms, and with the use of SwiftUI, you can define how your app’s UI should perform with declarative language so you can get rid of confusing UIKit code. SwiftUI provides auto support for Dynamic Type, Dark Mode, localization, and accessibility.

SwiftUI to Build Declarative User Interfaces

Why Declarative UIs are Important?

Declarative UI is one type of UI Designing that allows us to design a view in a declarative manner means we can describe what we want to show on our UI View & what kind of actions we want to trigger on user interaction.

We can define states of apps at once using declarative UI. In case if there is any text entered by the user, then we need to show that clear button & when the user has removed text from the text field, then that clear button should hide. So, using declarative UI, we can tell Swift UI to handle such states based on the user’s interaction. We don’t need to handle these states by hardcode like the old imperative way using some If/Else conditions.

What Was the Old Way to Design UI?

Before SwiftUI, there was UIKit; It is also a user interface framework that has many UI elements like UIButton, UILabel, UIimageVIew etc. that we can use it to design a view by drag & drop.

If we are using UIKit, then we need to use XIBs or storyboards to design the interface. In that, we need to drag & drop UI elements inside it & need to give outlets to its particular class. We can also design interface programmatically by creating UI elements’ Objects in their specific category. Suppose, If you want to give a corner radius to the button, then you need to write code for that. It is like giving the command to do so.

Suppose If I have to design a signup form with UIKit, then below are some things that you will be required to take care of:

  • Add UIScrollView or Vertical UIStackView to the view.
  • Add multiple Text Fields, UIlables, UIImageView, UIButton, etc.
  • Give constraints to all the elements on the View.
  • Give Outlets to these elements.

If you want to do some modifications to these elements like giving background or text color, then that will require some code or actions.

Watch out the WWDC19 video introducing SwiftUI with great examples and differences between UIKit and SwiftUI:

avocado test

In contrast to this, using SwiftUI, you just need to declare all this interface to swift code, No need to use XIB or Storyboard & it will make sure that this will execute in the way you want.

Here’s what that looks like:

  • Hey SwiftUI, I want to group 3 or 4 Text Fields and a button & image view in a vertical stack on the screen.

SwiftUI will build interface as we want & Put all the elements in List & in a vertical stack.

<img decoding=” width=”1024″ height=”542″ class=”alignnone size-full wp-image-11330″ />

What are the Benefits of SwiftUI?

SwiftUI provides different types of controls, layout structured, view to build the user interface. It is also providing various kinds of gestures, user input controls & provides an excellent mechanism to execute the flow of the app.

You can use SwiftUI elements with UIKit, AppKit & WatchKit to modify the platform-specific features.

SwiftUI has given solutions to the many problems that we are facing with UIKit or swift:

  • If we change in the UI, it will not recompile code again & again. It will increase development speed.
  • Any Source control related issues like while committing user interface code, we are facing version control issue in XML Files, It will not happen with SwiftUI.

SwiftUI: Getting Started

SwiftUI gives us an excellent mechanism to design forms or setting screen; It is a unique way to develop an app which has types UI in which we need to take user inputs.

Let me explain with a demo form sign up using SwiftUI:

SwiftUI: Getting Started

First of all, We need to create a new project with the following details:

 create a new project

At first, The design canvas will look something like this; you can see the live preview of code on the right side in the simulator:

design canvas

You can Play/Pause live preview using the button, that is beside the simulator on the right side:

Play/Pause live

Design Some Basic elements:

We will begin the design part with some basic UI controls like label & text fields. If we want to create a label, then I can use “Text” Component & write code like this:

Design Some Basic

Inside Text bracket, I can write the text of label & using “font” I can define fonts of Label.

If we want to create a TextField, then I can use “TextField” Component & write code like this:

TextField Component

To Place the label above the text field, we need to use “VStack” to put them in a vertical manner:

VStack

So, the final output will be as follows:

vertical manner

As you can see, there is no padding on the left or right side of the TextField, So we need to make some modifications for it using padding property.

padding property

Now, the output will be as follows:

output of TextField

To add the padding around label & textfield both, you will be required to add padding for VStack:

VStack

Now, the output will be as follows:

output

As you can see, all text field shares the same layout, so instead of rewriting code again & again, you can create a separate view to reuse it.

Here, I am creating a struct named TextFieldsLayout & move VStack code inside it.

For reuse purpose, we need to add two variables: label name & placeHolder so that the final code will be:

TextFieldsLayout

Now, I am going to add this TextFieldsLayout in ContentView with a specified label name & placeholder.

As we can’t show all the information in a single view, We need to embed this VStack in the List component. So, It will become a scrollable view.

ContentView

So, The final output will be as follows:

output will be

Now, I want to create a Sign-Up button. We can create it by using the button component. The code inside the action parameter will trigger when the user clicks on it.

button component.

To better organize the code, we will create a struct named SignUpButton.

SignUpButton

Now, I am going to do some modification for a button-like setting its font & changing its background color.

 button-like setting

Let me add SignUpButton struct inside the VStack after the last Textfield in the ContentView.

ContentView

So, The final output will be as follows:

Signout

Here we will be required to add a title to the top of the screen, So now we will embed this ContentView’s code inside the NavigationView component.

NavigationView

Here, I have added navigationBarTitle to add the Title of the screen & navigation bar items to add bar items. Here, I have added the Cancel button as a bar item on the top right corner of the screen using a trailing parameter.

So, the final Preview of the app will be as follows:

navigationBarTitle


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

New Features in iOS 15 and Swift 5.5
Archita Nayak
Jaini Darji

April 13, 2022

iOS

New Features in iOS 15 and Swift 5.5

By : Archita Nayak & Jaini Darji

Introduction At Worldwide Developers Conference 21, Apple has overcome many limitations by announcing some important features for developers. Apple has made sure while introducing the...

7 Minute Read
Read More
Unit Testing Using Mockito in Android
Archita Nayak
Mansi Shah

March 25, 2022

Application Development

Unit Testing Using Mockito in Android

By : Archita Nayak & Mansi Shah

Introduction Nowadays mobile applications are getting complex functionalities & bigger in size, that’s why writing test cases is very important to refine code and make...

5 Minute Read
Read More
Download and Restrict Video Files in android app
Archita Nayak
Mohd Zeeshan

January 13, 2022

Application Development

Download and Restrict Video Files in Android App

By : Archita Nayak & Mohd Zeeshan

Introduction A couple of months back, I came across a client requirement who wanted to build a feature to download and restrict video files in...

5 Minute Read
Read More
india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Great Place to Work
Get in Touch
call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Bacancy Behance
  • Bacancy Uplabs
  • Bacancy Pinterest
  • Brochure
  • Quality Assurance
  • Resources
  • Tutorials
  • Customer Reviews
  • Privacy Policy
  • FAQs
  • Contact Us
  • Sitemap
  • Employee
bacancy google review 4.6
bacancy google review
bacancy glassdoor review 4.5
bacancy glassdoor review
bacancy clutch review 4.8
bacancy clutch review
bacancy goodfirms review 4.5
bacancy goodfirms review
X

Get Our Newsletter

Be The First To Get The Latest Updates And Tutorials.

Request A Free Consultation

Before You Go...

Try our free consultation to visualize the best outcome of your business ideas.

INSTANT 30 MIN FREE CONSULTATION CALL