How To Build Responsive User Interfaces with SwiftUI

If you want to build apps that support multiple devices and screen sizes, this is the video for you. You’ll learn how to preview your user interface on different devices in profile and landscape orientation.

I’ll show you how to adjust your views based on the orientation or device and finally, you’ll learn some of the best tips for how to design user interfaces that work for any screen size.

🚨 SPECIAL CWC+ OFFER FOR YOUTUBE:

Project source code can be found here:

Size Classes

Detecting devices and orientations

iOS Resolutions

Big Mountain Studio SwiftUI Views Reference Guide

⏱ Timestamps:
00:00 Intro
00:58 Preview your layout in different devices
06:23 Detecting the iOS device and orientation
09:30 Detecting the size classes in SwiftUI
11:15 Changing your UI based on size classes
15:43 Tips for a responsive UI in SwiftUI
18:09 Outro

MY FREE ONLINE COURSE:

CWC+ PROGRAM:

WEEKLY UPDATES VIA EMAIL:

CONNECT:

ABOUT CODEWITHCHRIS:

[BrandonJablasone]

This is what I have been looking for. I prefer using the swiftUI interface rather than Storyboard

[wmblemania]

Thanks for this.
IMO, size classes are unusable.
They are good in theory, but they're far too broad.
e.g. An iPhone SE has the same size classes as an iPhone 11.
e.g. The iPhone 12 Mini which has the same logical width as an iPhone 7, but which is much taller.
If we designed around sizeClasses, we'd have the same layouts on a tiny SE as a huge Max Pro. That simply doesn't work in the real world.
I spent far too much time (years) messing around with size classes, and no longer use them.
I now get the metrics of the available space (or device) and have my own "size classes", which provide finer-grained control. e.g. iPhoneSE = smallHeight, iPhone7 = mediumHeight, iPhone12Mini = tallHeight, iPhone 11 = tallHeight. etc.
Obviously, this has its drawbacks and a maintenance. But Apple's SizeClasses have drawbacks that are insurmountable.
Cheers.

[ssaguiar]

Loved the video. I have a question: and if I have an app which must run in iPhones and iPads, how can I make the views behave the same? Thanks for your videos and tutorials.

[MobileDeveloper]

Will you provide an updated version on your CWC+?

[faengelm]

Is there a simulator for iPad mini? My code looks great on an iPad 9.7", but goes a bit off screen top & bottom on an iPad mini

[madstringer]

GeometryReader changes the layout of the UI it encompasses and by default puts the enclosed view in the upper left hand corner of the reader. This in most cases is not what you want as swiftui centers most of it's UI elements.

[andresc.]

I love you, thank you so much, gracias

[mayank_upadhyay_]

Looks like you are using a powerful mac, mine got hanged and had to restart when tried using multiple previews of different simulators.

[rizqyfahmi]

Hi Chris,

It might be going out of context
I try to build an app using storyboard with some of images for background to make it full width and auto height in aspect fit with no distortion. The question is how big and how many images will I need to make in order to make a background image that will appear nearly the same across all iOS devices?

Anyway, thanks for the video. It's very helpfull.

[Truesspite]

Sir can you please show us how to add animation fonts and maps to our game from swift please

[Lucas-vbcw]

Chris, could you please make a video on how to make a video library app in Xcode that uses videos from a firebase storage folder. Or if you have a similar video please link me to it. Thx

[griffinpenn]

A bit off topic, but what is that keyboard in the background in the intro?

[kautsaralbana]

So we need to use these condition in every view we made?!!

[MACQJR]

How do I get a quote for a new App?
- start up
- fintech, intuitive multifunction financial literacy app.

[josephferraro]

Please show how to have multiple screens with updated swift code. None of your old storyboard videos work with swift anymore there is just a black screen if your code does not contain a "content view" file

[ssaguiar]

The book is just a preview. You need to pay near 50 US $ to have it.

[Chrs]

🌿🌍👋👋👋 You're My Best Instructor...Keep it up..."Maen...!" Also I Need 't' be Enroll afresh On Precisely How 't' Create an I.O.S SYSTEM APP ...
Please ...N/B 'n' Emit Me the Charges... Okay...!🙏

[yourgflikesit]

But how to layout on an iPhone SE vs iPhone 14 pro max? They’re both regular height lol. But obviously way different.