Beginner Auto Layout & Constraints - Swift 4.2

Beginner Auto Layout & Constraints - Swift 4.2 - Xcode 10

Рет қаралды 81,210

5 жыл бұрын

*SPONSOR*
Interested in a dev bootcamp? Check out Dev Mountain
devmountain.com/?S...
Herman Kayy - Dev Mountain Experience Interview:
• How to get your first ...
In this beginner tutorial we walk through the basics on auto layout constraints in Xcode and Swift. We'll build a basic login screen while doing the background constraints programmatically, and the rest of the elements via storyboard (Interface Builder). This tutorial was done in Swift 4.2 and Xcode 10.
Source Code (Xcode 10, Swift 4.2):
www.dropbox.com/sh/k00cpu97r9...
Beginner Programatic UI Video:
• Video
Skeletal Storyboard Video:
• Xcode 10 - Interface B...
If you like my teaching style, I've released my first iOS dev course which is all about the take-home project job interview for iOS developers.
Course Info - seanallen.teachable.com/
If you want more... Check out my podcast, iOS Dev Discussions:
itunes.apple.com/us/podcast/i...
Book and learning recommendations that help out the channel if you decide to purchase (Affiliate Links):
Paul Hudson's Hacking With Swift:
gumroad.com/a/762098803
Learn Advanced Swift Here:
gumroad.com/a/656585843
Links to my Developer & KZfaq Setup
www.amazon.com/shop/seanallen
Personal Links:
Twitter:
/ seanallen_dev
Instagram:
@seanallen_dev
Website:
seanallen.co

Пікірлер: 288

@seanallen 4 жыл бұрын

🚀 iOS Dev Launchpad - Swift basics, build apps, programmatic ui, general programming knowledge, and more - seanallen.teachable.com/p/ios-dev-launchpad

@3909630 5 жыл бұрын

Yes goddamn it, finally a video on those damn auto layout constraints.

@seanallen 5 жыл бұрын

Haha, happy to deliver. 👍

@osmanmusse6223 5 жыл бұрын

@@seanallen yeah cool video keep this up sean

@manivelgopi. 4 жыл бұрын

@@seanallen thank you for the videoooo

@leonveith3920 5 жыл бұрын

Hey Sean, great work covering the basics while remaining calm and still being fast enough to follow your work. Keep it up man!

@hoxorious 5 жыл бұрын

Finally the tutorial that I was really waiting for. Thanks Sean ❤❤❤❤❤

@seanallen 5 жыл бұрын

Happy to help!

@Alex-dy2eb 5 жыл бұрын

I had been struggling with constraints ever since I started IOS development and halfway through your video it all just clicked for me. Thanks alot!

@seanallen 5 жыл бұрын

That "click" moment is always an awesome feeling! Happy to help!

@nithinsamuelabraham2760 5 жыл бұрын

This video helped me a ton in designing a page with which I was struggling for hours (mainly cause of my lack of fundamental knowledge about constraints). Thank you for this.

@seanallen 5 жыл бұрын

Happy to help, Nithin!

@junebuttrick2027 5 жыл бұрын

Thanks a bunch finally someone that actually makes beginner videos that a beginner can actually understand

@seanallen 5 жыл бұрын

Glad you enjoyed the video and my teaching style, June 😀

@harimorjaria6851 5 жыл бұрын

Your videos are great - informative and entertaining to hold attention, great work!

@seanallen 5 жыл бұрын

Thanks for the kind words, Hari! Glad you like the channel 👍

@macasasa2009 5 жыл бұрын

Very useful video, like always!! Great job!!! 👍

@RicardoDiaz-lw9qp 10 ай бұрын

Sick video brotha, you're really good at explaining. Clear and concise!

@seanallen 10 ай бұрын

Thanks! Glad you enjoyed it.

@ZeeKhan-xx7tl 3 ай бұрын

couln't teach better. Love how you go in the details and explain the logic and reasoning behind every step. Many thanks for your content.

@ecwb 4 жыл бұрын

Excellent beginner run through of constraints perfect thanks Sean!

@seanallen 4 жыл бұрын

Thanks Steve. Glad you liked it!

@chippytv9852 4 жыл бұрын

Your explanation and guidance is extremely helpful. Thank you Sean!

@seanallen 4 жыл бұрын

Glad it was helpful!

@charlesb689 5 жыл бұрын

You're really good at explaining your code and what you do!

@seanallen 5 жыл бұрын

Thanks Charles, I appreciate that!

@MpomartMedia 5 жыл бұрын

Hey Sean, thank you very much for man for an outstandingly good tutorial on a very critical subject matter! I am already waiting for you in the next episode! Keep up the good work. Henry

@seanallen 5 жыл бұрын

Thanks Henry!

@MpomartMedia 5 жыл бұрын

@@seanallen You are welcome Sean!

@sovietman94 4 жыл бұрын

Thanks for detailed review of several topics in one video!!!

@seanallen 4 жыл бұрын

Glad it was helpful, Alexey!

@davidhwasserman 5 жыл бұрын

Sean, Great tutorial. I've watched a few others (I paid for) and this one is way better. You explain everything very clearly. Would love to see a more advanced tutorial from you on this subject.

@seanallen 5 жыл бұрын

Thanks for the kind words, David 😀

@joestasebolela3436 5 жыл бұрын

Thank you a bazillion times Sean. Now i understand how to group and manipulate constraints. - Joesta

@seanallen 5 жыл бұрын

Happy to help!

@GauravKumar-xr3wr 5 жыл бұрын

nice work man, your videos are really helping me. Keep the good work going

@seanallen 5 жыл бұрын

Happy it's helpful, Gaurav!

@idevicecentral 4 жыл бұрын

Best video explaining these! Thank you.

@ITProjectManagerMan 5 жыл бұрын

Love your video’s, learn so much in so little time!

@seanallen 5 жыл бұрын

Happy to hear that Jeff! Glad you like them 😀

@keplersiguineau Жыл бұрын

Thank you for creating this video!

@juwuanturner-howard2703 5 жыл бұрын

Thank you a ton. Before this, it looks like something came through and unapologetically TP'ed my storyboard with constraints.

@seanallen 5 жыл бұрын

Hahaha, hopefully now your constraints look a lot cleaner.

@csmaisuriya91 5 жыл бұрын

Good one Sean. Expecting more useful and informative video's on the autolayout as-well as on the animations in the future. Love from the India 😊

@seanallen 5 жыл бұрын

Thanks Chintan 👍. I've got a looooooooong list of videos ideas to get to. I'm sure I'll revisit the topic soon

@Monarch_943 4 жыл бұрын

Very beginner friendly and well explained. You have my thanks and my sub!

@seanallen 4 жыл бұрын

Glad you enjoyed it, Naalein!

@catvo5377 4 жыл бұрын

Thanks mate. This video is really help me a lot.

@seanallen 4 жыл бұрын

Glad it helped, Cat!

@acikgozemre 5 жыл бұрын

That is a great tutorial.Thanks!

@techguy0711 5 жыл бұрын

I am visually impaired iOS programmer and found your channel recently. Thank you for describing everything during the video. Very hard to find good tutorials when the video creator does not describe anything.

@seanallen 5 жыл бұрын

Happy to hear my explanations were helpful, Kristhian!

@muhammadzafransultani5452 Жыл бұрын

I am so glad tou seen this video tu background image ..... Very helpful video

@darshansk139 5 жыл бұрын

Really good video. Thanks a lot!

@fendlorvez 5 жыл бұрын

I always been struggled with the iPhone SE dimensions. It's a really pain in the ass hahaha. I really like the video. Well explained and very straightforward. Actually, this gives me an a idea for fixing an image view that I was setting wrong on a project. So thank you for sharing your knowledge Sean 🙌

@seanallen 5 жыл бұрын

Happy to help Felipe!

@dhanrajchavan6548 5 жыл бұрын

Great Video On Constraints. You have cleared my doubts

@seanallen 5 жыл бұрын

Happy it helped!

@MuhammadAli-zv5vz 5 жыл бұрын

Great.Please a make video on app rejection .how we reply to apple about specific bug and updation process .This is very useful for the junior developers.

@mediaula491 5 жыл бұрын

Like always great video Sean😉

@seanallen 5 жыл бұрын

Thanks! I appreciate that.

@dorukhansergin9831 4 жыл бұрын

Extremely helpful. 4 constraints rule was something I would never have heard of as a someone who just needs to know this for once since it's not my job to dev iOS apps every day.

@seanallen 4 жыл бұрын

Yeah, that rule helped me out a ton when I was just starting. Glad you found it helpful!

@mariaivanova491 5 жыл бұрын

Thank you for the useful video!

@sublajz8432 5 жыл бұрын

Great video, learned so much :) seems to be easy to use auto layout in storyboard.

@seanallen 5 жыл бұрын

Thanks. Glad you enjoyed it!

@abdallaelsaman3567 5 жыл бұрын

great video i love it hope to make an advanced one

@NazAyala 5 жыл бұрын

Loved the view. For for me it was the right amount and it had great hooks for added learning. One thing that annoyed me on my project was that my background image aspect ratio was weird so when it previewed it looked off. I found that if I added `backgroundImageView.contentMode = UIView.ContentMode.scaleAspectFill` to the setBackground method it took care of that. Thank you!

@seanallen 5 жыл бұрын

Glad you found the video helpful!

@andreyafonin8182 5 жыл бұрын

Great video tutorial many thanks

@seanallen 5 жыл бұрын

Happy to help, Drei!

@taycarr_ 4 жыл бұрын

This helped me so much. Thank you

@seanallen 4 жыл бұрын

Happy to help, Taylor.

@mikkelrosario7880 5 жыл бұрын

this helped me alot, cheers mate!

@seanallen 5 жыл бұрын

Happy to hear that, Miguel!

@WatchThisAndSmile 5 жыл бұрын

Good job, my man!

@seanallen 5 жыл бұрын

Thanks! Glad you liked it 👍

@makf7363 5 жыл бұрын

Great Video Man. Huge Help!!!!

@seanallen 5 жыл бұрын

Happy to help, Makan!

@jihedbouchnak Жыл бұрын

wonderful tutorial hope you made us more video but i will love to see it compatible on landscape mode the easiest way

@mentifresh 5 жыл бұрын

Great video Sean! I would love to see an advanced one :)

@seanallen 5 жыл бұрын

I'm gonna see how this video performs and what kind of feedback I get, so we'll see!

@mentifresh 5 жыл бұрын

Fair enough, I will cross my fingers for it 😜

@adigazgurt 4 жыл бұрын

Hey! Great video, I think you covered everything in a very nice way.... At least for my project, I got everything I need :D

@seanallen 4 жыл бұрын

Happy to help!

@MohammadImranimufun 5 жыл бұрын

Awesome ❤️

@lorinsherry9774 6 ай бұрын

Amazing tutorial thank you for that! did you made the complex ui constraints explanation video also?

@glennadams7047 5 жыл бұрын

Good into Sean!

@seanallen 5 жыл бұрын

Glad you liked in, Glenn 😀

@gopalkrishna9445 5 жыл бұрын

very Useful video.. waiting for next video

@seanallen 5 жыл бұрын

Glad you liked it!

@SwiftySanders 5 жыл бұрын

Thanks Sean! Your videos and story are inspiring to me.

@seanallen 5 жыл бұрын

Happy to hear that Christopher! I hope you’re finding the channel helpful.

@SwiftySanders 5 жыл бұрын

Sean Allen I certainly am. I suffer from heavy imposter syndrome. I want to learn IB but seeing the code is easier for me right now for some reason. So I really appreciate you showing both IB and Programmatic approaches. I am a frontend engineer for work.... I have always always always wanted to be an iOS engineer and an opportunity recently presented itself.

@seanallen 5 жыл бұрын

Nice! Feel free to reach out with questions of you have them. I’m always happy to help people get started in iOS!

@SwiftySanders 5 жыл бұрын

Sean Allen am curious about the ways people typically handle their api data code in terms of app structure. Have you done any videos or seen any articles on this or do you have a viewpoint on this?

@seanallen 5 жыл бұрын

I have not done any videos on that yet as it's a more complex topic and a time consuming video. However, I'm going full time content creation after July 1, so I'll be pumping out more complex videos.

@julioflores1849 9 ай бұрын

What a video!

@hbsvidu 5 жыл бұрын

Thanks for share your knowledge.

@seanallen 5 жыл бұрын

Happy to help 😀

@rgenericson5361 5 жыл бұрын

Hello, any idea how to add/change a device type not listed in layout preview? i.e. how do you add an iPhone 7 etc. to the layout list?

@jorgemunoz7130 8 ай бұрын

Thanks for your education man!

@seanallen 8 ай бұрын

No worries!

@cessnagreg 4 жыл бұрын

This is great! What if you wanted a view (or a label or button, etc.) that occupies the top half of the screen when in portrait but the left half in landscape? Using storyboard? Programmatically?

@iteach-tech6531 5 жыл бұрын

Very Usefulll.

@nileshjdarji 5 жыл бұрын

You mentioned that you can adjust the UI based on screen dimension. What is the best way in your opinion to read screen dimension when the app loads up?

@anandsunku 3 жыл бұрын

xcode storyboard suddenly pushes the control backwards and the options for bringing it in front is disabled. (Editor -> arrange -> Send to front .. is disabled ) .. how to enable or how to move the control to front in z order im using XCode Version 11.6 (11E708)

@saadshahid4802 5 жыл бұрын

Thank you !!

@stillwrinkled 5 жыл бұрын

my (yours) swift code can't seem to locate the background image resulting in white background. how do i sort out path etc.?

@haythem33 4 жыл бұрын

good job its was very helpfull thks

@seanallen 4 жыл бұрын

Happy to help!

@LemonShark1542 4 жыл бұрын

can I recenter my background image? I'm still a beginner so I dont know mostly in xcode

@WattsnabbAB 4 ай бұрын

Hi. Thanks for you video content. Loving you way of showing swift. Really good job. Seams like they remover autoshrink. I noterad that when do iPhone 15max and the iPhone 8 i camt really make text look good becuse it to big screendiffrence. Do you know if thers a way to adapt text size based on the screen? So it look good even on small sxreens?

@ahyes5842 4 жыл бұрын

This was exactly what I needed. Can you give examples about how to make an app look good going from portrait to landscape?

@perrygupta 5 жыл бұрын

Hi Sean thanks for the tutorial I loved it, I have a question, I have 2 buttons i wanna split screen half and half, side by side between them how to achieve that?

@ABC-xc9il 5 жыл бұрын

excuse me, can you help me, i'm having a problem about error domain 9806 and 9807 requires a certificate of trút.Thank you

@kellenrayoungx 9 ай бұрын

Any idea why I'm not able to drag and drop buttons or text fields etc onto my screen?

@bigmtnstudio 5 жыл бұрын

Ha ha ha, "Tie Fighter"! I love it.

@seanallen 5 жыл бұрын

Once you see it, you can't unsee it.

@30guarino 5 жыл бұрын

Two Great instructors....you guys should do a collaboration video 💡

@NPCTE23 5 жыл бұрын

@@30guarino for sure!

@JasonMitchellAZ 5 жыл бұрын

I don't remember if Sean was the first person I heard say that (probably was, though), but that's the only way I think of the constraints editor now 😂

@fguchelaar 5 жыл бұрын

Hey Sean, great content. I have a remark regarding the starter-project. Maybe not 'beginner'-grade perse, but useful nonetheless. • In line #34 in SATextField you can use the ‘nil-coalescing’ operator instead of the ternary, resulting in slightly more elegant code: let placeholder = self.placeholder ?? "" • And you can have your custom views also render in Interface Builder, if you add @Designable above the class definition and add a function like: override func prepareForInterfaceBuilder() { super.prepareForInterfaceBuilder() setUpField() } Also maybe not new for you, but if someone else profits: 👍 Great stuff! Keep it up.

@seanallen 5 жыл бұрын

Yup, good info Frank. I'm actually not a fan of @IBDesignable. In my experience it's made storyboards slower and more clunky.

@aqibj76 5 жыл бұрын

Hey, you talked about moving keyboard when we tap on text field. Do you have any video related to that , how to move screen up!!

@joshuapongasi6646 5 жыл бұрын

Thanks Man!

@seanallen 5 жыл бұрын

Happy to help!

@tbg6nb 5 жыл бұрын

Is there a construct in Swift which could be used to avoid redundancy like the one about 8:30 ? For example in VBA you would write With backgroundImageview .topAnchor (...) .bottomAnchor(...) (...) EndWith

@reksmeyok1957 5 жыл бұрын

Thank you.

@kevinbrown7672 4 жыл бұрын

Thank you!

@seanallen 4 жыл бұрын

Happy to help!

@cularu1 5 жыл бұрын

Is there a way to show the ui elements in storyboard with the custom styling defined in code?

@danielneykov7641 5 жыл бұрын

Great video, keep up the good work! Any plans to make video about moving bottom section when keyboard is shown?

@seanallen 5 жыл бұрын

Thanks Daniel. I've thought about it, but there are so many different ways to do it... Need to think about what approach I want to teach. And for that I'd need to do some research.

@ChaitanyaSoni96 4 жыл бұрын

Nice video 👍. One question tho, why do you not use multipliers for width/height and aspect ratios?

@SalesforceMiind 5 жыл бұрын

nicely explained , please make a video on stack view.

@seanallen 5 жыл бұрын

Thanks Sachin. I have that on the list!

@tialorenna6603 4 жыл бұрын

I need a video that shows me how to set a background before I can learn to set constraints programatically. How did you do the beginning first codes

@unusynth5801 4 жыл бұрын

Did you make a video about fixing issue when keyboard covering content? I really need this :-)

@mahmoudamin8534 5 жыл бұрын

there is a problem in sabutton and text field .swift files . i need those files can you give them to me

@roshanthapa25 4 жыл бұрын

I just can't thank you enough

@seanallen 4 жыл бұрын

Glad you enjoyed it!

@rakvintech4367 4 жыл бұрын

can i get a full tutrial on auto layout in storyboard having UIView, UIImageView, UITableView,UIButton all are in the same screen ....?????

@thevitruvianman9781 4 жыл бұрын

Okay, but how do I have a background Image that doesn't look strecthed?

@amansinha7865 5 жыл бұрын

Sean please create a video on Autolayout Priority and Multipliers in details and also some hint on AutoResizing.

@amitjoshi5798 5 жыл бұрын

Thanks buddy

@seanallen 5 жыл бұрын

Happy to help, Amit!

@mohammedmohsen4789 4 жыл бұрын

Can u make a little complex one .. to do app ui modern .. how does it sound?.

@iosteam1657 5 жыл бұрын

which OS x are u using??? i want that dark theme in my xcode 10

@seanallen 5 жыл бұрын

macOS Mojave. That has dark mode.

@ZeeKhan-xx7tl 3 ай бұрын

I have a question. Why did you use the align constraints for the logo first, why not just use height, weight, and left and right constraints ? like for the other views you did.

@SandeepYadav-mk1qx 5 жыл бұрын

keyboard covers the textfield... not able to scroll as well.. pls helppp

@optimumformfitness3809 5 жыл бұрын

Does anyone here know the shortcut keys to view the blue alignment lines in Storyboards?

@mikestaheli1514 4 жыл бұрын

Even though you talk really fast, its very detailed and easy to understand.

@seanallen 4 жыл бұрын

Glad you liked it, Mike. I'm constantly trying to improve my speaking speed on camera. It's a work in progress 😀

@gofudgeyourselves9024 5 жыл бұрын

can u have a guest on your podcast every now and then or at least make it hour long, love listening to u guys

@seanallen 5 жыл бұрын

I think we're going to stick with the 30 minute format for now. But who knows in the future.

@PankajGupta-kp8wm 4 жыл бұрын

Thank You.. 🙏

@dhairyaupadhyaya4046 3 жыл бұрын

Will this work for any iphone model

@brandtarmls3303 5 жыл бұрын

UIColor.tropicBlue ? Do you use colors in Asset catalog? or a UIColor extension file?

@seanallen 5 жыл бұрын

Usually I have a struct in a constants file. But there are many ways to do that.

@serinahayds3257 5 жыл бұрын

Sean, I was wornding if you could show how yo downloade the file on Xcode. I really don't know ... many files ... don't know how to.

@vjsanghavi 5 жыл бұрын

Hey Sean, It was really nicely explained. But the main thing here is the warnings which you can clearly see in the storyboard view hierarchy and that was the reason I was watching your video but you haven't shown what are the warnings and how to fix them.