No video
Basic SwiftUI Layout Containers and UI Elements
Рет қаралды 37,540
Күн бұрынLearn fundamental SwiftUI layout containers and elements including:
- VStack, HStack, ZStack
- Button, Image, Text, Spacer
In this SwiftUI tutorial series, we'll go through SwiftUI view elements, modifiers, states, lists and more. At the end of this SwiftUI tutorial series, you'll have created slot machine app!
Image Assets:
codewithchris.com/code/SwiftU...
I’m also building a SwiftUI Resource Hub which you can find here:
codewithchris.com/swiftui/
𝗩𝗶𝗱𝗲𝗼 𝗧𝗶𝗺𝗲 𝗦𝘁𝗮𝗺𝗽𝘀:
00:00 Intro
00:42 The Image Element
01:56 The Button Element
04:06 The VStack
06:57 The Hstack
08:20 The Spacer
11:50 The ZStack
13:26 Exercice
14:09 Outro
CodeWithChris Resource links:
Get a customized roadmap for your app and start building it in 7 days:
⚡codewithchris.com/actionplan/...
My Courses and Training:
📚 codewithchris.com/beginnercou... swiftui02&
ALL my recording equipment and recommended books:
📚www.amazon.com/shop/codewithc...
To continue learning how to make apps with us, be sure to subscribe to our channel:
⚡kzfaq.info...
And we also have a thriving Facebook community where you can meet like-minded iOS learners and get support on your own iOS app development journey!
⚡codewithchris.com/community/
My guide for Xcode on Windows:
⚡codewithchris.com/xcode-for-w...
For more tutorials on how to build iPhone apps, make sure you subscribe and visit my site where you'll find a community of like-minded learners! Learning something new is always more fun with other people!
⚡Website: codewithchris.com/?...
⚡Instagram: / codewithchris
⚡Twitter: / codewithchris
CodeWithChris is dedicated to teaching beginners and non-programmers all about how to make an app. On the site, you'll find a ton of free resources and tutorials to aid you on your journey to learn iOS development. Many people have successfully picked up Swift, Xcode and app building from my course and materials!
Here's just a sample of the success stories my students have sent in:
codewithchris.com/success-sto... swiftui02&
#SwiftUI #UIKit #CodeWithChris
@CodeWithChris 4 жыл бұрын
QOTD ⚡ Before SwiftUI, did you like building your UI using storyboards or programmatically? Let me know! 👇 Kick start your own app with my free 7 Day App Action Plan ➡️ cwc.to/swiftui02-actionplan
@mig12394 4 жыл бұрын
with storyboard
@DucNguyen-xf1yk 4 жыл бұрын
Hi. I have subscribed. May I ask where did you buy the wall posters with the images of different apps, they appear in the background of your videos. I need to display these in my office to get inspiration and follow your video courses. Thanks!
@CodeWithChris 4 жыл бұрын
We created it. It's a compilation of apps created by our students. :) Kat
@ianbennetts9253 4 жыл бұрын
programmatically
@ric7576 3 жыл бұрын
Chris, the last time I tried to build a UI it was with Visual Basic, about 25 years ago :-O
@shino_u 4 жыл бұрын
I like this style giving us an assignment at the end! Thank you so much!
@CodeWithChris 4 жыл бұрын
That's awesome! Thanks for learning with us. :) - Kat
@hakeemdeggs9117 Жыл бұрын
love building with both!
@craigkarenshine7266 4 жыл бұрын
Brilliant ! looking forward to more from you Chris...
@CodeWithChris 4 жыл бұрын
Thanks for your support! Kat
@augustuswilson9228 Жыл бұрын
Incredible. Very straightforward and easy to understand.
@CodeWithChris Жыл бұрын
Hey Augustus! Thank you for watching! :) - Pat
@iShobhakar 4 жыл бұрын
Hey Chris , thanks for such a nice tutorial.
@CodeWithChris 4 жыл бұрын
No worries! Glad you liked it. - Kat
@newbiegeek8407 3 жыл бұрын
these videos are amazing ! I am really looking forward for the swiftUI hub
@CodeWithChris 3 жыл бұрын
Thank you! 🙌 - Kat
@kenmccormack7801 Жыл бұрын
"Zed we say in Canada" you know it Chris well done and thank you
@CodeWithChris Жыл бұрын
Thanks for watching! - Pat
@devhopes 4 жыл бұрын
Awesome video :) . Before SwiftUI, i love Storyboards. I really didn't know how to do it programmatically but probably would have been easier programmatically . I did the Exercise and was able to display 3 rows of 3 evenly spaces with top raw of apples, middle row of lemons and bottom row of donuts with the top, bottom, left and right margins all evenly spaced. I wish i could upload a screenshot to show you :)
@CodeWithChris 4 жыл бұрын
You're doing a great job! You can upload screenshots of it to show to our community here bit.ly/CodeCrewCommunity :) - Kat
@wyattdrechsler1193 3 жыл бұрын
Your videos are the best!
@CodeWithChris 3 жыл бұрын
Well, you're the greatest! Cheers, Wyatt! -Arthur
@Radical9535 Жыл бұрын
UI was way more user-friendly! I know a lot more about networking (security stuff), this is the programming language that seems to be working for me. I am teaching myself a little by little and this is where I was seriously lacking skills but ui just makes it seem less to code. I have tried other languages but it just didn't click. This is what I imagined coding would be like!
@CodeWithChris Жыл бұрын
Thanks for sharing! - Pat
@bodyhanger7137 4 жыл бұрын
Using some Storyboard views Chris, UIKIT is still needed for my contracts. I usually put the UI together programmatically using my snippet library. Can’t wait to switch to SwiftUI, but it still has a lot of maturing to do. Using Flutter as well as Kotlin... Thanks mate...⭐️⭐️⭐️⭐️⭐️
@CodeWithChris 3 жыл бұрын
We;ll soon be releasing SwiftUI tutorials. Thanks for your support! :-) -Arthur
@sebastiangao6889 3 жыл бұрын
Marking UI programmatically can be so cool, I’d love that
@CodeWithChris 3 жыл бұрын
Cheers, thank you for your insight! -Arthur
@PhG1961 4 жыл бұрын
Of course I liked the video ! Btw, I prefer the storyboards approach.
@CodeWithChris 4 жыл бұрын
Thank you!! Kat
@judedavis92 4 жыл бұрын
Hi Chris! If I'm honest, I prefer programmatically creating UIs. It's much less complications. Thanks! Love your Videos!!
@CodeWithChris 4 жыл бұрын
Thank you! 🙌 -Kat
@carlosfernandez6470 4 жыл бұрын
SwiftUI i love it
@CodeWithChris 4 жыл бұрын
Awesome! 🙌 Kat
@wowtheworldchannel 4 жыл бұрын
Man, you're the best.
@CodeWithChris 4 жыл бұрын
Thank you Fahim! -Kat
@wowtheworldchannel 4 жыл бұрын
@@CodeWithChris Most welcome. I have learned UIKit from the very basic from your videos and now learning SwiftUI too. Your teaching style is awesome. Stay safe.
@zakk23v 4 жыл бұрын
Although I'm a beginner, I'm definitely a storyboard guy. Felt accomplished to figure out a way to align lemons
@CodeWithChris 4 жыл бұрын
It's cool that you tried SwiftUI. Great job! - Kat
@user-po6fr8oy8l 4 жыл бұрын
so cool
@CodeWithChris 4 жыл бұрын
Thank you! 🙌 - Kat
@kundanmitra6066 4 жыл бұрын
Used to be using a mix of Storyboard for reference and programmatically for elements. Now totally shifted to programmatic approach.
@CodeWithChris 4 жыл бұрын
Cool! Thanks for watching this! - Kat
@kundanmitra6066 4 жыл бұрын
@@CodeWithChris Thanks to you for the great tutorial tbf.
@GG-hk5iz 4 жыл бұрын
Chris, have you posted the video for the solution for the question you asked gave at the end of this video. I did like this :- struct ContentView: View { var body: some View { VStack(spacing: 20) { Spacer() HStack(spacing:20) { Image("lemon") Image("lemon") Image("lemon") } Spacer() HStack(spacing:20) { Image("lemon") Image("lemon") Image("lemon") } Spacer() HStack(spacing:20) { Image("lemon") Image("lemon") Image("lemon") } Spacer() } } }
@CodeWithChris 4 жыл бұрын
Hello, this code should be good as it will give you the same output as shown, you can also try it out by maybe using for loops or using a function to create each hstack so you can make you code shorter, it also makes for good practice :) you can head on over to codecrew.codewithchris.com if you want to share more your progress - Francis
@WildBillTV 4 жыл бұрын
Hey Chris, thanks for the free courses and information! I am new to SwiftUI and Xcode in general. I am trying to complete this simple exercise but am running into issues. I can't figure out how to make the 3x3 grid. I have the 3 lemons in an HStack, which I then embed into a VStack but it looks nothing like what I am supposed to complete.
@CodeWithChris 4 жыл бұрын
Hello WildBill! Since KZfaq is limited in the help we can provide (like code and screenshots), we create the Code Crew forum to help everybody with code and project issues. Please post your thread in here: bit.ly/CodeCrewCommunity @AdrienVillez
@WildBillTV 4 жыл бұрын
@@CodeWithChris Perfect, I will create an account now. Thanks again for all the tutorials and help!
@bitsurfer0101 3 жыл бұрын
I liked using the storyboard since it has a WYSIWYG feel (What you see is what you get) for the most part.
@CodeWithChris 3 жыл бұрын
Great insight! Thanks for sharing! :-) -Arthur
@glenreidy 4 жыл бұрын
Nailed it! hee heeee!
@CodeWithChris 4 жыл бұрын
Awesome! Thank you for learning with us! - Kat
@kunaldaga7649 3 жыл бұрын
Hey Chris, thanks for the great tutorial! I can't seem to find the solution to the exercise at the end of the video. I'd just like to check my code against yours and see if there's a simpler way to doing what i did
@CodeWithChris 3 жыл бұрын
Sorry, the code is not available for download at this time but we're working on updating the Swift Resource Hub that you can find here codewithchris.com/swiftui/ - Kat
@citywitt3202 4 жыл бұрын
Re your xib vs storyboard question prior to swift UI, neither. Long comment alert but bare with me. I grew up learning VB.NET for windows from age 13. I guess that kinda puts me in the permanently scarred camp but there y'are. I always struggled with visual layouts as I'm partially blind, so writing UI in VB.NET programmatically was always my preference, unlike iOS or Mac OS, this was way less confusing. When I started learning how to write code for iOS and Mac OS X, dragging and dropping elements onto storyboards repeatedly caused me severe eyestrain, and it was almost impossible for me to reliably join up UI elements to actions and outlets. I gave up pretty quickly and sauntered back to making my own apps for windows for a bit, before giving up entirely because Windows. Swift UI changes literally EVERYTHING. I've always been able to see enough to make out interfaces, and while the preview helps me understand whether I've got it right, I can now write a fully functional UI almost with my eyes closed. It's really hard to articulate how giant a difference it is, being able to arrange objects vertically rather than horizontally by changing HStack to VStack, instead of fumbling around with constraints in code or mucking around in interface builder with regular five minute gaps to rest my eyes.
@CodeWithChris 3 жыл бұрын
Thanks for sharing your insights! :-) -Arthur
@hiphop_rave 4 жыл бұрын
Chris has been motiving me to start learning IOS development. But i don't know if i should really go into it ..with all these flutter and others changing the scene.
@CodeWithChris 4 жыл бұрын
I understand but what exactly do you want to achieve or create? What are your end goals? From there, you can find out which path is the best to take. Kat
@anastasiarudenko9887 4 жыл бұрын
Hi! How can I actually autocomplete from folding list of completions with shortcut? If I hit `Enter` nothing happens. Thnx
@CodeWithChris 4 жыл бұрын
Hello, you need to press tab - Francis
@GG-hk5iz 4 жыл бұрын
Brilliant . what is purpose of alignment parameter in VStack
@CodeWithChris 4 жыл бұрын
Hello, alignment is where the ui elements should be positioned, so for vstack, it is usually top, center, or bottom and for hstack it should be left, center, right. i suggest you should try it out and see how it behaves so you can have better understanding of it - Francis
@kenc3025 3 жыл бұрын
Awesome video! Newbie question: Do you have a video explaining how the two (UIKit and SwiftUI) can or cannot be mixed in one app project? E.g., my app done by a pro developer shows it built with UIKit. Would continuing development be weird if switched to SwiftUI, then back again using UIKit, etc.?
@CodeWithChris 3 жыл бұрын
"Hello, yes UIKit is quite different from SwiftUI, yes its possible to combine them but maybe moving forward SwiftUI is the way to go because of the ""cross-platform"" capability that it has - Francis"
@kenc3025 3 жыл бұрын
@@CodeWithChris Thanks! Good to know that I can just insert SwiftUI code into an UIkit app. Previously, I had to pay a (different) developer to rewrite entire app in Swift because it was originally written in Objective-C, so wasn't sure if it's anything like that. Newbie me.
@KrishhKx 4 жыл бұрын
Chris sir please make a video on how to take pictures open camera and send to api please help
@CodeWithChris 4 жыл бұрын
Hello, there are many available resources online for that. This might help github.com/CameraKit/camerakit-ios Kat
@ChadE1020 3 жыл бұрын
storyboard it was how I learned first so that's what I defaulted to. you should also cover the challenge in your next video just in case users can't figure it out....
@CodeWithChris 3 жыл бұрын
Yup, going with the basics is the way to go! Thanks for learning with us! :-) -Arthur
@ChadE1020 3 жыл бұрын
@@CodeWithChris :-)
@tapiwakundishora6195 3 жыл бұрын
Do you have any full coding courses in programmatic UI. I can't find any on udemy and I love your teaching style so I'd more than happy to pay for such a course. Great video as always!
@CodeWithChris 3 жыл бұрын
Hello, check out our subscription program, CWC Plus. :-) -Arthur
@junaidzoraiz9249 4 жыл бұрын
When I use storyboard and sometimes constraints go bad When I use different screens what to do with that
@CodeWithChris 3 жыл бұрын
Hi! Can you kindly head over to our forum community so that our technical support staff can assist you regarding this? codecrew.codewithchris.com :-) Thanks a ton! -Arthur
@astronomers 3 жыл бұрын
Thanks Chris, your videos are really great. Please could you help me: I have a view that has an Image & Bio . I want to lock the bio to the bottom of the screen so that the text of each bio pushes from down to up. I'm not worried about the position of the image as long as the Bio is aligned to the bottom of the screen. I've put both the Image & Bio in a VStack. The Image on top and Bio at the bottom of the VStack My issue is that the Bio contains different amounts of text in them, So some might be 2 paragraphs and some 1. How do I align the stack so that the VStack always starts from the bottom and pushes up. I've trying to use padding but because the Bios is different text, the positioning looks different for each card. Should I even be using a Stack? Please let me know if you can help, greatly appreciated.
@CodeWithChris 3 жыл бұрын
Hello, i think it would benefit you if you dont use a stack at all, it would be best to use a normal multi-line textfield then have the constraints for it at the bottom, then based on that the top will adjust accordingly (so the image is based on the top of the textfield and not on the sides of screen - Francis
@astronomers 3 жыл бұрын
@@CodeWithChris Thanks for getting back to me, I managed to solve the issue, all I needed to do was add height to the frame of the VStack.
@mig12394 4 жыл бұрын
I don't find the resources of this tuto thanks for your answer
@CodeWithChris 4 жыл бұрын
It's in the description. Here: codewithchris.com/swiftui/ Kat
@HtzQ 3 жыл бұрын
First of great video. I need some help opening Button(action: ? Can’t seem to find it. Thanks.
@CodeWithChris 3 жыл бұрын
Hello, have you started the project as SwiftUI and not Storyboard? if you did start in SwiftUI then i suggest checking the documentation for clarifications or basic samples, here is the link to the official documentation developer.apple.com/documentation/swiftui/button you can also browse other functionalities there - Francis
@KrishhKx 4 жыл бұрын
Sir make video on how to take pictures please i needed that
@CodeWithChris 4 жыл бұрын
Hello, there are many available resources online for that. This might help github.com/CameraKit/camerakit-ios Kat
@nihalchaudhary1090 4 жыл бұрын
sir can you suggest me any Documents scanner with OMR sheet reader sdk or plugin please let me know i need to implement in app for iOS
@CodeWithChris 4 жыл бұрын
Hello, I suggest searching around in cocoapods for what you are looking for. if you dont know what or how to install cocoapods you can refer to out article codewithchris.com/cocoapods/ - Francis
@kenturnbull9679 3 жыл бұрын
Storyboards. Which version of Xcode are you using? I am using version 12.2 and see some different actions on the screen; ie...no border to the button, no border to VStack when highlighted in code. Do I need to set some preferences?
@CodeWithChris 3 жыл бұрын
We're slowly updating our content to the latest version of Xcode. Thanks for dropping by! :-) -Arthur
@tridaynee 3 жыл бұрын
we need resourse image of you, lec good job
@CodeWithChris 3 жыл бұрын
Thank you so much for your support! :-) -Arthur
@tridaynee 3 жыл бұрын
@@CodeWithChris We are people from Vietnam but Vietnam has very few ios learners, so we lack people like you.
@rushikadali8234 4 жыл бұрын
Hi, I have lately been wanting to make an app that can connect to an external Bluetooth device such as a Raspberry pi and communicate information. I have already set up the Raspberry pi and need to create an app for it. I already know how to make a professional app and just need to connect a device to it. Can you please direct me to some resources that could help me to connect a device to the app? Thanks! ps. Yes I commented this again but I changed the question
@CodeWithChris 3 жыл бұрын
Hi! Can you kindly head over to our forum community so that our technical support staff can assist you regarding this? codecrew.codewithchris.com :-) Thanks a ton! -Arthur
@cometmace 4 жыл бұрын
I'm a Storyboard guy. It's the way I learned coding for Apple. But I was always annoyed that all the properties of the UI elements were buried in property inspector pages. SwiftUI seems to be a step in the right direction. It will take a lot of relearning. Luckily, my clients won't be able to use it for a year or two.
@CodeWithChris 4 жыл бұрын
That's right, it will take some time before everyone moves over to SwiftUI. Thanks for watching!
@carlospro1204 3 жыл бұрын
Image(name: String) is not working for some reason, can't find it on (Version 12.0.1). Update never mind, got it working hehe x)
@CodeWithChris 3 жыл бұрын
Yay, you're awesome! Thanks for dropping by! :-) -Arthur
@lifutao3446 4 жыл бұрын
helpful video. there is static in the audio by the way
@CodeWithChris 4 жыл бұрын
Thanks for letting us know! -Kat
@srivera8765 4 жыл бұрын
Cannot see the images in the resource hub ( @t ). Could you please be more specific where these are?
@CodeWithChris 4 жыл бұрын
I just added the link to the assets in the description. Thanks for the heads up!
@srivera8765 4 жыл бұрын
@@CodeWithChris Many Thanks Chris and congrats for these new SwiftUI videos! Look forward to see more of them.
@sanjeebghimire1672 2 жыл бұрын
Hello sir .... I am at zero level on swiftUI... From which video should I start? I have watched your swift tutorial for beginners playlist.... Please reply 🙏
@CodeWithChris 2 жыл бұрын
Hello! Let's get started with our 14 Day Challenge: learn.codewithchris.com/courses/start A great step by step way to learn and get started! @AdrienVillez
@sanjeebghimire1672 2 жыл бұрын
@@CodeWithChris thanks sir ❤️ I will comment after finishing 14 days challenge
@ric7576 3 жыл бұрын
Hi, noob question I'm afraid. When typing in the editor in .swift files the IDE automatically auto-suggests ways of completing. Thing is, how do you actually select what pops up? Thanks
@CodeWithChris 3 жыл бұрын
Hello, you usually click on it, or click the Tab bar and have it autocomplete from there - Francis
@ric7576 3 жыл бұрын
@@CodeWithChris Thanks Chris! :-)
@judy8821 4 жыл бұрын
Storyboard but I hated the auto layout
@CodeWithChris 4 жыл бұрын
Nice! Thanks for watching. Kat
@erickramones2167 4 жыл бұрын
swiftUI kind of reminds me of flutter
@CodeWithChris 4 жыл бұрын
Many people think the same but Google's Flutter works with both Android and iOS while SwiftUI is just exclusive to Apple. Kat
@cybersecurityg3088 4 жыл бұрын
I've been using Storyboards and then transitioned to Adobe XD
@CodeWithChris 3 жыл бұрын
Great! Another possible option. :-) -Arthur
@junaidzoraiz9249 4 жыл бұрын
Where is your story board?? How do all that?
@CodeWithChris 4 жыл бұрын
This explains where the storyboard is kzfaq.info/get/bejne/m8dpmaaEva3Mg4k.html Kat
@junaidzoraiz9249 4 жыл бұрын
@@CodeWithChris sir I want to know step by step about api in easy language I am quite new to IOS
@junaidzoraiz9249 4 жыл бұрын
@@CodeWithChris awesome thanks for clip
@arwysyah2400 4 жыл бұрын
Actually ,it is hard to move from react native to native Swift -_-,
@CodeWithChris 4 жыл бұрын
I'm not sure but as far as I know, there's less coding in Swift compared to React so there are people that are saying it's easier. - Kat
@carlospro1204 3 жыл бұрын
Feedback: The initializers you use for a newbie like me are very hard to find and don't show up as quick as on your screen, I assume it quickly shows up in your screen because you use it often where for someone new to Xcode like me does not yet have any initializer handy recommendations like someone like you who often uses them. Also feeling like you went through the initializers a bit to fast with no introduction nor instructions on how to make the most of it, like searching, how to find the right one or the one being used. Not sure if you could come up with a temporary solution for me and perhaps add this Insight in future videos. Overall. Love your channel :)
@CodeWithChris 3 жыл бұрын
Hello, it may also depend on the speed on your mac, if you are using a slightly older one then it might take a while for it to load, sometimes it is also not in "cache" yet, dont worry as these "initializers" often have documentation on how to go through them so its best to check apple documentation when you want to learn something more extra as a side note if you are starting fresh wiith swift it might not be a good idea to go directly to SwiftUI video, i suggest checking out the Swift beginners tutorial first before diving in with SwiftUI kzfaq.info/sun/PLMRqhzcHGw1b89DXHOVA77ozWXWmuBkWX - Francis
@SteveNdende 4 жыл бұрын
Programmatically
@CodeWithChris 4 жыл бұрын
Awesome, thanks for watching! - Kat
@erickramones2167 4 жыл бұрын
storyboards
@CodeWithChris 4 жыл бұрын
Cool! Thanks for watching. - Kat
@warrenscorner Жыл бұрын
I see that this video is three years old now. Is it still relevant today? As a beginner I find it very frustrating to watch a video and my version of Xcode is not doing what the video is showing. How old does a video need to be when I shouldn’t consider watching it?
@AndreasvanHaren 2 жыл бұрын
Why is every swift tutorial on KZfaq for IOS? I want to learn how to create Mac OS apps. Any suggestions?
@CodeWithChris 2 жыл бұрын
Hello, thanks for commenting! Kindly post this question in our CodeCrew forum so that our tech support can assist you. Go here: codecrew.codewithchris.com. Thank you! -Arthur
@ivansavchenco5636 4 жыл бұрын
Oh, I ruined everything... Because of me you have 401 likes instead of nice 400. Damn:)
@CodeWithChris 4 жыл бұрын
Aw man, now it's 404 lol. Thank you. :) - Kat
Paul Hudson
Рет қаралды 125 М.
Karin Prater
Рет қаралды 8 М.