How To Build Responsive User Interfaces with SwiftUI

Рет қаралды 26,491

Күн бұрын

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 KZfaq:
cwc.to/youtubeoffer
Project source code can be found here:
github.com/codewithchris/Resp...
Size Classes
developer.apple.com/design/hu...
Detecting devices and orientations
developer.apple.com/forums/th... (check the first answer for detecting device and orientation using the UIDevice API)
iOS Resolutions
www.ios-resolution.com/
Big Mountain Studio SwiftUI Views Reference Guide
cwc.to/swiftui-book (aff link)
⏱ 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:
⚡ How to make an app in 14 days - cwc.to/14days
CWC+ PROGRAM:
👩‍💻 All our courses in a learning path - cwc.to/plus
WEEKLY UPDATES VIA EMAIL:
✉️ Every Saturday, receive an email digest of new content - cwc.to/newsletter
CONNECT:
🌍 Website - codewithchris.com
😺 GitHub - github.com/codewithchris
📸 Instagram - / codewithchris
🐦 Twitter - / codewithchris
ABOUT CODEWITHCHRIS:
Hi I’m Chris! I’m dedicated to teaching fundamentals about how to make an app. This is important if you’re trying to land an iOS job, be a freelancer, increase or start a business with an app idea. On this channel and my website, you'll find a ton of free resources and tutorials to aid you on your journey to learn iOS development. Many people have learned to code and build apps on their own! cwc.to/reviews

Пікірлер: 50

@adesanyasegun1335 2 жыл бұрын

Been looking forward to this video! 😀

@CodeWithChris 2 жыл бұрын

Yay, Ade, glad to see you here! :-) -Arthur

@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

@BrandonJablasone Жыл бұрын

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

@CodeWithChris Жыл бұрын

Hope you enjoyed the video! - Pat

@arashmohammadi4833 2 жыл бұрын

Thank you legend 🔥🔥

@CodeWithChris 2 жыл бұрын

YOU are the Legend!!!! @AdrienVillez

@GeEazY420 2 жыл бұрын

Thanks for content

@CodeWithChris 2 жыл бұрын

You are so welcome! :) -Arthur

@w0mblemania 2 жыл бұрын

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.

@CodeWithChris 2 жыл бұрын

Appreciate for posting your insights here! :-) -Arthur

@MobileDeveloper1965 2 ай бұрын

Will you provide an updated version on your CWC+?

@rizqyfahmi8343 2 жыл бұрын

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.

@CodeWithChris 2 жыл бұрын

Hello, kindly post your question on our CodeCrew forum so that our tech support staff can assist you: codecrew.codewithchris.com. Thank you! -Arthur

@andresc.1112 2 жыл бұрын

I love you, thank you so much, gracias

@CodeWithChris 2 жыл бұрын

You are so welcome, Andres! -Arthur

@ssaguiar 5 ай бұрын

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.

@natgenesis5038 3 ай бұрын

GeometryReader using size.with and size.height on position for position or frame if u wanna frame a size

@Lucas-vb9cw 2 жыл бұрын

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

@CodeWithChris 2 жыл бұрын

"Hello, you can get the data of the firebase file and get the link property so you will be able to download/stream it.. you can also check out our database course or later modules that use firebase maybe it fits your needs.. head on over to learn.codewithchris.com to know more about our courses - Francis"

@griffinpenn9827 2 жыл бұрын

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

@CodeWithChris 2 жыл бұрын

We'll get back to you soon. :) -Arthur

@Truesspite 2 жыл бұрын

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

@CodeWithChris 2 жыл бұрын

Hello, you can post this question here so you can receive advice from our technical support staff: codecrew.codewithchris.com :-) -Arthur

@josephferraro5295 2 жыл бұрын

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

@CodeWithChris 2 жыл бұрын

"Hello, yes ""contentView"" is the SwiftUI project.. which is different from a storyboard project.. if you want to make a project in the old style (storyboard) then you have to change the SwiftUI option to storyboard when creating your project - Francis"

@mad7stringer 4 ай бұрын

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.

@mayank_upadhyay_19 3 ай бұрын

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

@natgenesis5038 3 ай бұрын

Exactly

@MACQJR 2 жыл бұрын

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

@CodeWithChris 2 жыл бұрын

Try contacting app builder companies :-) -Arthur

@MACQJR 2 жыл бұрын

Which company would be more suitable if I was looking to build Coinbase / Robinhood and other features.

@kautsaralbana7366 11 ай бұрын

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

@CodeWithChris 11 ай бұрын

Hello @kautsaralbana7366! Thank you for taking the time to comment. You don't need the condition every time you need to create a view it depends on what you're trying to do. --Joash

@bubludunghul6377 2 жыл бұрын

Bro how to create a own shopping app

@bubludunghul6377 2 жыл бұрын

In windows

@CodeWithChris 2 жыл бұрын

Hello, so sorry, iOS app development doesn't work on Windows. You need to have a Mac computer to build iOS apps. :-) -Arthur

@ictgamunu6038 2 жыл бұрын

Fist comment ❤️

@bikashyu 2 жыл бұрын

thanks for the first comment .subscribed 👍

@CodeWithChris 2 жыл бұрын

OG! Here's the first reply. :- )-Arthur

@MrIMacro 2 жыл бұрын

R.I.P storyboard :(

@w0mblemania 2 жыл бұрын

Hooray! Storyboards caused sooo many problems.

@CodeWithChris 2 жыл бұрын

Thanks for dropping by! :-) -Arthur

@ssaguiar 4 ай бұрын

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

@ShaikJunaidth-C 2 жыл бұрын

21st comment? 😂

@CodeWithChris 2 жыл бұрын

And you get a heart from us. :-) -Arthur

@Chrs007 2 жыл бұрын

🌿🌍👋👋👋 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...!🙏

@CodeWithChris 2 жыл бұрын

Thanks for your very dynamic comment! :-) -Arthur