SwiftUI Basics for Beginners (2020)
Вставка
- Опубліковано 7 чер 2024
- In this SwiftUI tutorial, I’ll demonstrate the basics of this new UI Framework! You're going to get a sneak preview of exactly how Swift UI works as we build a demo project step by step.
Video Timestamps:
00:00 Intro
01:36 Getting started
03:30 A brand new SwiftUI project
09:06 The Text element
12:13 The VStack
14:38 The HStack
15:20 spacer() and padding()
16:20 Adding an image
20:24 Adding a map
25:02 Mixing it all together
30:31 Outro
🚨 SPECIAL CWC+ OFFER FOR UA-cam:
cwc.to/youtubeoffer
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
SwiftUI is a new declarative framework to build user interfaces for apps across all of Apple’s platforms including iOS and the new iPadOS.
I’m super excited about Swift UI because it addresses the biggest concern I had with teaching programmatic UIs to beginners: that they would get lost and get discouraged.
SwiftUI is both intuitive and easy to grasp and it offers the maintainability and flexibility of a UI built with code. I’m going to start adopting it into my beginner material and I think you guys are going to really like it!
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
#swiftui #wwdc #codewithchris
QOTD ⚡Do you feel optimistic about SwiftUI or do you have your doubts? Let me know below!👇
Kick start your own app with my free 7 Day App Action Plan ➡️ bit.ly/7dplan
CodeWithChris I have a doubt regarding swiftui. Is it a replacement of storyboard designing ? I didn’t get why should we use swiftui actually. Could you pls tell me about my question. Thanks
Aby Mathew You can watch the WWDC video from Tuesday: Intro to SwiftUI. I got the hint from the video that storyboards will be a thing of the past. I think you will want to use SwiftUI bc it’s going to make it easier to code UI, easier to make and view changes to UI, you will get automatic things without any extra work like Dynamic Type, Dark mode, etc.
I’m optimistic about SwiftUI! I made a small app with React Native before and the live preview is amazing for UI work! I do have doubts though: how would you implement a custom drag to reorder rows of a list? How will this work with complex UI? If I want to access the size or location of a UI object as a reference for a new UI object I want to overlay near that existing object, is it possible to get that location since everything is nested as a generic “Text” or "imageview" in SwiftUI?
Tim Johnson thanks dude
@@abymathew575 I did a comparison before about storyboard vs coding your UIs: ua-cam.com/video/MruN43jw8GU/v-deo.html In general, coded UIs are easier to maintain, you don't have to detail with Interface builder bugs and it's easier to work in a team with coded UI. However, for beginners, nothing beats seeing something visually as you build it so that's why i always use storyboards in my teaching. However, SwiftUI seems to combine the best of both worlds.. being easy enough to understand for beginners and also having the flexibility of coded UI.
This is the best overall coding tutorial I've ever seen. I love that you don't just explain HOW to do something - you explain what certain methods do, and WHY we use them. 11/10 tutorial 🏆 Thank you, Chris! Subscribed.
This is the best overall comment I have read. 🙌 Thank you for your support!
-Kat
For anyone still in doubt. This is an excellent introduction to SwiftUi with a great explanation of the concepts. Highly recommended
Thanks for your kind words!
Kat
Especially if you are a beginner and start learning how to code for the first time? I hope I am new to iOS app development.
That's just wrong man. The backward compatibility is horrible on Swift UI. It's driving me crazy and giving me huge problems right now. You are just saying nicely something that is bothersome.
I've been watching your tutorials for three days now. You're really good at it! No rush, details, enthusiasme, up-to-date, relevant. For me as a beginner (zero experience), really helpful. Greats, Ruud, Netherlands
Awesome, thank you!! 🙌
- Kat
G E K O L O N I S E E R D
Love the extra support Chris. You are right that Apple's tutorial was super well-written. Having a video back-stopping me for extra clarity is really cool.
Awesome! Thanks for watching this.
- Kat
That's the only tutorial I really watched with interest and didn't distract even once. Very alive.
Thank you! 🙌
- Kat
One thing that was really nice about this tutorial is that you didn't immediately have all the answers. As a beginner, it was nice to see you stumble a few times and troubleshoot. I've watched several of your "how to build " tutorials and you are usually very rehearsed, to the point where you point out a likely issue before you even get there. In my head, it's intimidating when you do that. I think "it will be lightyears before I am competent enough to realize 3 or 4 steps ahead I am going to run into an issue if I don't type this out just so." This time you ran into errors in real time just like I imagine a normal person would - it felt genuine, and I think that helped me see what the true coding experience is like.
Wow, thanks for this feedback. We appreciate it. :)
- Kat
CodeWithChris how long have you actually been coding in Swift? :)
This is so much like React, even the hot reloading. This is awesome, I’m getting into Swift development :D
Welcome to the world of Swift development! 😊
- Kat
Great tutorial, Chris! Thank you for sharing and testing the new environment till 3a.m.! Amazing job! And I love how the authenticity breaks trough at 20:50 ! Awesome!!!
They should have asked Chris to be in that video: ua-cam.com/video/fa5p19APgd8/v-deo.html
@AdrienVillez
CodeWithChris yeah, he fits perfectly!!! Awesome!
Awesome video Chris! Started learning Swift just a month back and it was not that of a difficult procedure because I had a background of Java but there were many different kind of things which I had to come across in Swift. Apple's own Guide book kinda felt boring but your videos are great! Helped me a lot and I hope I will able make my very own application now with Swift. Keep up the great "coding" work!
Thank you! I really appreciate that :) Your support means a lot to me!
Easy to follow for the most part. I had to refer to the documentation as some things were updated. Thanks Chris!
Thanks for the feedback! :)
Kat
Thank you for your explanation, it makes SwiftUI easier for me to understand! 🙌
Glad it has been helpful! Thanks for watching!
-Kat
More swiftui videos please! Keep up the great work.
We ave more!!!! MOOOOOOOREE!
@AdrienVillez
One of the good tutorial in swiftUi so far !!!
Thank you so much for this awesome feedback!
-Kat
Thank you, Chris. Keep up the great work.
And thank you for watching!
-Kat
Thank you, Chris. Your tutorial is very clear and makes me really want to learn more. Awesome video! Your new student right here :)
Thanks for choosing to learn with us! Have fun!
-Kat
What a great video bro, thank you!! Keep doing these kind of videos about SwiftUI
Thanks! Will do!
- Kat
Awesome tutorial Chris! Can’t wait to see your next Swift UI tutorial. Hopefully with lists :)
Second video is live now! Next one coming some time tomorrow!
@AdrienVillez
To me as a beginner, SwiftUI looks way more intuitive. Can´t wait to learn it.
Thanks for watching! Good luck!
- Kat
But you won't be a beginner for long. There shouldn't be a problem with learning curve, but dumbing it down to attract beginners is the wrong way.
Amazing Tutorial!! Thanks man. I’m so excited about Swift UI. It’s like a bridge between UI designer like me and programmers.
Thanks for watching!
-Kat
Always awesome, thanks Chris!
You're more awesome, Gabe! Cheers! -Arthur
Swift language is advancing faster than my ability to keep up with it LOL
Completely agreed haha
Well, SwiftUI is not really a new version of Swift, it's a visual language to make UI!
But yes, I agree... that's start to be a lot for my brain too!
@AdrienVillez
Same bro my brain is on Swift 3 and now we already got 5.1
Lukas Seltsam I’m pretty sure SwiftUI is actually a framework written in Swift, rather than an actual part of the Swift programming language.
Android is even faster changing
A very nice tutorial, much eager to learn more about swiftUI. Thanks
Thanks for learning with us, Vivek!
-Kat
This looks great overall! Is there any wireframe/guide lines that visualize where the views/boxes actually are visually?
Check our second video to see the canvas coming to life with Live Preview
Not sure what boxes or views you are referring to! Let me know what you are looking for!
PS: Love your channel!
@AdrienVillez
Chris, Thanks for the great tutorial video. I will say it looks straight forward but still stuff to learn and unlearn. For a newbie like me, maybe more learning than unlearning but always learning keeps us young(er)....
Young(er) and Fresh(er)! The brain can benefit from all that gym!
@AdrienVillez
Thanks to this great teacher who gave me the inspiration to pursue mobile development, my first app was approved for the app store. Thank you Chris!
Great job!! Share your story to CodeWithChris: cwc.to/app-submit
- Kat
really super framework is swiftUI. I am a developing application using react-native and ios native (swift). This is flexibility to work with native development.thanks Chris.
Great to hear! Thanks for watching!
- Kat
Super video Chris! I am very new to Swift & coding, and was only getting a handle on storyboards! That said, seeing SwiftUI from the start is exciting and I know you will help us all the way!! 😃
Thanks! We'll have more SwiftUI tutorials as soon as it becomes more stable. Thanks for learning with us!
-Kat
Thank you, Chris, this is really helpful.
Awesome, Woods! Glad we helped you! :-) -Arthur
Wow! It's so cool! I'm so excited about SwiftUI! In my opinion, SwiftUI is easier and understandable. I'm looking forward to XCode 11. Thanks, Chris!
Well, if SwiftUI allows me to make my app iPhone, iPad and macOS ready, I'm all for it!
@AdrienVillez
Thanks Chris!!! Very happy to learn SwiftUI here
Thanks for learning with us!
-Kat
Dude. Loved this video. Super helpful.
Cheers, Seth! Keep on going! :-) -Arthur
thanks Chris, my first swift UI video. its great
Thank you! How do you like SwiftUI so far?
Kat
Hey Chris, feeling pretty optimistic about Swift UI. Thanks for the tutorials!
Great to hear! You can try this SwiftUI Slots app ua-cam.com/video/51Z9Kun7tFo/v-deo.html :)
- Kat
Hi Chris, thanks for this video, it's better and easier to use than than the old version. you are my best teacher. Cheers Jonas
It's gonna be some getting used to but it looks promising!
@AdrineVillez
Ahhhh refreshing! It's like learning a new HTML& CSS syntax :)
Great to hear! Thanks for watching! 🙌
- Kat
Thank you for the overview, SwiftUI looks pretty nice 👍
Agree! 🙂 Thanks for watching!
-Kat
thanks a lot for the tutorial, swiftUI looks super cool!
Thanks for watching! There will be more videos in this SwiftUI series so stay tuned!
-Kat
Looks great. I learnt a lot from just this one tutorial.
Yay, awesome! More learnings to come for you! -Arthur
Great explanation 👍👍👍👍👍
Thank you for sharing with us
Thank you! Glad you liked it. 🙌
-Kat
Helps a lot. Thanks.
Glad to hear that! Thanks for learning with us!
-Kat
Thanks Chris, this really helped!
You're so welcome, Benedict! :-) -Arthur
SwiftUI is surprisingly cool, though a bit buggy. You're a great teacher!
Thank you so much!🙌🙌
-Kat
I am very excited about SwiftUI! If you did that same project in Swift 5, it would have taken a ton more code and time. I think this is great because you get a real time preview of your results and the code is way more intuitive and simple. It is fantastic!
Yes, as long as you are running macOS Catalina, you are ahead of the competition on this!
@AdrienVillez
Just getting into IOS development as a web developer. SwiftUI feels a lot like a blend of HTML and a back end language like C#. I like it!
Welcome to the world of iOS app development!
-Kat
Thanks mate, keep up the good work.
Working at it! Editing more videos as we speak!
@AdrienVillez
This tutorial answers a number of questions that I had as a newbie (finally) to Xcode. Although I have been coding for many years (30+ years) and recognize many of the constructs and methods from other languages, some of the interactions did not make complete sense to me. This particular video provides that clarity for me and for that reason alone I think that this video should be the first video and required watching for ALL newbies to XCode. I think all your courses should reference this video as a prerequisite.
Awesome suggestion, Ken! Glad to know that we helped you! :-) -Arthur
Great tutorial, thanks
Thanks for watching Ali!
I am just beginning after completing my past UIKit project.
A bit of learning curve.
I am sure it will come together.
Tutorial, well delivered.
Did notice that color method has changed to Foreground...
Thank you
Thank you for the kind comment and learning with us! Good luck for the rest!
@AdrienVillez
I don’t have a developer account to download betas and I still learn a lot from you. Thank you for teaching us.
Thank you for learning with us!
-Kat
Great stuff Chris!
Thank you!
@AdrienVillez
Very optimistic. I came from a C++ discipline and I love change. I think SwiftUI is a game changer in Xcode. Coding the interface programatically has always been way more precise than storyboarding several views and the code can be kept DRY easier. Just my opinion, i've been doing this from the 90's. Good Luck...👍
Awesome to hear Steve. I totally agree!
One From the best tuto maker on youtube , you got a new subscriber
** Subscriber dance ** 👯♂️
@AdrienVillez
Very informative. Thanks for making video 🙂
Thank you for watching!
@AdrienVillez
Great video! Subscribed.
Wow, thanks a lot!
-Kat
I will do this tutorial this sunday. i must learn swiftUI .
thanks for the video!!!
Have fun!!
- Kat
OMG BEST VIDEO EVER! Plus this one got the most likes and views Chris!
Thank you! Glad you enjoyed it 🙌
- Kat
20:48 I realised you forgot to edit that out so I had a good chuckle 😂
I'm sure stuff like that happens all the time all the time when filming.
Keep up the vids, you're great at explaining 😊
Sorry bout that! Thanks for the kind words! 😊
-Kat
Amazing Feature. Another stage for developing applications.
In the Future, it will open door for more people do code app without cs background.
Oh not even in the future! NOW!
I have met so many people who have never step into a CS class but do programming all day long!
@AdrienVillez
Awesome video. I am VERY OPTIMISTIC and excited to see more :-) from Canada
Hello fellow Canadian!
@@CodeWithChris ♥️🇨🇦
You are the best Chris !!! thank you :)
Fantastic tutorial, with a full stack Microsoft coding background I’m looking forward to diving into this 👍
Thank you for learning with CodeWithChris! It's our pleasure to have you here. :)
-Kat
I've never coded in my life and that was so freaking easy to understand.
Glad this tutorial has helped! Thanks for watching!
-Kat
@@CodeWithChris Hi Chris - every time I open Xcode 11 Beta 5 on Catalina 5 it won't load Canvas (UVKit.Framework) has this happened to you?
Excellent Tutorial !!!
Thank you for stopping by!
@AdrienVillez
You are soooooo amazing brooo. Thanks for you time, I've learned a lot! ;)
Thank you for the kind words! You are up for a ride as our new SwiftUI UA-cam series is about to drop!!! #SpoilerAlert #IfChrisAsksItWasntMe
@AdrienVillez
subscribed Chris. okay, I have to make more proud. I am a full fledged iOS and Android App development instructor (web also), and I follow you tutorials, and even I suggest my students to watch certain sections if the way I explain is not clear. Cheers my friend
Thank you so much. We really appreciate it.
-Kat
TADA.. Thanks for the coprehensive tutorial Chris!
Great tutorial Chris. Finally getting around to having a crack at SwiftUI myself. I do like it.
Awesome, thanks! :)
-Kat
SwiftUI is pretty cool...Thanks bro for the video.. Good work..
Welcome! Thanks for watching! 🙌
-Kat
Hey Chris, I believe with time and some fixes, SwiftUI can become great for apple developers. I love how u can separate each view and bring them back in as one big final project! Also Vstack is easy
Reminds me a bit of CSS! Shaping and designing individual block of elements then put them together.
(but my knowledge in CSS is also pretty low so...)
And yes, I really think that SwiftUI is the next big Apple Cross Platform Design thing! In a click of a button your iOS app can become a tvOS and macOS app! AMAZING!
@AdrienVillez
This looks great. I need to eventually rebuild my hybrid (iOS version) apps, this was a perfect intro to SwiftUI
Yay, you got this, Byron! All the best! -Arthur
I love SwiftUI, it takes WYSIWYG to a whole different level.
I'm very curious to see what people will share on Medium, GitHub and on the Internet in general with amazing creations, dead simple animation in 3 lines of codes, etc...
@AdrienVillez
This is what we waiting for long time, because it combines and updates each elements immediately. Therefore, I hope to be advanced time after time.
Time to jump right on! SwiftUI is not even a week old!
@AdrienVillez
LOVE the SwiftUI dude. It's the future...
I agree! 👍
-Kat
love this video ❤️
Thank you for watching!
@AdrienVillez
My first impressions of SwiftUI are positive. It seems to be a useful advancement, especially for beginners.
That's true!👍
-Kat
Very good tutorial. I've very optimistic about SwiftUI--they should have had something like this a long time ago.
Thanks. Agree!!
-Kat
Boy, I just started learning swift and I'm a little bit overchallenged right now. So, Apple, could you please take a break for a while and wait for me. Just for two, three, maybe five years. Plz staph, staaaaph!!!
(Ok, I'll watch the video now...)
Haha i feel the same way!! We're all in this together!
Szymon Długo Pisst I’ve been a swift developer since it first came out, and if I were you, I’d wait and learn SwiftUI because it’ll make learning Swift a heck of a lot easier then when I first learned.
@@danuff oh, thank you so much for your hint! Sounds like switching won't be a huge drama, that's nice. For now I'll stick to my plan to learn swift, becaus I realy need more solide basics knowladge. But how about you? Are you an active developer? What are you projects? It would be amazing and inspiring to see your work.
You cannot go wrong by learning Swift because let's not make the mistake to think that SwiftUI is a replacement to Swift. Swift is still and will remain the main programming language for making apps!
You can't fetch data from a server with SwiftUI, like its name, SwiftUI produces UI!
The brain of your app still need to be coded behind all this!
@AdrienVillez
@@CodeWithChris I'm so glad you answered to this comment. Thank you for the explanation!
Thank you so much you taught me things that I litterly didn't know Xcode was capable of!
Glad to hear it! Thanks for learning with Chris!
- Kat
@@CodeWithChris Always a pleasure!
Thank you so much for your videos Chris, the community needs people like you.
I plan on venturing into the Apple eco system presumably by Monday and I would love to know what setup you use for coding generally.
Here codewithchris.com/mygear/
-Kat
Thank you once again Chris 🙂
I love SwiftUI!! It reminds me of a normal web app language like PHP.
Cool! We have other SwiftUI tutorials you might also want to check out. :) ua-cam.com/play/PLMRqhzcHGw1Z-lZaaun3A3mV9PbEfHANI.html
- Kat
SwiftUI is as awesome as u are ..enjoyed it..Cheers !!
SwiftUI has changed already since the release of this app so... we have an update coming out soon!
@AdrienVillez
Nice tutoring 👌
Thank you 🙂
-Kat
Nice tutorial! When I first saw the SwiftUI announcement I was sceptical. I also found the syntax a little weird until watching this video. The dot notation on new lines threw me 😂. Well explained. I think overtime it’ll prob be widely used. I can’t see it being used all the time in a pro environment just yet. Defo a good step forward. Nice job!
It is a scary time because nobody has experience on it, nobody has "best practices", so we just have to move along and discover alone, time to become a Pro before the Pros!
@AdrienVillez
CodeWithChris haha yeah defo! It’s a little comparable to when AutoLayout arrived. Although this does seem way more intuitive! Thanks for taking the time. I was going to resist learning this for a while but it seems fairly simple. Thanks Chris!
That's pretty cool! It's a little overwhelming for a newbie but its promising.
I didn’t record this with complete beginners in mind but that’s definitely on the roadmap!
Thank you for watching
You are the best. Thanks alot.
Thank you for the kind words!
@AdrienVillez
this is great
Thank you!!🙌
-Kat
Thanks!!
No problem! Thanks for watching this!
- Kat
Thanks Chris
Welcome, thanks for watching!
-Kat
Great relief after watching this video on swiftui. Preety good stuff in new upgrade of apple and yeah boom you always rock as usual.
Thanks man for a great exposure.
Thank you so much for your nice feedback!
-Kat
Thanks for this Chris! I was really looking forward to your insight on the new release :)
This is the crazy part! It's so brand new that everybody is in the "Whhhhat???" moment. So it doesn't matter if you are a full time dev with 20 years or experience or starting today, SwiftUI is BRAND NEW for everybody!
@AdrienVillez
Great Video
Thanks!
- Kat
I haven’t even gotten my MacBook yet (first one I’m buying quite excited for it) and I already see the potential in SwiftUI. I have quite a bit of experience with Flutter, but I’m not a big fan of it. I just find the Flutter way of doing things to be wired and usually inconvenient. SwiftUI is probably the first decorative UI framework that I’m really excited to try!
Welcome (soon) to the Mac family! Looking forward to see what you make!
@AdrienVillez
Thank you so much!
You are so welcome1 -Arthur
nice tutorial
Thank you!!
-Kat
Good job 👏🏻
Thank you!
@AdrienVillez
Thanks, Chris! I am really stoked about SwiftUI. Do you think it will become the default way to build for most people? Or will most developers stick with traditional Storyboarding for complex apps?
I think that it will take some time before everyone eventually moves to SwiftUI. Plus using storyboard helps build the foundational skills better.
-Kat
I hope this takes off so people like me can improve my current apps.
Well, it's Apple and it's brand new to everybody so, yes it will take of and nobody is better at it than someone else, so perfect time to catch the train!
@AdrienVillez
Pretty interesting. I’m looking forward to seeing if this new tool will help as I’m just learning iOS development.
Good luck on your learning journey!
-Kat
Chris, what version of the XCode are you using? I can't go with the tutorial. It doesn't show the Canvas and gives me the same message "The plug-in “com.apple.dt.UVKit” at path “/Users/macbookpro/Downloads/Xcode-beta.app/Contents/PlugIns/UVKit.framework” could not be loaded. The plug-in or one of its prerequisite plug-ins may be missing or damaged.
The plug-in or one of its prerequisite plug-ins may be missing or damaged and may need to be reinstalled."
After so much time invested in different ways to fix it, it seems like activating Swiftify extension resolved my problem. Yey!!!!
@@allina.magdalena.lovett Glad to know you solved it :)
- Francis