How to build your first SwiftUI app with Swift Playgrounds – Hacking with Swift

Swift Playgrounds enables you to construct a whole iOS app from scratch, proper in your iPad. You get to attract upon Apple’s highly effective SwiftUI framework, you’ll be able to pull in libraries that different individuals have written, and in order for you you’ll be able to even transfer your undertaking over to your Mac and proceed it in Xcode, Apple’s full-blown code editor.

On this tutorial I’m going to stroll you thru constructing your very first app utilizing Swift Playgrounds for iPad, the place you’ll be capable of present photos of your family and friends, and tapping considered one of them will play a sound – it’s only for enjoyable, however you’ll study so much alongside the way in which, and in addition make use of different built-in software program in your iPad. This tutorial is geared toward freshmen, so that you don’t want any prior Swift expertise.

To comply with alongside you’ll want to put in Playgrounds from the App Retailer, however that’s it – you don’t want Xcode or perhaps a Mac. In case you have been curious, I’m utilizing Apple’s Magic Keyboard with an iPad Professional, operating iOS 15.2.

Sponsor Hacking with Swift and reach the world’s largest Swift community!

First steps

To get began, press the “App” button underneath “Get a Playground” to create a brand new undertaking. This will probably be referred to as My App by default, and it is going to be given a random icon – I’ll present you learn how to change these later.

Go forward and faucet your new playground to open it for modifying, and also you’ll see Playgrounds splits into two elements: on the left is a few easy Swift code to get us began, and on the appropriate is a reside preview that reveals your precise code operating.

I anticipate the starter code will change over time, however that’s okay as a result of I would like you to delete virtually all of it – depart solely this behind:

import SwiftUI

struct ContentView: View 
    var physique: some View 
        Textual content("Howdy, world!")

As you delete elements, you’ll see the preview on the appropriate change instantly – it truly is reside, and afterward you’ll see it’s interactive too.

Our remaining code does a number of issues:

It tells Swift to usher in the SwiftUI framework. Swift is the programming language we use to construct our apps, however SwiftUI is a set of instruments that provides us buttons, photographs, and different frequent person interface components.
It creates a brand new piece of UI, often known as a view in SwiftUI, that is known as ContentView. You’ll create numerous views in your apps, however each wants its personal distinctive identify.
It says the physique of this view – the factor that’s truly proven on the display screen – will return some form of SwiftUI view. Which means our ContentView will present different items of UI inside.
Lastly, it says the UI we need to present is the textual content “Howdy, world!”

We’re going to be writing much more code in there over the course of this tutorial, however first I need to spend a couple of minutes simply noodling round with the fundamentals so you’ve got a greater grasp of what’s occurring.

We will customise the way in which our textual content seems to be by including modifiers. There are many these constructed proper in to SwiftUI, and also you’ll usually end up utilizing a number of directly to get precisely the appropriate impact.

For instance, attempt altering your textual content to incorporate these modifiers beneath:

Textual content("Howdy, world!")
    .font(.largeTitle)    
    .foregroundColor(.blue)

That can give the textual content a big font and a blue colour.

You may as well management the background colour of the textual content by including one other modifier. For instance, we might give our textual content a white foreground colour and a blue background colour like this:

Textual content("Howdy, world!")
    .font(.largeTitle)    
    .foregroundColor(.white)
    .background(.blue)

There are two stuff you’ll discover there:

We set the foreground colour of the textual content utilizing foregroundColor(), however the background colour utilizing simply background(). That is intentional: foreground colours are at all times easy colours, however backgrounds can embrace all types of different issues similar to photos.
Discover how the background matches virtually precisely across the fringe of the textual content – Swift is aware of the precise measurement of the textual content, together with its pure line spacing allowance, and makes positive the background colour is identical measurement.

Should you wished to make the background a little bit greater than the textual content, ask SwiftUI to incorporate some padding earlier than the background, like this:

Textual content("Howdy, world!")
    .font(.largeTitle)    
    .foregroundColor(.white)
    .padding()
    .background(.blue)

And now you’ll see the blue background extending past the textual content, which is nicer. You’ll be able to specify the place you need the padding to be positioned, e.g. padding(.horizontal), however for now simply stick to padding().

Many SwiftUI modifiers could be utilized a number of instances, inflicting them to stack up and create fascinating results. For instance, we might apply extra padding and a second background colour, then much more padding and a third background colour:

Textual content("Howdy, world!")
    .font(.largeTitle)    
    .foregroundColor(.white)
    .padding()
    .background(.blue)
    .padding()
    .background(.mint)
    .padding()
    .background(.inexperienced)

Tip: All these colour names we’re utilizing are constructed into SwiftUI, however you’ll be able to create your individual from scratch too.

Making an inventory

Now that you just’ve seen a few of the fundamentals of SwiftUI, I need to begin transferring over to the precise app we’re going to construct.

In iOS two of the most typical forms of view are referred to as Listing and NavigationView: one represents a scrolling checklist of knowledge such as you see in Settings, and one gives the power to show a title on the prime and optionally the power to point out extra data when one thing is tapped.

You’ll be able to place all types of knowledge inside your lists, however let’s begin with just a few textual content for now – change your code to this:

NavigationView 
    Listing 
        Textual content("Howdy, world!")

You’ll see our textual content seems on the appropriate, with a curved field round it to spotlight that this can be a checklist row. There’s additionally plenty of area above it – that’s area for the title of our navigation view, which is empty proper now. We will present our personal title utilizing one other modifier connected to the checklist, like this:

NavigationView 
    Listing 
        Textual content("Howdy, world!")
    
    .navigationTitle("Friendface")

We’ll add some extra to that in a second, however first I’d such as you to attempt swiping round in our earlier – you’ll see you’ll be able to scroll up and down a little bit, the title “Friendface” form of stretches once you scroll down, and once you scroll up it shrinks away right into a smaller title. That is precisely how all the remainder of iOS behaves, and we get all of it without cost with SwiftUI.

That preview is our actual code operating, however Swift Playgrounds additionally has a Play button that runs the app fullscreen, as if it have been operating on the iPad all by itself. Should you press that now you’ll see one thing fascinating: our checklist takes up solely the left-hand nook of the display screen – the entire right-hand aspect is empty!

This occurs as a result of the system thinks our checklist is designed to let customers select from an inventory of knowledge, in order that after they select one thing from that checklist they see extra particulars on the appropriate – once more, precisely how the Settings app works, but additionally Mail, Messages, and plenty of others.

On this app we don’t need that conduct, so we will ask our NavigationView to take up all accessible area.

That is achieved with one other modifier, this time connected to the NavigationView. So, it is advisable to exit app playback and head again to ContentView.swift – faucet the orange and white Swift icon within the prime, then press Cease from the checklist of choices.

Again in ContentView add this modifier on the finish of our NavigationView:

.navigationViewStyle(.stack)

Now should you press Play once more you’ll see our Listing takes up the entire display screen – significantly better!

Working with dynamic knowledge

Inside our Listing we now have a single piece of textual content, however actually we need to present heaps of items of textual content – one for every good friend or member of the family we need to have in our app. We will do that utilizing one other form of view referred to as ForEach, however it must be given two vital items of knowledge:

An inventory of all of the objects we need to present. It is going to feed us one merchandise at a time, and ask us to transform that right into a SwiftUI view that may be proven within the checklist.
A method to establish every merchandise in our checklist uniquely, in any other case SwiftUI has no method of realizing which piece of knowledge ought to belong to which checklist row.

Each of those take some new studying, however solely a little bit. The primary new factor is that we have to present an inventory of names exterior the physique of the view, like this:

struct ContentView: View {
    let names = ["Paul", "Sophie", "Charlotte"]

    var physique: some View {

That creates a brand new worth referred to as names, and it comprises an array of textual content: Paul, Sophie, Charlotte. Arrays allow us to maintain a number of values in a single place, and they’re precisely the form of factor ForEach likes to be given.

The second new factor is our ForEach view. Bear in mind, this must be given an inventory of all the info we need to present, which will probably be our names array, however it additionally must be instructed learn how to establish every merchandise within the array uniquely.

We now have Paul, Sophie, and Charlotte in our names array, which implies each identify is exclusive. Apart from the textual content itself there’s nothing else distinctive in regards to the objects in our array – they don’t have ID numbers connected, for examples, they simply have the textual content itself. So in the case of telling SwiftUI what makes each bit of knowledge distinctive, we use a particular worth, .self, which implies we’re promising that the merchandise itself is exclusive. If afterward you add extra names that aren’t distinctive you’ll hit an issue, however it’s adequate right here!

So, alter your Listing code to this:

Listing 
    ForEach(names, id: .self)  identify in
        Textual content(identify)

You’ll see our preview updates to point out all 3 times, simply as we wished – good!

Let’s break down that new code:

We nonetheless have an inventory of things, besides now we’re specifying them utilizing an array of knowledge relatively than hard-coding all our textual content views.
We’ve instructed ForEach to create its objects from the names array, and in addition that every merchandise in that array could be recognized uniquely by itself.
ForEach will hand us one identify from the array at a time, and ask us what we need to do with it. That’s the identify in half – it’s actually sending one identify into our checklist row, so we will do with it no matter we wish.
On this case we’re displaying that identify in a textual content view, which is why we see the names in our checklist.

Having knowledge in an array is way nicer than typing it in by hand, as a result of now we will modify our array to see extra objects in our checklist:

let names = ["Paul", "Sophie", "Charlotte", "Adrian", "Novall", "Allen"]

Bringing in photos

One of many nice issues about constructing software program in your iPad is that there are such a lot of different apps you’ll be able to lean on to usher in further content material. Right here we’re going to usher in some photographs, however afterward we’ll additionally use Apple’s Voice Memos to import some sounds too.

First, photographs: within the sidebar for Swift playgrounds you’ll see an Add New Merchandise button, which seems to be like a doc with a + over it – please faucet that now, then choose Photograph. You’ll see your picture library displaying all the photographs you’ve taken beforehand, and I’d such as you to pick out a photograph both of your self or of a good friend or member of the family.

For me, I’m going to usher in a photograph of my eldest daughter, Sophie. When it’s imported, it is going to be given the default identify of “Picture Asset”, however I’m going to rename that to “Sophie”. You’ll be able to rename your image by long-pressing on it, then deciding on Rename from the popover menu. I’ll then usher in one other picture, this time of my youngest daughter Charlotte, then rename it from Picture Asset to Charlotte.

Lastly, I’m going to usher in yet another image, however this time I’m going to take it reside as a result of it reveals you an fascinating downside you’re more likely to face. I’d think about it a bug in Swift Playgrounds, so maybe by the point you comply with this video it’s now not a problem!

Anyway, I’m going to launch the Digital camera app now, swap to front-facing digital camera, and take a photograph of myself. Now I’m going to go again to Swift Playgrounds and import that picture, and also you’ll see once I accomplish that it’s the other way up! This occurs as a result of most cellphone cameras retailer the image in a single mounted method, however then save a hidden flag to recollect which orientation to make use of when drawing it. That orientation is being ignored by Swift Playgrounds, so we’re seeing the image the way in which iOS sees it internally.

To repair this, we’re going to start out by deleting the picture as a result of it’s no good to us as-is. Now it is advisable to head to the Pictures app, choose the image you simply took, and make any change in any respect – even a tiny crop is ok. Once you press Achieved iOS must rewrite the picture file to use your change, and it robotically takes this chance to write down it within the appropriate orientation.

So, when you’ve made a small change to your image you’ll be able to head again to Swift Playgrounds and import it as soon as once more – it ought to all be superb now. As that’s an image of me, I’ll rename it from Picture Asset to Paul.

We now have three photos of individuals, which is greater than sufficient for us to proceed on with, however I’m going so as to add one bonus image of my canine, Luna. She’s not the neatest canine round, however she’s lady! This may as soon as once more by given the default identify of Picture Asset, however I’ll rename it to Luna.

Now I’m going to replace our names array to match the 4 image names we added:

let names = ["Paul", "Sophie", "Charlotte", "Luna"]

And now for the very best bit: relatively than simply displaying the textual content Paul, Sophie, and Charlotte, we will present photos as a substitute. Change your ForEach view to this:

ForEach(names, id: .self)  identify in
    Picture(identify)

That can make your preview change, however it’s going to look a bit unusual now – actually not the photographs you have been anticipating.

This occurs as a result of our photos are being displayed at their authentic measurement, which is method too huge for our little preview. We will carry them in measurement by attaching two modifiers: one to let SwiftUI resize the pictures, and one to make them scale down so that they match the accessible area:

Picture(identify)
    .resizable()
    .scaledToFit()

A lot better!

Now, keep in mind how earlier I level out the curved field round our checklist rows? That was welcome earlier as a result of it made our rows look visually distinct in our structure, however now it’s not so good – it could be a lot nicer if our photographs went edge to edge.

We will get that by altering Listing to ScrollView – actually simply change the phrase “Listing” to be “ScrollView” and we’ll get a greater structure. SwiftUI’s Listing view is for scrolling tables of knowledge like we now have within the Settings app, or once you’re selecting a contact to speak to in Messages, however once you need your individual customized structure a easy ScrollView is less complicated as a result of we will put no matter we wish in there.

Talking of placing no matter we wish in there, how about we add a little bit further styling to our photos? Attempt including these two modifiers beneath scaledToFit():

.cornerRadius(25)
.padding(.horizontal)

Good!

Taking part in some audio

On this app we’re going to point out faces belonging to varied family and friends, then play sounds after they get tapped. We’ve dealt with photos, however how do make them do one thing when tapped?

Nicely, that is dealt with by one other SwiftUI view referred to as Button, which is created with two items of knowledge: some code to run when the button is tapped, and a label for the button – what you need customers to see on the display screen.

For us the label is our picture, so we will begin off by wrapping the picture inside a button like this:

Button 
    // ???
 label: 
    Picture(identify)
        .resizable()
        .scaledToFit()
        .cornerRadius(25)
        .padding(.horizontal)

The // ??? line is known as a remark – once you begin a line of code with two slashes like that, it tells Swift to disregard the road. Feedback are helpful to remind your self how code works, however right here it’s a placeholder for our button’s motion – what will we need to occur when the button is pressed?

Nicely, once you’re simply constructing your app you would possibly need to print a message to the display screen by changing the remark with this:

print("(identify) was tapped!")

The (identify) half tells Swift we need to put the present worth of identify into the message, so now tapping Sophie will print “Sophie was tapped!” – you’ll be able to see these messages by displaying the console when your app is operating.

What we wish right here is to play sounds for our individuals, which implies we have to begin by importing some audio information we will work with. I have already got sounds recorded for Sophie, Charlotte, and Luna, so I’ll import these by selecting Insert From when including a brand new merchandise. This may carry up the checklist of current paperwork in my iCloud Information, the place I’ve my information able to go – I’ll simply faucet to carry them in, and you are able to do the identical. Swift Playgrounds can preview audio information for us: choose one to open it, then faucet the Play button to listen to the way it sounds.

Every of those sound information matches the names of my photographs, with “m4a” on the tip – that’s the file extension used for audio information. There wasn’t one for me, however that’s okay as a result of I can simply document one now by launching Voice Memos and recording one thing. If it is advisable to do the identical, document your audio as regular then faucet the Share icon and choose Save to Information and reserve it wherever you need – I’ll select iCloud Drive as a result of it’s extra handy, however you are able to do no matter works. For me that new audio will already be copied over to iCloud Drive, so I can head again to Swift Playgrounds and import Paul.m4a similar to the opposite audio information.

So now we now have a bunch of images and a bunch of sounds, how will we truly make one sound play when its acceptable image is tapped?

Nicely, SwiftUI doesn’t have a built-in method of enjoying sounds – the “UI” half means it does person interfaces, not audio. However that’s okay, and in reality it’s all a part of my plan as a result of it provides me an opportunity to point out you an actual energy function of SwiftUI: you’ll be able to usher in code anybody else has written, straight from code sharing websites similar to GitHub.

On this case, I already wrote a free framework to make enjoying audio simpler in SwiftUI, and we will carry it in right here and begin utilizing it. To try this, return to the Add New Merchandise button and this time select Swift Package deal.

Swift Playgrounds will ask you for the package deal URL, which must be an web location that comprises the code you need to learn. For this undertaking I’d such as you to enter the next: https://github.com/twostraws/Subsonic. That’s the identify of my audio framework, and once you press return Swift Playgrounds will fetch some details about it so it may be utilized in our app.

Once you see the “Model” and “Enable Updates” choices seem, faucet “Add to Mission” to carry it in. You’ll see Subsonic will get listed underneath Packages in your sidebar, so should you ever resolve you don’t need it sooner or later you’ll be able to long-press and select Take away Package deal Dependency to do away with it fully.

Anyway, right here need to use it, so begin by heading again to your code in ContentView.swift. When you have a bunch of m4a information or photographs open, you’ll be able to faucet the shut icon close to the highest to do away with them.

Now we have to make simply two extra modifications to ContentView.swift to get this app working for actual.

First, we have to add one further line on the very prime, to inform Swift we need to import all of the performance from the Subsonic package deal. Which means including import Subsonic subsequent to import SwiftUI – I want to place it earlier than as a result of I maintain my import strains in alphabetical order, however it doesn’t truly matter.

And the second change is in your button’s motion, substitute the print() code with this:

play(sound: "(identify).m4a")

That provides “m4a” to the present individual’s identify to match our sound information, then asks Subsonic to play them. That’s it! You’ll be able to instantly faucet the faces on the appropriate to play the matching sounds – Subsonic will fortunately place many sounds directly, so you’ll be able to faucet the identical face repeatedly or faucet a spread.

Making it work higher fullscreen

To date we’ve largely been utilizing the little preview space on the right-hand aspect of our code, however should you press the Play button you’ll see our app operating fullscreen. That is how people who set up the app from the App Retailer will see our app, and though it really works it’s not an amazing expertise as a result of our photos are so huge!

To repair this we will take a extra scalable strategy: relatively than simply displaying one image at a time, we will present a grid of images. This takes two steps, beginning with describing to SwiftUI what number of columns we need to have in our grid.

Add this beneath the let names line, exterior the physique of our view:

let columns = [GridItem(.adaptive(minimum: 250))]

Which means “create an array of grid objects, however put just one merchandise in there: an adaptive grid merchandise that has a minimal measurement of 250 factors.” Adaptive grid objects allow us to say we don’t care what number of columns we now have in our grid, so long as they’re a minimum of 250 factors large – we’re giving SwiftUI the chance to make them wider if needed, however they should be a minimum of 250 factors large.

The second change is to wrap our complete ForEach code – every little thing that’s at the moment contained in the ScrollView – inside one other new view kind, referred to as LazyVGrid. This creates grids of views, and it is advisable to inform it the way you need your grid laid out, and what must be contained in the grid.

For us the grid structure is that new columns array we simply made, and what must be inside is all our ForEach code. So, change your code to this:

ScrollView 
    LazyVGrid(columns: columns) 
        ForEach(names, id: .self)  identify in
            // all the prevailing ForEach code

Within the preview space every little thing will look the identical, as a result of our grid is robotically adapting to make greatest use of the area. However should you press the Play button you’ll see the photographs unfold out throughout a grid row – you continue to get all the identical scrolling conduct as earlier than, however now numerous photos can seem on the identical row.

Wrapping up

That’s all of the code we’re going to write down on this undertaking, however earlier than we’re achieved I need to present you one vital final function: altering your app’s settings that management its identify, accent colour, and icon.

These are all accessed underneath the App Settings window, which you may get by tapping “My App” within the sidebar. The identify of your app will probably be what’s proven when deciding on a undertaking in Swift Playgrounds, however may even be used on the House Display screen should you ship your app to the App Retailer – I’m going to alter mine to Friendface, to match what I’ve used elsewhere.

Subsequent, your app’s accent colour is used to paint two elements of your app: any interactive issues similar to coloured icons and button textual content, but additionally the placeholder icon. Swift Playgrounds will robotically select a random accent colour for you, however you’ll be able to change it should you like.

Lastly, we will change the app icon to one thing else. There are a bunch of built-in icons to select from, which mix together with your accent colour to create one thing pretty distinctive. Alternatively, you’ll be able to faucet Customized to usher in an image you designed from Pictures or Information.

The place subsequent?

We’ve coated so much on this tutorial, however actually it’s just the start – Swift Playgrounds can take photos with the digital camera, learn the person’s location, authenticate utilizing Face ID, entry the microphone, and a lot extra.

Plus SwiftUI itself is basically full of some unimaginable options, letting you create wealthy, highly effective apps for iPhone and iPad, but additionally Apple Watch, Apple TV, and macOS. Actually, Swift Playgrounds may even share your undertaking to your Mac, so you’ll be able to swap over to Apple’s Xcode as a substitute – it’s the a lot greater software that almost all skilled iOS builders use, however all of the Swift and SwiftUI you realized work simply as effectively right here.

Anyway, that’s the tip of this tutorial. We’ve coated plenty of floor:

The fundamentals of SwiftUI views and modifiers
Utilizing Listing and NavigationView
Bringing in dynamic knowledge with an array
Importing photos and audio utilizing Pictures and Voice Memos
Resizing photographs and rounding their edges
Including buttons that set off actions
Importing Swift packages written by another person
Laying out our photographs as a grid relatively than an inventory
Customizing your app settings

If you wish to keep it up studying Swift and SwiftUI, I’ve an enormous, free course that features over 20 initiatives, quizzes to check your studying, suggestions, solutions, and a lot extra. It’s referred to as the 100 Days of SwiftUI, and like I mentioned it’s utterly free – it does use Xcode, however I feel you’ll discover that each one of it really works nice in Swift Playgrounds too! To seek out out extra, click on right here: the 100 Days of SwiftUI.

I sit up for seeing the superb stuff you make with Swift Playgrounds! Ship me a tweet @twostraws and let me know what you consider Swift Playgrounds 4 – are you excited to start out utilizing it, are there explicit stuff you miss, and do you suppose it is going to assist an entire new vary of builders get began with Swift and SwiftUI?

Sponsor Hacking with Swift and reach the world’s largest Swift community!

Source link