Basic SwiftUI Layout Containers and UI Elements

[@CodeWithChris]

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]

with storyboard

[@DucNguyen-xf1yk]

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]

We created it. It's a compilation of apps created by our students. :) Kat

[@ianbennetts9253]

programmatically

[@ric7576]

Chris, the last time I tried to build a UI it was with Visual Basic, about 25 years ago :-O

[@lemonade2345-j4e]

the best beginner tutorial on swiftui, hands down!

[@shino_u]

I like this style giving us an assignment at the end! Thank you so much!

[@CodeWithChris]

That's awesome! Thanks for learning with us. :) - Kat

[@Revamped1953]

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

[@sebastiangao6889]

Marking UI programmatically can be so cool, I’d love that

[@CodeWithChris]

Cheers, thank you for your insight! -Arthur

[@craigkarenshine7266]

Brilliant ! looking forward to more from you Chris...

[@CodeWithChris]

Thanks for your support! Kat

[@judedavis92]

Hi Chris! If I'm honest, I prefer programmatically creating UIs. It's much less complications. Thanks! Love your Videos!!

[@CodeWithChris]

Thank you! 🙌 -Kat

[@augustuswilson9228]

Incredible. Very straightforward and easy to understand.

[@CodeWithChris]

Hey Augustus! Thank you for watching! :) - Pat

[@newbiegeek8407]

these videos are amazing ! I am really looking forward for the swiftUI hub

[@CodeWithChris]

Thank you! 🙌 - Kat

[@devhopes]

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]

You're doing a great job! You can upload screenshots of it to show to our community here bit.ly/CodeCrewCommunity :) - Kat

[@kenmccormack7801]

"Zed we say in Canada" you know it Chris well done and thank you

[@CodeWithChris]

Thanks for watching! - Pat

[@iShobhakar]

Hey Chris , thanks for such a nice tutorial.

[@CodeWithChris]

No worries! Glad you liked it. - Kat

[@PhG1961]

Of course I liked the video ! Btw, I prefer the storyboards approach.

[@CodeWithChris]

Thank you!! Kat

[@bodyhanger7137]

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]

We;ll soon be releasing SwiftUI tutorials. Thanks for your support! :-) -Arthur

[@GG-hk5iz]

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]

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

[@astronomers]

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]

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]

​@@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.

[@wyattdrechsler1193]

Your videos are the best!

[@CodeWithChris]

Well, you're the greatest! Cheers, Wyatt! -Arthur

[@bitsurfer0101]

I liked using the storyboard since it has a WYSIWYG feel (What you see is what you get) for the most part.

[@CodeWithChris]

Great insight! Thanks for sharing! :-) -Arthur

[@hakeemdeggs9117]

love building with both!

[@kundanmitra6066]

Used to be using a mix of Storyboard for reference and programmatically for elements. Now totally shifted to programmatic approach.

[@CodeWithChris]

Cool! Thanks for watching this! - Kat

[@kundanmitra6066]

@@CodeWithChris Thanks to you for the great tutorial tbf.

[@wowtheworldchannel]

Man, you're the best.

[@CodeWithChris]

Thank you Fahim! -Kat

[@wowtheworldchannel]

@@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]

Although I'm a beginner, I'm definitely a storyboard guy. Felt accomplished to figure out a way to align lemons

[@CodeWithChris]

It's cool that you tried SwiftUI. Great job! - Kat

[@kenturnbull9679]

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]

We're slowly updating our content to the latest version of Xcode. Thanks for dropping by! :-) -Arthur

[@citywitt3202]

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]

Thanks for sharing your insights! :-) -Arthur

[@nihalchaudhary1090]

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]

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

[@WildBillTV]

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]

Hello WildBill! Since KZbin 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]

@@CodeWithChris Perfect, I will create an account now. Thanks again for all the tutorials and help!

[@kunaldaga7649]

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]

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

[@HtzQ]

First of great video. I need some help opening Button(action: ? Can’t seem to find it. Thanks.

[@CodeWithChris]

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

[@ChadE1020]

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]

Yup, going with the basics is the way to go! Thanks for learning with us! :-) -Arthur

[@ChadE1020]

@@CodeWithChris :-)

[@ric7576]

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]

Hello, you usually click on it, or click the Tab bar and have it autocomplete from there - Francis

[@ric7576]

@@CodeWithChris Thanks Chris! :-)

[@GG-hk5iz]

Brilliant . what is purpose of alignment parameter in VStack

[@CodeWithChris]

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

[@anastasiarudenko9887]

Hi! How can I actually autocomplete from folding list of completions with shortcut? If I hit `Enter` nothing happens. Thnx

[@CodeWithChris]

Hello, you need to press tab - Francis

[@carlosfernandez6470]

SwiftUI i love it

[@CodeWithChris]

Awesome! 🙌 Kat

[@kenc3025]

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]

"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]

@@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.

[@is_lyfstyle]

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]

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

[@mig12394]

I don't find the resources of this tuto thanks for your answer

[@CodeWithChris]

It's in the description. Here: codewithchris.com/swiftui/ Kat

[@sanjeebghimire1672]

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]

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]

@@CodeWithChris thanks sir ❤️ I will comment after finishing 14 days challenge

[@carlospro1204]

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]

Yay, you're awesome! Thanks for dropping by! :-) -Arthur

[@KrishhKx]

Chris sir please make a video on how to take pictures open camera and send to api please help

[@CodeWithChris]

Hello, there are many available resources online for that. This might help github.com/CameraKit/camerakit-ios Kat

[@まめ-p3w]

so cool

[@CodeWithChris]

Thank you! 🙌 - Kat

[@junaidzoraiz9249]

When I use storyboard and sometimes constraints go bad When I use different screens what to do with that

[@CodeWithChris]

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

[@srivera8765]

Cannot see the images in the resource hub ( @t ). Could you please be more specific where these are?

[@CodeWithChris]

I just added the link to the assets in the description. Thanks for the heads up!

[@srivera8765]

@@CodeWithChris Many Thanks Chris and congrats for these new SwiftUI videos! Look forward to see more of them.

[@junaidzoraiz9249]

Where is your story board?? How do all that?

[@CodeWithChris]

This explains where the storyboard is kzbin.info/www/bejne/m5Kcl3aJjaybibc Kat

[@junaidzoraiz9249]

@@CodeWithChris sir I want to know step by step about api in easy language I am quite new to IOS

[@junaidzoraiz9249]

@@CodeWithChris awesome thanks for clip

[@glenreidy]

Nailed it! hee heeee!

[@CodeWithChris]

Awesome! Thank you for learning with us! - Kat

[@tridaynee]

we need resourse image of you, lec good job

[@CodeWithChris]

Thank you so much for your support! :-) -Arthur

[@tridaynee]

@@CodeWithChris We are people from Vietnam but Vietnam has very few ios learners, so we lack people like you.

[@tapiwakundishora6195]

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]

Hello, check out our subscription program, CWC Plus. :-) -Arthur

[@rushikadali8234]

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]

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

[@KrishhKx]

Sir make video on how to take pictures please i needed that

[@CodeWithChris]

Hello, there are many available resources online for that. This might help github.com/CameraKit/camerakit-ios Kat

[@cometmace]

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]

That's right, it will take some time before everyone moves over to SwiftUI. Thanks for watching!

[@judy8821]

Storyboard but I hated the auto layout

[@CodeWithChris]

Nice! Thanks for watching. Kat

[@lifutao3446]

helpful video. there is static in the audio by the way

[@CodeWithChris]

Thanks for letting us know! -Kat

[@arwysyah2400]

Actually ,it is hard to move from react native to native Swift -_-,

[@CodeWithChris]

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

[@AndreasvanHaren]

Why is every swift tutorial on KZbin for IOS? I want to learn how to create Mac OS apps. Any suggestions?

[@CodeWithChris]

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

[@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?

[@carlospro1204]

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]

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 kzbin.info/aero/PLMRqhzcHGw1b89DXHOVA77ozWXWmuBkWX - Francis

[@erickramones2167]

swiftUI kind of reminds me of flutter

[@CodeWithChris]

Many people think the same but Google's Flutter works with both Android and iOS while SwiftUI is just exclusive to Apple. Kat

[@erickramones2167]

storyboards

[@CodeWithChris]

Cool! Thanks for watching. - Kat

[@cybersecurityg3088]

I've been using Storyboards and then transitioned to Adobe XD

[@CodeWithChris]

Great! Another possible option. :-) -Arthur

[@SteveNdende]

Programmatically

[@CodeWithChris]

Awesome, thanks for watching! - Kat

[@ivansavchenco5636]

Oh, I ruined everything... Because of me you have 401 likes instead of nice 400. Damn:)

[@CodeWithChris]

Aw man, now it's 404 lol. Thank you. :) - Kat