Basic SwiftUI Layout Containers and UI Elements

Поделиться
HTML-код
  • Опубликовано: 6 ноя 2024

Комментарии • 133

  • @CodeWithChris
    @CodeWithChris  4 года назад +2

    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
      @mig12394 4 года назад +1

      with storyboard

    • @DucNguyen-xf1yk
      @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
      @CodeWithChris  4 года назад

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

    • @ianbennetts9253
      @ianbennetts9253 4 года назад

      programmatically

    • @ric7576
      @ric7576 4 года назад

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

  • @shino_u
    @shino_u 4 года назад +7

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

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

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

  • @Radical9535
    @Radical9535 Год назад +1

    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!

  • @sebastiangao6889
    @sebastiangao6889 3 года назад

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

    • @CodeWithChris
      @CodeWithChris  3 года назад

      Cheers, thank you for your insight! -Arthur

  • @augustuswilson9228
    @augustuswilson9228 2 года назад

    Incredible. Very straightforward and easy to understand.

    • @CodeWithChris
      @CodeWithChris  2 года назад

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

  • @judedavis92
    @judedavis92 4 года назад +1

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

  • @craigkarenshine7266
    @craigkarenshine7266 4 года назад +3

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

  • @newbiegeek8407
    @newbiegeek8407 4 года назад +1

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

  • @devhopes
    @devhopes 4 года назад +1

    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
      @CodeWithChris  4 года назад +1

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

  • @hakeemdeggs9117
    @hakeemdeggs9117 Год назад

    love building with both!

  • @kenmccormack7801
    @kenmccormack7801 Год назад

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

  • @iShobhakar
    @iShobhakar 4 года назад +1

    Hey Chris , thanks for such a nice tutorial.

  • @GG-hk5iz
    @GG-hk5iz 4 года назад +1

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

  • @bodyhanger7137
    @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
      @CodeWithChris  4 года назад

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

  • @PhG1961
    @PhG1961 4 года назад +1

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

  • @astronomers
    @astronomers 4 года назад +1

    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
      @CodeWithChris  4 года назад

      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
      @astronomers 4 года назад

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

  • @sanjeebghimire1672
    @sanjeebghimire1672 2 года назад +1

    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
      @CodeWithChris  2 года назад +1

      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
      @sanjeebghimire1672 2 года назад

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

  • @bitsurfer0101
    @bitsurfer0101 4 года назад

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

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

  • @zakk23v
    @zakk23v 4 года назад +1

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

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

  • @WildBillTV
    @WildBillTV 4 года назад +1

    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
      @CodeWithChris  4 года назад +1

      Hello WildBill! Since RUclips 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
      @WildBillTV 4 года назад

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

  • @kenturnbull9679
    @kenturnbull9679 4 года назад

    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
      @CodeWithChris  4 года назад

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

  • @wyattdrechsler1193
    @wyattdrechsler1193 3 года назад

    Your videos are the best!

    • @CodeWithChris
      @CodeWithChris  3 года назад

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

  • @wowtheworldchannel
    @wowtheworldchannel 4 года назад +1

    Man, you're the best.

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Thank you Fahim!
      -Kat

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

  • @kunaldaga7649
    @kunaldaga7649 4 года назад +1

    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
      @CodeWithChris  4 года назад

      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

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

  • @citywitt3202
    @citywitt3202 4 года назад +1

    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
      @CodeWithChris  4 года назад

      Thanks for sharing your insights! :-) -Arthur

  • @kundanmitra6066
    @kundanmitra6066 4 года назад +1

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

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      Cool! Thanks for watching this!
      - Kat

    • @kundanmitra6066
      @kundanmitra6066 4 года назад

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

  • @carlosfernandez6470
    @carlosfernandez6470 4 года назад +1

    SwiftUI i love it

  • @tapiwakundishora6195
    @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
      @CodeWithChris  3 года назад

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

  • @hiphop_rave
    @hiphop_rave 4 года назад +2

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

  • @ChadE1020
    @ChadE1020 4 года назад

    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
      @CodeWithChris  4 года назад

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

    • @ChadE1020
      @ChadE1020 4 года назад

      @@CodeWithChris :-)

  • @HtzQ
    @HtzQ 4 года назад

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

      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

  • @nihalchaudhary1090
    @nihalchaudhary1090 4 года назад +1

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

  • @GG-hk5iz
    @GG-hk5iz 4 года назад

    Brilliant . what is purpose of alignment parameter in VStack

    • @CodeWithChris
      @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

  • @まめ-p3w
    @まめ-p3w 4 года назад +1

    so cool

  • @anastasiarudenko9887
    @anastasiarudenko9887 4 года назад +1

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Hello, you need to press tab
      - Francis

  • @glenreidy
    @glenreidy 4 года назад +1

    Nailed it! hee heeee!

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Awesome! Thank you for learning with us!
      - Kat

  • @ric7576
    @ric7576 4 года назад

    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
      @CodeWithChris  4 года назад

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

    • @ric7576
      @ric7576 3 года назад

      @@CodeWithChris Thanks Chris! :-)

  • @carlospro1204
    @carlospro1204 4 года назад

    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
      @CodeWithChris  4 года назад

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

  • @mig12394
    @mig12394 4 года назад +1

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

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

  • @KrishhKx
    @KrishhKx 4 года назад +1

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

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

  • @cometmace
    @cometmace 4 года назад +1

    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
      @CodeWithChris  4 года назад

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

  • @junaidzoraiz9249
    @junaidzoraiz9249 4 года назад +1

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

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

      This explains where the storyboard is ruclips.net/video/ea9fCSXGhSU/видео.html
      Kat

    • @junaidzoraiz9249
      @junaidzoraiz9249 4 года назад

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

    • @junaidzoraiz9249
      @junaidzoraiz9249 4 года назад

      @@CodeWithChris awesome thanks for clip

  • @KrishhKx
    @KrishhKx 4 года назад +1

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

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

  • @tridaynee
    @tridaynee 4 года назад

    we need resourse image of you, lec good job

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

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

    • @tridaynee
      @tridaynee 4 года назад

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

  • @lifutao3446
    @lifutao3446 4 года назад +1

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

  • @srivera8765
    @srivera8765 4 года назад

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

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

    • @srivera8765
      @srivera8765 4 года назад

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

  • @rushikadali8234
    @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
      @CodeWithChris  4 года назад

      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

  • @carlospro1204
    @carlospro1204 4 года назад

    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
      @CodeWithChris  4 года назад +1

      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
      ruclips.net/p/PLMRqhzcHGw1b89DXHOVA77ozWXWmuBkWX
      - Francis

  • @junaidzoraiz9249
    @junaidzoraiz9249 4 года назад

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

      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

  • @AndreasvanHaren
    @AndreasvanHaren 2 года назад

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

    • @CodeWithChris
      @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

  • @judy8821
    @judy8821 4 года назад +2

    Storyboard but I hated the auto layout

  • @warrenscorner
    @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?

  • @erickramones2167
    @erickramones2167 4 года назад +1

    swiftUI kind of reminds me of flutter

    • @CodeWithChris
      @CodeWithChris  4 года назад +1

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

  • @arwysyah2400
    @arwysyah2400 4 года назад +1

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

    • @CodeWithChris
      @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

  • @SteveNdende
    @SteveNdende 4 года назад +1

    Programmatically

  • @cybersecurityg3088
    @cybersecurityg3088 4 года назад

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

      Great! Another possible option. :-) -Arthur

  • @erickramones2167
    @erickramones2167 4 года назад +1

    storyboards

  • @ivansavchenco5636
    @ivansavchenco5636 4 года назад

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

    • @CodeWithChris
      @CodeWithChris  4 года назад

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