Understanding the basic structure of a SwiftUI app – WeSplit SwiftUI Tutorial 1/11

Summary

This video script offers a detailed introduction to creating a new Swift UI project in Xcode. It explains the structure of the project, including the main files and their purposes, such as 'AppDelegate.swift' for app lifecycle management and 'ContentView.swift' for the initial user interface. The script delves into the Swift UI framework, highlighting the use of view modifiers and the 'VStack' for layout. It also introduces the concept of previews in Xcode, which allows developers to see a live version of their project and interact with it directly within the canvas, emphasizing the importance of this feature for design-time previews without affecting the final app.

Takeaways

• 📁 When starting a new Swift UI project in Xcode, you get multiple files and code lines, with the Project Navigator on the left showing all the files.
• 🚀 The 'App.Swift' file contains the main code to launch your app and maintain data while the app runs.
• 💻 'ContentView.Swift' is where the initial user interface is coded and where all the project's coding will occur.
• 🎨 The 'Assets' catalog is where you can add images, colors, app icons, and other visual elements for the app.
• 🛠️ The 'Preview Content' group has its own asset catalog specifically for previewing data within Xcode.
• 🔍 File extensions might be hidden depending on Xcode settings; you can change this in the General tab under settings.
• 📜 The 'ContentView' struct conforms to the 'View' protocol, which is essential for displaying any data on the screen.
• 🖼️ The 'body' property in 'ContentView' returns a view layout, which can include images, text, and other elements.
• ⚙️ Swift UI's view modifiers, like 'padding' and 'foregroundStyle', allow you to modify views while returning new ones.
• 🖥️ The 'Canvas' in Xcode allows you to preview your app's UI in real-time and is interactive, making it easier to test and adjust your design.

Q & A

What is the purpose of the 'WeitApp.swift' file in a new Swift UI project?

The 'WeitApp.swift' file contains the main code to launch the app and display the initial user interface. It also serves as the place to initialize and maintain data that should persist throughout the app's runtime.

Where do you write most of your code in a new Swift UI project?

Most of the coding for a new Swift UI project is done in the 'ContentView.swift' file, which contains the initial user interface for the app.

What is the role of the 'Assets' folder in an Xcode project?

The 'Assets' folder is the asset catalog where you can add pictures, colors, app icons, and other resources like iMessage stickers, which can be used in your app.

How can you preview your UI design in Xcode?

You can preview your UI design using the canvas in Xcode, which renders a live version of your project. The canvas can be enabled or disabled through the 'Editor' menu.

What is the 'SwiftUI' framework used for in a Swift UI project?

The 'SwiftUI' framework provides the functionality needed to create user interfaces in Swift. It includes tools for working with text, images, buttons, and more.

What does the 'ContentView' struct do in a Swift UI project?

The 'ContentView' struct defines the initial view of the app and conforms to the 'View' protocol, which is essential for displaying content on the screen.

What is the significance of the 'body' property in a Swift UI view?

The 'body' property in a Swift UI view is a computed property that returns some type of view conforming to the 'View' protocol. It dictates the layout and appearance of the view's content.

How does the 'View Modifier' work in Swift UI?

A 'View Modifier' in Swift UI is a method that returns a new view by applying modifications to the original data. For example, it can change an image's scale or add padding.

What is the purpose of the '#Preview' code in a Swift UI project?

The '#Preview' code allows you to render a live preview of your app's UI in Xcode. It doesn't affect the final app but is crucial for design-time visualization.

How can you change the device used in the Xcode canvas preview?

You can change the device in the Xcode canvas preview by selecting a different device from the list that appears when you click on the current device name. This will also change the simulator used when running the app.

Outlines

00:00

🚀 Overview of a New SwiftUI Project

When starting a new SwiftUI project, Xcode provides several files and around 20 lines of code. The project navigator on the left side of Xcode shows these files, including `App.swift` and `ContentView.swift`. `App.swift` contains the main code to launch the app and maintain data throughout its runtime. `ContentView.swift` holds the initial user interface, where most of the coding for the project will take place. Other files include `Assets.xcassets` for managing images, colors, and app icons, and `Preview Content` for previewing data in Xcode. The discussion also covers file extensions visibility in Xcode's settings.

05:02

🧩 Structure and Functionality in ContentView.swift

`ContentView.swift` is crucial as it defines the UI structure. The file begins with importing the SwiftUI framework, essential for UI components. It introduces the `ContentView` struct, which conforms to the `View` protocol, a fundamental protocol that all SwiftUI elements, like text, buttons, and images, adopt. The struct has a `body` property returning some kind of `View`. Inside the `body` is a `VStack`, which arranges elements vertically. The example discussed includes an image and a `Text` view, both modified using view modifiers like `imageScale`, `foregroundStyle`, and `padding`.

🎨 Utilizing Xcode’s Preview Feature

Below the `ContentView` struct, there’s a special preview section marked by `#Preview`, which doesn't affect the final app but is vital for previewing your UI in Xcode’s canvas. This canvas allows live previews of your project and is customizable for different Apple devices like iPhone and iPad models. If the canvas isn’t visible, it can be enabled via the editor menu in Xcode. The canvas is interactive, allowing you to make adjustments and see them reflected in real-time without running the full simulator. If the preview pauses due to an error, it can be refreshed with a keyboard shortcut.

Keywords

💡Swift UI

Swift UI is a framework by Apple for building user interfaces across all Apple platforms, including iOS, macOS, watchOS, and tvOS. It is designed to work seamlessly with Swift, Apple's programming language. In the context of the video, Swift UI is the primary tool used to create the user interface of the app, as indicated by the line 'import SwiftUI', which imports all the necessary functionality for the project.

💡Xcode

Xcode is Apple's integrated development environment (IDE) used for creating software for Apple platforms. It includes a suite of software development tools, such as a compiler, debugger, and interface builder. In the video, Xcode is the platform where the Swift UI project is created and managed, with the script mentioning the 'project Navigator' and 'canvas' features within Xcode.

💡ContentView

In Swift UI, ContentView is a struct that conforms to the View protocol and serves as the starting point for defining the user interface of an app. It is where developers write the code to display the initial layout and elements of the app. The script refers to 'ContentView.swift' as the file where all coding for the project takes place.

💡Asset Catalog

An asset catalog is a repository within Xcode that holds images, colors, and other resources used in an app. It helps manage and organize these assets for easy access and use within the app. The script mentions the 'assets' as the place to add pictures and colors for the app, as well as app icons and iMessage stickers.

💡View Protocol

The View protocol in Swift UI is a requirement for any piece of data that wants to be displayed on the screen. It is adopted by all UI elements, such as text, buttons, and images, and is the fundamental protocol for creating custom views. The script explains that 'ContentView' conforms to this protocol and must implement a 'body' property that returns some View.

💡Body Property

The body property is a computed property required by the View protocol in Swift UI. It defines the content and layout of a view and is the only mandatory property for a view struct. In the script, the 'body' property is mentioned as returning 'some View', which represents the UI elements that will be displayed on the screen.

💡VStack

VStack, short for vertical stack, is a view modifier in Swift UI that arranges other views vertically. It is used to create a column of UI elements. In the script, VStack is used to stack a globe image and 'Hello, World' text vertically, demonstrating how to layout elements in the app's interface.

💡SF Symbols

SF Symbols is a collection of over 1,800 consistent, highly configurable symbols that can be used in apps across all Apple platforms. They are part of Apple's design language and are available for free. The script mentions the globe image coming from SF Symbols, illustrating how to use these icons in the app's UI.

💡View Modifier

A view modifier in Swift UI is a function that alters the properties or behavior of a view without subclassing. They are used to apply styles or behaviors to views, such as padding, scaling, or changing the foreground color. The script describes the use of 'image scale', 'foreground style', and 'padding' as examples of view modifiers.

💡Canvas

The canvas in Xcode is a feature that allows developers to preview their Swift UI code in real-time. It provides a live rendering of the UI as it would appear on a device. The script explains the importance of the canvas for previewing the app's design and how it can be customized to display different devices.

💡Preview

In the context of Swift UI, a preview is a live rendering of the UI code that helps developers visualize and test their interface designs. The script discusses the 'PreviewProvider' and how it is used to generate previews within Xcode, which is crucial for design-time testing and iteration.

Highlights

Introduction to a new Swift UI project in Xcode, explaining the initial files and code structure.

Explanation of the `App.swift` file, which contains the main code to launch the app and show the initial user interface.

Description of `ContentView.swift` as the file where all coding for the project will take place.

Overview of the asset catalog in Xcode, where images, colors, app icons, and other assets can be managed.

Introduction to the preview content group, which allows for live previewing of data while coding in Xcode.

How to enable or disable file extensions in Xcode settings, helping users manage file visibility.

Explanation of the importance of comments in Swift code, describing how to add explanations without affecting code functionality.

Introduction to the `import SwiftUI` line, which imports all functionality from the SwiftUI framework.

Explanation of the `ContentView` struct, which conforms to the `View` protocol, allowing it to display UI elements on the screen.

Overview of the `body` property in SwiftUI, which defines the layout and appearance of the app's user interface.

Explanation of `VStack`, which organizes UI elements vertically within the SwiftUI layout.

Introduction to Apple's SF Symbols, a collection of icons available for use in apps across all Apple platforms.

Explanation of view modifiers in SwiftUI, which allow for modifications to views, such as adjusting image scale and foreground style.

Details about the preview feature in Xcode, which shows a live version of the project for design-time adjustments.

Tips on using the Xcode canvas for interactive previews, including troubleshooting when the canvas preview is paused.

Transcripts

[Music]

when you make a new Swift UI project

you'll get a bunch of files plus 20 or

so lines of code in X code on the left

here is a project Navigator where you

can see those files that been made for

us here is weit app. Swift uh this

contains the main code to launch your

app and show your initial user interface

uh if you want to make some data when

the app starts and keep it alive the

entire time while the app runs you put

that here in the main abstruct here uh

content. Swift contains the initial user

interface for your app it's where we'll

be doing all our coding for this project

over here is assets this is our asset

catalog where you can add pictures you

want to use in the app also add colors

here with app icons things like iMessage

stickers and so much

more then is a preview content group

with its own asset catalog inside

there's another one this time just for

hand Ling previewing of data so you can

see how things look while xcodes running

now depending on whether you have X

configured like me or something else

perhaps here you might not see file

extensions here on the left this is a

swift file you can't tell that um but it

is if you want to change that you can do

under X codes options here under

settings uh choose this General tab here

and there a whole bunch of things

options here and you're looking for file

extensions and defaults hide all you

might want show all um it's it's down to

you anyway in this project all our code

will take place inside this content

view. Swift file here um this is open by

default byx code when you make the

project so you should see it very

already open your screen um it has some

comments at the top here uh the name of

the file name of the project who made it

and date and so forth um these are SED

SL slash they're kind of grade out by

default they're ignored by Swift so you

can use these comments to add

explanations to your code if you want to

about how your code Works below that is

15 or so lines of code this big chunk

here before we start writing our own

code it's really worth going through

what all this does it's a couple of

things we new to you first this import

Swift UI line uh this tells Swift want

to import all the functionality given to

us by the Swift UI framework and apple

rides Frameworks for a whole bunch of

things like machine learning or audio

playback or processing and and and so

much more it's really powerful so rather

than just assume our program wants to

use everything ever we've got to tell it

oh this is the part Swift UI that's what

we want to use in our project here

second this content view struct uh can

call on view part here this makes a new

struct called content view say it

conforms to this view protocol and that

view protocol comes with 50y and it's

the basic protocol that every kind of

piece of data that wants to draw to the

screen somehow needs to adopt so all

text all buttons all images sliders and

so much more they're all views behind

the scenes and when you have your own

layouts that combine other views they're

also views just get bigger and

bigger inside there is this line here of

our body Su view which makes a new

computed property called body and it

returns some View and what that means is

it's going to return some kind of data

that conforms to the view protocol which

is our layout

the things are show on the screen

somehow and behind the scenes this will

actually result in a very complicated

type being returned oh it's a tabar then

a text thing then to write that image

and to write that slider big long exact

typ our data but we don't want to say

that we don't really care we're just

saying trust me it'll be some kind of

view that goes back now this view

protocol has only one requirement which

you have this computed body property

here that returns some View uh you can

and will add more properties and methods

to your view structs but body is the

only thing that's actually

required inside the body is this big

chunk of code here uh a vstack and it's

going to show this globe image with

hello world that's the image here and

the text here uh this globe image comes

from Apple's SF symbols icon collection

where there are literally thousands of

icons available to us in various weights

and more and uh they're free to use in

all your apps is really really nice they

work on all Apple's platforms as well

then this text view here is just simple

text being drawn on the screen hello

world it's not editable but it will wrap

across multiple lines as needed it's

just static text in the screen we also

have a few interesting things here these

methods being run on image here image

scale foreground style and padding um

this is what Swift UI calls a view

modifier there are regular methods

padding forr star and so forth but they

have one small difference which is they

always return a new view that contains

both your original data your image or

whatever but whatever extra modification

you asked for oh it's now an image with

a large image scale oh it's now an image

with a tinted foreground style or

whatever below this content view struct

here is this hash preview line here with

content view inside there's actually a

special piece of code that won't

actually form part of your final app

that goes to the App Store but instead

it's just to xcode so you can use that

to say let's draw a preview of your code

over here let's render a live version of

your project over here and these preview

form a really important X code feature

called the canvas which is usually

visible right in your X code window um

you can customize cre if you want you

can add more code into here to make it

more unique into how much you want to um

but it'll only affect the way your

cameras is shown at design time when you

ship to the App Store uh you know pushed

your real phone for example you're

testing things out it won't change the

actual app being run it's just for

previewing purposes only now the canvas

will automatically preview using one

specific Apple device I have the iPhone

15 Pro Max right now the change is you

want to see the list of device appear

here aror appears click on that and

choose something else you might say I

want a iPad Mini or iPhone 15 or iPhone

SE or something else here and when you

do that it'll actually change the

preview so it'll check okay I'll

download the iPhone 15 Pro for example

around the pro Max but it'll also change

when the code runs so when you press uh

command R and the virtual iOS simulator

later on you'll get a different

simulator now if you do not see this

canvas um you'll have a hard time it's a

really helpful thing to have here you

want to go to the editor menu up here

there's a whole bunch of options Only We

Care at though is canvas right here that

enables or disables X code's previewing

canvas it's a good idea to have that

available um because you can run code

and see it straight away in there

and it's actually interactive too see

you can type directly into the canvas

rather running in the simulator you can

run it right in there too if you want to

very often I should say sometimes you'll

have an error in your code or something

and you'll fix it and it'll it'll pause

this previewing area which is

frustrating you'll see a little refresh

button where it says preview paused what

you want to do is um either click the

button to review the renew the preview

or important keyboard shortcut option

command p on your keyboard that will do

the same thing as clicking the refresh

button