PRESENTATION

SWIFT UI
Swift UI ditches the concept of UIKIT such as Auto Layout for
an easier to use declarative programming model. It allows
fast and easy creation of work across Apple platforms.
 IMPERATIVE VS DECLARATIVE
Procedural programming paradigm Logic Programming

Object Oriented Programming Functional programming

Database processing approach

Parallel processing approach

It simply expresses the logic of computation.

It simply describes the control flow of computation.
Its main goal is to describe the desired result without direct
In this, the user is allowed to make decisions and commands
dictation on how to get it.
to the compiler. In this, a compiler is allowed to make decisions.
It gives full control to developers that are very important in It may automate repetitive flow along with simplifying code
low-level programming. structure.
WELCOME TO THE
ADVANTAGES
- SwiftUI apps can work alongside UIKit apps.

- Industry Adoption

- Low learning curve

- Instant live previews of the UI increases speed

-It offers Live Preview

ARE YOU STILL WONDERING WHETHER YOU SHOULD LEARN SWIFTUI? FEW REASONS TO
C O N V I N C E Y O U 👆🏻
LAYING OUT COMPONENTS
HOW IT WORKS

LAYOUT
A new SwaiftUI starts with a single Text view located at the
center of the screen.The body view only returns a single view.
To add other views vertically, we replace the initial Text view
with a VStack, and then add some content.

STEPS;

1. Figure out its internal spacing & subtract that from the size
poposed by its parent view.
2. Divide the remaining space into equal parts.
3. Process the size of its least flexible view.
4. Divide the remaining unclaimed space by the unallocated
space and repeat step 2
5. The stack then aligns its content & chooses its own size to
exactly enclose its children.
 SPACER & DIVIDER

Adding.a spacer() forces the view to use The Divider() component is used to draw a
the maximum amount of vertical space. horizontal line across the width of its parent
view.

The Hstack is like the VStack but its conents are displayed horizontally from left to right. Adding a Spacer() in an
HStack thus causes it to fill all available horizontal space, and a divider draws a vertical lne between components
in the HStack.

The ZStack is like HStack and VStack but overlays its content on top of existing items.

You can also use the .frame modifier to adjust the width and height of the component. Try remove Spacer() and
Divider() from Hstack and apply
DEALING WITH TEXTS
HOW IT WORKS..
Text views have several modifiers for font, spacing,
01
& other formatting requirements. When in dount
type . after the text view & choose from a list of
possible options that will appear.
Unlike regular Text views, textfield & secureField require variables
02
to store the value entered by the user. SwiftUI manages the
storage of properties declared by using @State & refreshes the
body each time the value of the state variable changes
Ther's more..Try add an 11th element to the VStack. It wont allow
03
as maximum capacity of views is 10.You will have to enclose some
elements in a Group view. Lets see example of texts: 02-Dealing-
With-Text
ADDING SWIFTUI TO AN
EXISTING APP
The Main.storyboard file is to UIKit what ContentView.swift file is to
SwiftUI. They are both default home views that are created when
you start the project.

Lets look at a sample with simple UIKit project that contains a button

Getting Ready
 CHANGING EXISTING APP..
HOW IT WORKS To host SwiftUI views in an existing app, we
need to wrap the SwiftUI hierarchy in a
ViewController or InterfaceController.

We start by performing core UIKit concepts,

such as adding a NavigationView controller to
the storyboard and adding a Hosting View
Controller as a placeholder for our SwiftUI
view.

Lastly, we create an IBSegueAction

 QUESTION 1

Does SwiftUI replace UIKit?

Yes
No

QUIZ TIME
 QUESTION 2

Does SwiftUI use Auto Layout?

Yes
No
QUESTION 3

Is UIKit dead?

Yes
No
 QUESTION 4

Can you mix views from SwiftUI and UIKit?

Yes
No
 QUESTION 5

Where can SwiftUI be used?

a) ios 13.0, macOS 9.15, tvOS 11, and watchOS 5

b) ios 13.3, macOS 11.15, tvOS 12, and watchOS 4
c) ios 13.0, macOS 10.15, tvOS 11, and watchOS 4
d) ios 13.0, macOS 10.15, tvOS 13, and watchOS 6
 QUESTION 6

Is SwiftUI faster than UIKit?

Yes
No
 QUESTION 7

How would you create programmatic

navigation in SwiftUI?

UIHostingController
NavigationController
NavigationLink
Segue
 SWIFTUI TIPS AND TRICKS

Snapshot Unit testing Custom fonts

testing with view inspector in swiftUI
 SNAPSHOT TESTING
125

SWIFTUI VIEWS
100

75

50
UIView testing
While snapshot testing is more common in other
technologies—for example, JavaScript and the Jest
25 testing library.
—its usage in the iOS community is still a niche practice.

0
2018 2019 2020 2021 2022
JUST TWO
STEPS..
A snapshot test consists of two steps:

• Taking a screenshot of a screen in a

particular state

• Verifying that the screen in the same

state has the same look as the screenshot
taken in the previous step
 STUDIO SHODWE

Getting ready
Step 1

Let's start by creating an Xcode

Alfredo Torres
SwiftUI project called
Lorem ipsum dolor sit amet, SnapshotTestingSwiftUI,
consectetur adipiscing elit, sed remembering to enable the
do eiusmod tempor incididunt
ut labore et dolore magna
Include Tests checkbox, as
aliqua. Ut enim shown in the following
screenshot

2022 PRESENTATION
 Add the swift-snapshot-testing package
Step 2

Add the swift-snapshot-testing

package

On the final screen, make

sure you add the package to
the test target (not to the app
target)

2022 PRESENTATION
 How to do it…
Step 3
5. The first time we run the test, it fails since it
Here are the steps:
doesn't find the reference image. While failing,
it also takes a screenshot of the current state
1. Start by defining a list of cards
of the screen:
2. Then, for each card, create a rounded
rectangle of the color defined in the list.

3. We create an extension to use SwiftUI in Swift

Snapshot Testing

2022 PRESENTATION
 SUCCESSFULL

Since a new screenshot was taken, the test now runs

fine..

What would happen if we changed the order of the

cards by mistake?

We run the test and it fails again since the current

screen doesn't match the reference screenshot.

HOW IT WORKS..
Explanation..
Add Custom

Fonts to the app..

HOW TO DO IT

1.Add Your Custom Font Files

The next step is to copy your custom font files to your project. SwiftUI
supports file formats .otf and .ttf.
Create a new group in your project directory named Fonts and drag the font
files you will be using into that folder.

2. You will then be prompted with a dialog box. Be sure to check your project
name under “Add to targets.” This will ensure that your fonts are compiled as
assets at build time.
CUSTOM FONTS..

CUSTOM
3. Add Your Fonts to the Info.plist
Your font files have now successfully been added to your
project. Now you have to tell your project to look for them.
Navigate to the Info.plist...

4. Click the “+” icon next to “Information property list” and

search for “Fonts provided by application.” Hit enter. This
creates a new array that will house your font names.

5. Next, click the “+” icon next to the new array you just created.
Create an item for every font file you wish to support and enter
the name in the string field exactly how it appears as the font
file name. The string should also include the extension of the
font file.

Apply Your Fonts

That’s it! You can now apply your fonts using the custom font
text modifier. Enter the name of your font as it appears
excluding the extension.
.font(.custom("Your-Font-Name", size: 48))
THANK'S FOR WATCHING