Xcode 12 Storyboard Tutorial. Build a Login Screen using Storyboard and Stackviews
Vložit
- čas přidán 13. 10. 2020
- In this Tutorial we are going to learn how to build a User Interface for an iOS app using Storyboards. Storyboards are an easy way to build a beautiful and responsive UI for iOS, iPadOS, TvOS and WatchOS applications.
Download the project and assets:
cdn.devscorch.com/file/devsco...
In this tutorial we will cover the following parts:
- Use storyboards
- UIImage View
- UILabel
- UITextFields
- UIButtons
- Constraints
- StackViews
- Horizontal and Vertical alignment
- Custom Textfields and Buttons using UIKit
- Testing on different size screens
Follow us on Social media and stay tuned for more updates.
/ devscorch
/ devscorch
/ devscorch
And join us on Discord when you want to join our new Community and talk with the developers.
/ discord
Don't want to watch on CZcams? Our tutorials are also stored on our own blazing fast CDN and watchable on our website.
devscorch.com
URL to the assets
cdn.devscorch.com/file/devscorch-public/assets/storyboard-tutorial.zip
Please keep the Xcode 12 tutorials coming, this was fantastic!
Ty that is really nice. Im now recording a new Tutorial using Storyboards and UIKit where we recreate a IOS Facebook Profile page. ;)
This is one of the best tutorials I’ve seen! Most other video creators fly through the coding and don’t really explain any of it. With this I understood what everything meant and now I know how to apply it to other cases when creating an app! Thanks for the content!
Yu for the kind words. I have a new UIKit video planned with Storyboards for Friday. Happy that I could help you
Thanks for the video. It really helps me out. This video has every detail on how to work with Storyboard on the latest version of Xcode.
Ty for your kind comment. I have some more Xcode Tutorials planned :)
Learned many things brother. Thank you for the content
Ty. Make sure to check out my other videos ;)
thanks brother >> i clame a good info as a Revision for tomorow exam ..bless you🌹✨
not only was this amazingly useful and a great introduction to storyboard and xcode, it was by far the best asmr video as well. your voice is amazing lmao.
Haha i had to google what ASMR is. Never heard of it before ;) But I heard people liking my voice before indeed so ty for the compliment.
Im happy you liked it. If you wish, I uploaded a 36 video long IOS Development course where you learn IOS Development and Swift. If you interested in that make sure to check that out.
@@Exodai-Academy yeah I am watching that right now 👍
@@blocksource4192 Cool Enjoy. If you need help with something let me know.
I found this so useful. Great Tutorial!
Im happy you liked the video :) Ty for the nice words
I'm just starting ios today. This was pretty useful. Thanks!
If you just started with IOS make sure to check out my free IOS development course with UIKit. It is here on CZcams. This is the Playlist. czcams.com/video/Qyhz7jRY5q0/video.html
You will learn all the basics of Swift and learn how to use UIKit and you will build a cool final app project. Just check it out and let me know what you think ;)
Good Job dEVsCORCH
Please Continue Your Valuable content on ios development
thank you so much it helps me a lot.
Happy to help. Make sure to give me a follow. Im going to upload a new Storyboard tutorial this weekend ;)
Hey thank you for this!
nice!thank you for this tut man!!
You are welcome. If you want to see something more challenging, check out the FB profile page tutorial with UIKit. czcams.com/video/HGdS67UNBC4/video.html
Great Tutorial! Much thanks!
Ty for the kind Words
Thank you for doing this!
You are welcome. Make sure to check out my other UIKit videos.
Wow Storyboards, I use to use them when I was first introduced to Xcode in 2015. Then came SwiftUI and now all of my developers friends no longer use them. Still cool to see. Keep up the great work.
Yeah same here. I use SwiftUI for everything. But a lot of people still like to watch Storyboard and UIKit videos.
@@Exodai-Academy I still do too, I'm just glad that I found your channel....
Yeah I think UIKit and Storyboards will be the standard for a few more years. SwiftUI has some weird issues sometimes. I have 6 new videos planned for building apps in Storyboard and UIKit so after that I will make more SwiftUi videos :)
They were terrible. Always nib and objective-c 😂
You Are Doing A Great Job
Ty for the kind words
Many thanks! Awesome tutorial.
Im happy to help :) Make sure to check out my other UIKIt videos
thanks! this was very helpful
That is good to hear. If you want to try something more challenging make sure to check out my Facebook Profile tutorial with UIKit ;)
Thanks, nice tutorials
Nice Video!!! Great explanation.
Happy to hear you enjoyed it. Make sure to check out my new UIKit video ;)
Nice tutorial!
Fantastic video
Im happy to hear that you like it :)
Thank you!
YOU ARE THE LEGEND !!
Ty this is really nice of you to say.
nice video, nicely explained.
Ty for the kind words. If you want something more challenging make sure to check out the UIKit Facebook profile tutorial ;)
perfect tutorial
Ty for the nice words.
Thank you for the tutorial! Were you using the M1 Mac?
Ty for the kind words. No this was still done on a Intel MBP. Im waiting for the New M1X MacBook Pro
Thankyou for this helpfull video. do you have also a video how the buttons and sing up and login are working? and that you after login get a different screen?
I can make a video on this. Make sure t give me a follow so you stay updated ;)
Great Video mate. Can you confirm why the value 22 was used. Where did 22 come from. Thanks
Just because I thought it looked good enough.
Great Thanks 🙏
Im beginner so excuse me for that question
Why all buttons stack individually ?
This is just my way of working with stackviews. I find it easier to work withZ
ty
I always tend to write these comments in Dutch, but for the sake of other viewers I’ll write in English. My question Johan, will you be making a storyboard tutorial with multiple pages? Which includes some kind of navigation system? Thanks!
Hii,
Yeah I can make a video on this Subject. Let me design a little application and I will incorporate Storyboards, Navigation and how to present separate viewControllers using Segues. :) I will try to have it online before the second of January.
Thank you for the idea :)
John, thanks for the nice tutorial. I tried to mimic the steps but didn't succeed. Any suggestions you could share will be appreciated.
1. When I used an image of mine for logo, clicking on "Center" or "Stackview" results in the image increase in size. What is happening and how to avoid?
2. When I used "DevScorch" image, the logo was positioned all the way to the top left corner and was partially cut. Similar issue with my logo as well.
Hoi LifeOCI. For your first step. Select the image (not the StaxkView) and change the aspect mode in the identity inspector to something else. It is probably on aspect fit. Try aspect fill or the other way around. For your second point. Did you constrain the Image in the StackView?
Sincerely
Johan
@@Exodai-Academy Thanks Johan. Got it fixed. While fixing learnt a few tricks of my own as well. Can u point me to your tutorial that will help me take the next steps of making the login screen as well as creating functional apps
You shouldnt be using stackviews like this or set fixed width/height, but you explain things well, keep it up!
It is indeed true this is not the best way to do it. But it is the easiest way for beginners to understand :). And especially with higher resolution screens a fixed width doesn't really matter anymore.
@@Exodai-Academy I agree that it is easy for beginners to pick up, but it does matter. If you want you app to look the same in different resolutions xD
@@_kaverna I totally agree with you :) don't get me wrong. I will incorporate this in future videos. TY for the tip
@@Exodai-Academy I dont even know what SwiftUi is. I work with Xamarin. I am switching to xcode now, I will check it out, thanks!
Fully agree. With text you should not be setting fixed heights and widths. Text is dynamic, so it could change size depending on user language and whether the user increases their text size. There is nothing wrong with using stack views, but you should be setting leading, trailing, top and bottom constraints instead and the stack view will grow and shrink based on its internal content.
Hi bro, what’s the benefit of using UISackview? Thank you
The biggest benefit is that StackViews make it easier to work with a UI. Because of StackViews you don't need to Constrain thee Hell out of your application.
I am not able to do so in Xcode 13, I am using Visual studio for mac and opening storyboards from there. It's showing only actions as an option whenever I try to do this. Please help!!!
Ty for your reply. Just a Question. Why would U use Visual Studio on a Mac when you can actually code natively in Xcode?
When I do it this way and stack view everything in the end everything is all over the place. I’ve tried multiple times. Also when I try to add constraints to the text fields there is an issue every time. Not sure what I’m doing wrong but I’ve been stuck on creating the login screen for quite some time now 😵 any advice or have u created a video yet with the correct way which keeps everything in alignment in the end? HELP!
Hey, Im happy to help. Make sure that the Top Stack`View so the StackView where everything is placed in is constrained horizontally and vertically In container. If this still doesn't work please send me a message on Discord.
discord.gg/FkXN9YtvqC Find me there with the name snowflake.
Thanks, at 09:10 what did you press? is it command c? I pressed it and nothing happened!! Could you please tell me what it does and how to press it?
Thanks
Could you please tell me what
Command z
@@Exodai-Academy Thanks, but what does it do? How did you align center everything with command z ?
can you do a tutorial how to create a new user on firebase with email and Password Authentication ??
Yes I would love to. I will add it to my list of videos and articles im writing/ recording at the moment :)
why are you wrapping everything in a stack view? is it really required?
No it is not required. You can also build the UI only using Constraints and using non fixed widths and heights without the use of Stackviews. Problem here is that constraining can be a pain when you want to support multiple screen sizes. For example when you use a UITableView you don't need to Stackview anything, you could just constrain it to the sides of the phone. I just used Stackviews in this Tutorial because it is the easiest way of building a UI like a Login screen where everything has to be nice and centered. So the UI looks the same on a iPhone SE, a iPhone 11 Pro and a Pro Max.
I am still using Xcode Storyboard on an app on working on. I have where I can enter a password to login, but I am having trouble having the user change its password on the app. Can I do this with out using Firebase?
You want to give the user the ability to change the password?
If the password is saved in Firebase you need to send the new password to Firebase. Otherwise the user can't user the new password
Why does everything have to be embedded in a stack view?
It makes aligning and stacking easier to use.
can i do something like a.layer.cornerRadius = b.layer.cornerRadius = c.layer.cornerRadius = 22 ?
You mean different corner radius per corner??
stackoverflow.com/questions/40498892/different-cornerradius-for-each-corner-swift-3-ios
Bro I don't have main storyboard ? how can I add??
Meks sure you have Storyboard and UIKit selected when you create your Xcode Project
Nice video. but everytime I follow these instructions I get a simulator with everything all over the place. Everything''s out of place.. Do you know why that is?
Uhm no idea because I can't see your project. Can you join my discord channel or send me the project so I can take a look for you? Then I can add extra information for you
@t
Sincerely
Johan
hello can you please make the same video for xcode 12.3 ?
This should work for Xcode 12.3 as well. Are you experiencing problems??
@@Exodai-Academy I'm just starting learning Xcode and when I create a new project I don't have the option of main storyboard and the view controller on Xcode 12.3
@@symeontsilidis7344 do command n
I want to buy a Macbook air 2017, is it enough to learn to make ios applications?
Yes it is :) The Swift Compiler is really lightweight so you don't need extreem powerful hardware to build apps with it :) Make sure to check my written tutorials on Swift for beginners. It is updated weekly
devscorch.com
@@Exodai-Academy Okay, Thx u, we love u so much :)
Community Want To learn IOs development .plz start tutorial series for biginners .
I have written tutorials on my website and beginner videos as well. And next month I’m launching a new iOS course on my website
@@Exodai-Academy plz give me link of your website and i was doing a job in software company as a android developer now my company shifted me in ios development department now i am facing difficulties to learn ios so give me your website link and confirm me when u r launching ios development complete course on your website then i will follow it and i like your teaching method thanks a lot
I can't seem to get the option storybord when creating a project.
You mean when you create the Project for the first time?
@@Exodai-Academy Yeah!
That is weird. Are you running Xcode 12?
@@JohnWick-dv5ny on the "new project" screen, chose STORYBOARD as your third option instead of UIKit
@@AaronatWingtrades Ty for helping him
can Xcode 10 project run on other Xcode version?
Theoretically yes. The Xcode Compiler will convert Xcode 10 applications using Swift 3 or 4 automatically to Swift 5
How do you create your own UImageView name?
Could you be a little bit more specific with what you mean by name? Ty
Johan
@@Exodai-Academy How do you put your own logo in the UIImageview at 3:19?
Nvm.
Adding fixed width and height is a bad idea for different screen sizes, and you only considered a particular screen size.
I totally agree with you :) I also explained this in some old comment :)
Value of type '(Any) -> ()' has no member 'layer'
Sorry?
@@Exodai-Academyhow do I fix it?
Hey man, can I contact you for help? I’m building something big. And I need advice 🤙🏻
Hit me up on discord or just send me a email
johan@devscorch,com
You could’ve been more specific in the video it was kinda terrible and should’ve been more specific especially with the command Z I couldn’t understand you so I didn’t know to undo do it or not
Hello,
Thank you for the deserved criticism. You are totally right. I will try to be more specific in future videos.
Sincerely
Johan
my Xcode is different from this one...why?
You are probably running another version than I did.
command n
I found this so useful. Great Tutorial!
I’m happy you found it useful. Thank you for the kind words