Advanced Swift: Making Programmatic Auto Layout Easy through Extensions
Вставка
- Опубліковано 22 сер 2024
- Auto Layout can be quite tedious if you write the code programmatically using pure UIKit. In this lesson, I'll show you how to make things a lot easier through an extension method. Enjoy.
Intermediate Training Core Data
www.letsbuildt...
Instagram Firebase Course
www.letsbuildt...
Facebook Group
/ 1240636442694543
iOS Basic Training Course
www.letsbuildt...
Completed Source Code
www.letsbuildt...
Instagram: / buildthatapp
Twitter: / buildthatapp
Apple should build statues for both you and Paul Hudson outside their campus. Thanks a ton!
it took like a month, but i finally know enough swift to follow your videos! I learned a lot and exited to learn more!
You are my god for Swift Development. man i just love the way you make things so simple! Wish you become the greatest coach forever! We NEED more Humans like you Brian! Thank you so much! im so much in love with your way and this channel and your website! Thanks again 💯 ✔️
Love your videos!! You’ve made me regret using storyboards for so long 😭
Thank you Brian, I've been using those extensions for over a year now and they've been very helpful. I went a little step further too and added a nil default value to the NSLayoutAxisAnchors parameters
I don't know what to say... I wanted to focus on this task and you uploaded this video.
It's like we are connected. Whenever i want to focus on a task you upload a video about that task ahaha.
For me, this is the best UA-cam channel i've ever seen.
Hey Brian. Today you have asked (on instagram I guess) what kinda things we wanted to see on the next premium content. This type of things are exactly what I'm looking for. Programmatically making views fit all device screens, orientation, creating this kinda extensions are great. Loved this video. Thanks.
Always been with you till the end of the video Brian. The more I watch the more it get interesting. Thanks for the video. You are amazing.😄
so much knowledge packed into 25:37 mins .. so much thanks for sharing Brian
This guy is a freakin genious!
This is so useful. You must do more such advance topics. Thanks Brian :)
This is the greatest thing since sliced bread
Brian, words are not enough to express my gratitude. Since I'm also not big fan of StoryBoards, your mentorship is like heaven on the earth. Thank you so very much for valuable tutorials!
Nice little tutorial ! I was alot confused at auto layouts but this will help me thanks !
So much better than the extension I created. Great video Brian. Thanks!
Very good video. Looking forward to you doing more on this topic in similar fashion like you have done before in other series.
Thanks for the nice job! Great tricks by using extensions to make life easier by avoiding huge code.
Thanks a a lot I was able to follow the tutorial on my iPad using Swift Playground
Thanks Brian !, this reminds me, in one of your tutorials, you created an extension for the Constraints With Format using them in the collectionViews, obviously this is much better, excellent advanced concepts! cheers!
Yeah as programmers we get rid of all the tedious work we hate to type out all the time. Saves us from making mistakes in future as well.
Great as usual, Brian! The ol' .visualFormat accomplish exactly that too, a compact way to arrange your views. SafeArea adjustment (instead of just top/bottom) is what might be left as to this approach comparesd to yours. Thanks!
Yeah, I retired the old visualFormat methods as there are some limitations that I was never able to overcome. For example creating a V shape layout, I was never able to get this working strictly with VFL. I'm open sourcing this method and explaining it so my courses can go a lot faster haha
Lets Build That App with VFL you can attain V shaped layouts utilizing container views but it might end up a little verbose, right? Cheers!
if let Thanks=programaticallyAutolayout
{
Brian=Thanks
}
It's more like this:
let brianVoong = AwesomeDude(withProfession: .softwareDeveloper)
while brianVoong.doingAwesomeTutorials() {
brianVoong.karma += 1
Manners.sayThanks(to: brianVoong)
}
:)
Thank you for the tutorial Brian, this should really save me a lot of time on my next project
U are amazing guy ! This tutorial is awesome !
Great vid Brian!
Great video Bryan,
I use your UIView extension for over a year and it is really useful and my code looks more cleaner than before with storyboards :)
I try also another func implementation based on your implementation with tuples and seams really decent.
public func anchor(top: (NSLayoutYAxisAnchor?, CGFloat),
left: (NSLayoutXAxisAnchor?, CGFloat),
bottom: (NSLayoutYAxisAnchor?, CGFloat),
right: (NSLayoutXAxisAnchor?, CGFloat),
size: CGSize = .zero)
and a second one with a struct AnchorConstraints and definition of
public func anchor(anchors: AnchorConstraints, padding: UIEdgeInsets = .zero, size: CGSize = .zero)
Good job Bryan,
Looking forward to your next video :)
Awesome, I have something very similar. My tuple is also called AnchorConstraints :)
Cool! Great material. I use the similar approach with a couple of additional extensions.
You are a LIFE SAVER. Outstanding tutorial. I was struggling with autolayout. I added an image to the view but its off on the right side between iphone 8 vs iphone 13. What would cause this?
This will help me so much, thanks a lot.
Basic and improved extension in LBTA courses. Thank you
Brilliant! Love the [ ].forEach construction!
Surprised that you didn't include a way to do multipliers ! Good Stuff Man ! Loving it
great stuff!! thank you 🙏🏿
Great video. Thank you so much for the breakdown.
It’s a joy to watch👌
This is Awesome! Thank you so much Brian
Awesome video Brian, keep it up!
Thanks, more interesting advanced techniques coming up
Thx so muchhh. Keep going man.
good lesson! thank you!
0:43 lolllll
I wish there were more programmatic tutorials like this. I gotta say, coming from web dev, the web tutorial scene seems more developed compared to what I've seen so far in the iOS community. For Swift, there's pretty much your channel that doesn't do any storyboard magic. Most others are kind of meh. I guess storyboards are cool if you're just starting out but the programmatic approach seems much more maintainable.
Styling seems to be an issue with it though, I definitely don't want to teach designers all these APIs just to style a view. I wonder why Apple hasn't thought of a way to separate styles. I'm making iOS apps using React Native in JavaScript and there seems to be a better separation of concerns there. Not to mention that you can also use 70% of the app project code to make a website because of the React framework.
Here's 5 minutes of video to sell the idea: ua-cam.com/video/3SuO-rhLggg/v-deo.htmlm3s
Yep coding out your apps is definitely the way to go. Storyboards however are great for beginners to get their feet wet.
Storyboards are great, and can cut down on tedious boilerplate coding a LOT. Use them as much as possible. Only fall back to actual code if you really have to.
jdrukman
No way. Code is REUSABLE
I'm new and studying, why would you bother coding all this out if you could just do it on storyboard? What're your advantages?
@@TheFinalsTV the advantage that you dont know about is that you will be faster at coding than dragging the mouse to click...
Top tutorial Brian andaswering my earlier question 🙏👍
Thanks Brian,
I've been looking for a way to convert all my autolayout code to one single function call.
mind = blown.....great video :D
Great info, thanks!
Really thanks to u, it really helps me a lot!!!!!!!!!!!!!!!!!!!!!!!!! awesome!!!!!!!!!!!!!!
不用谢
As a newbie i have a question. We give imageViews fixed width and height. It must look good almost on every iPhone but what about iPads. 100x100 must be really small for iPad screen. Do we have to make a design for iPads from stretch or is there any way to switch fixed sizes between iPads and iPhones?
How will this look like on smaller iphones? Because we predefine the height and width.
Nice video Brian... 😘😍
Hey dude, I used your LBTA components on a project. Def would buy you a beer for it ! :D
thax, you are awesome
Great tutorial nevertheless. I used SnapKit by the way :D
Awesome, snapkit is a great alternative to IB as well.
Thanks for this Great Video... Can you make a video of custom Collection view layout.
You should run your audio through a high pass filter because there's some distracting rumbling below 40Hz.
If you take text layout direction into consideration, and it the layout text is right to left direction, the trailing anchor constant may not be negative value, instead, the left anchor constant should be negative value. Is that correct?
Dear friend, first of all thanks for the amazing tutorial. I have a question, if possible: How can I create a tableview, with custom tableview cell, using only code, as you have shown in this lesson? Is this possible?I want to learn how to create all elements of my interfaces without using storyboard. Thank you very much.
Great. What about SnapKit?
Hey Brian, why do padding.bottom and padding.right both have to be negative?
I am not a iOS dev, but cant you use some gridcomponent to do this? Or some stackviews?
Hi Brain, I'm waiting for PrefetchDataSource lesson
Great stuff! Your "anchorSizeTo" method should also start with a "translatesAutoresizingMaskIntoConstraints = false" line though, shouldn't it? Just to be sure... :)
Great catch, I’m sure there are other bugs as well
Can you share the demo application ? Or are you gonna continue this tutorial until the final demo ? ...by the way, or channel is awesome!
Really good video, don't you think width should be according to device width instead of a constant so it will look proportional on all devices?
Its really up to you, you can use multipliers if you need.
hi Brian ..!! tnx for your great tutorial ... in objective C how to follow this implementation?
thanx for such a nice tutorial for auto layouts using programmatic approach, i got confused that how i can put view into the center with anchor method? I am trying to implement your firebase chat login screen using these new extension but failed to set the input container view to the center of the view. how i can set centerXAnchor and centerYAnchor using anchor method please help.
Great vid! What is the release window for the tinder app course?
What is the difference between leftAnchor vs leadingAnchor and rightAnchor vs trailingAnchor? 🤔
Just a minor difference, but for LTR and RTL languages its better to use leading and trailing. I think arabic is an example of this.
Yes, Arabic is a right to left language.
Why youtube does not support "love" button ^_^
How do you deal with different orientations (portrait, landscape), by setting auto layout you should yet to programmatically deal with this conflicts
Nice tuto, thanks Brian ! I was wondering, is there a bug if the app runs on an Arabic device ? Because we use trailing and leading for the constraints but right and left for the padding.
very cool!
Holy shit!! this is so helpful!!!! 😭
Hi, I want to ask you what course I should choose. Techdegree (Teamtreehouse) or Nanodegree (Udacity). For iOS Development?
And
A full stack javascript developer or a front end web developer degree. What should I choose of that?
Choose whatever makes you happy.
Nice video :)
Great!
Hey, Thanks for the guide which I am looking for, You dont have full training course of iOS in udemy or any othe platform ?
Super video! I have just one more question. How do I have to modify my extension if I wanted to animate the auto layout constraints afterward?
For animation of constraints, you'll need to return the constraints from your extension. I use a simple struct to hold my constraints and return them.
extension in Swift is very similar to prototype in Javascript.
how about to set top, leading, bottom, and trailing anchors default to nil? In this way, no need to pass nil to anchor method.
Yes, that also works and is an excellent idea.
just to ask what the different between padding and the anchors don't they give space between views
How do anchors give space?
Great video. Can you explain the syntax of the for each loop?
And also the syntax for the anchorSize func.
That forEach loop is hard to explain since it’s so short there’s not much to talk about. anchorSize just replaces the two method calls I deleted. I guess you have to know what a lot of this stuff does already huh
Lets Build That App yeah, u have to know programming to follow you.
I understand most of the syntax of the foreach just the $0 I don’t get...
And about the func ancorSize I just don’t understand the (to view)
$0 just represents an item in your array during iteration. method(to something: UIView), method(whatever thing: UITableView), the word before the first parameter can be anything but should make sense when saying the method aloud.
Lets Build That App ohh , now I get it. Thx man. I really enjoy your videos
how do you propagate this kind of boilerplate over all your projects? Do you create a code snippet , or do you create a kind of boilerplate to start all of your projects, cocoapod or something?
maybe create your own (or company's own) framework, right?
@@mxbro6903 I did not asked for his code brother, although, he as a propagator of knowledge, very kindly made available for anyone with interest on learning. Thank you for your time!
I liked this videos
Hi , can you kindly explain why need to include minus in the padding and bottom constant ?
I think you can just omit the constants to see what happens. Good luck.
Great video Brian. But is there any way to get the view code out of the view controller and place it some place else? I’d love to get all the subviews created and constrained and then have a nice clean view controller in which to write viewcontroller code. Any tips on how to do that?
Yeah, you can create a simple UIView subclass that holds all your view setup logic. We go over this in a few places of the Instagram course if you're interested.
Lets Build That App awesome could you point me to the right video?
Lets Build That App instagram
what is the name of a melody that plays in the beginning? Like in the first secs
It's really awesome but how to use this extension with subclasses of other components?
extension UIView {
ERROR: Initializer 'init()' with Objective-C selector 'init' conflicts with implicit initializer 'init()' with the same Objective-C selector
convenience override init() {
self.init(frame: .zero)
}
If I created Subclass of UIButton: I have an error in init:
class StylishButton: UIButton {
Swift Compiler Error:
override public init(frame: CGRect) {
super.init(frame: frame)
}
Great video. Do you have a book or class we can purchase?
He has paid courses on his website.
nice vid. i liked. very flexiable. this was great. i like.
fucking amazing!
how do you do this with image view
Really like your vids bro.
Can u please make some tutorials about creating games? (SpriteKit)
I don't think I've ever used SpriteKit.
me neither :) but it can be very special, refreshin and interesting if we learn it. thank u for all the great stuff.
Hey, how do I get the quick help that you have next to the simulator 🥺
Lol
Godel Escher Bach thanks 😊
Lets Build That App 😅😅😅
ThankYou Brian !!
Here is the link for full source code in Github, if anyone is looking...
github.com/harsha547/Making-Programmatic-Auto-Layout-Easy-through-Extensions
Flexbox would be nice...
Viva LBTAComponents :) github.com/bhlvoong/LBTAComponents
Lol, I didn't think anyone would realize that this comes from the components. I'm making another video on how to create the generic list stuff today.
First saw the technique in your Instagram Firebase course and loved it. Shortly after you did a video on open sourcing LBTAComponents. Have been using it since. Even referenced it in some of my tutorials on my channel.
Looking forward to the list vid. I am planning on releasing a whole series on LBTAComponenets myself on my channel. Will let you know when it’s ready.
EDIT: here’s the Instagram Firebase course I was talking about:
www.letsbuildthatapp.com/course/Instagram-Firebase
Highly recommend it to all.
I plan on updating the components since I've discovered some better techniques with Generics that will make things much cleaner. I'll go through the explanation in the next videos.
Lets Build That App Will you be updating LBTAComponets too?
I'm looking to updating it, but also not to break the Twitter tutorial series. I might create another Pod instead that's cleaner.
Hey,
Could you help me to use multiple Scrollview programmatically..
I mean one inside other one..
Parent should manage the vertical scroll and child to manage the horizontal scroll.
Some thing like this i am trying but not works me..
//Constraints vs - vertical, hs - horizontal
vs.leftAnchor.constraint(equalTo: view.leftAnchor),
vs.topAnchor.constraint(equalTo: sb.bottomAnchor),
vs.rightAnchor.constraint(equalTo: view.rightAnchor),
vs.bottomAnchor.constraint(equalTo: view.bottomAnchor,constant : -(CGFloat(seatConstants.seatVerticalViewHeight))),
hs.leftAnchor.constraint(equalTo: vs.leftAnchor),
hs.rightAnchor.constraint(equalTo: vs.rightAnchor),
hs.topAnchor.constraint(equalTo: vs.topAnchor),
hs.bottomAnchor.constraint(equalTo: vs.bottomAnchor),
//update on the data
vs.contentSize = CGSize(width:self.view.bounds.width, height: 2000)
hs.contentSize = CGSize(width:1000, height: self.view.bounds.height)
//I will add content on hs
hs.addSubview(catergoryRow)
Please help me on this....
I am watching all your videos.. and i am following your way for programs.
Use a uicollectionview.
Also stop spamming my channel and website, people wont respond to you if they see too many of the same messages. It's 2018, I hope you understand how the internet works.
yes i got,
but i did'nt understand this word..
"Also stop spamming my channel and website,"
Just for the confirmation.
my application purpose is for seat booking for movie
will it be suitable..
Stop repeatedly posting the same messages all over the place. If you're seeking help, this is why you're not getting any responses.
Why haven't you used closures for all the color views?
There are many ways to define views.
thanks. I was initially creating like this ly and after watching your tutorials I thought using closure is the best as far as optimisation is concerned.
I wouldn't worry about optimizations, just use what is easier to read for you.
thanks a lot...
I've just created a c# Gist for those of you wanting to replicate the sample in Xamarin.iOS
gist.github.com/omatrot/b6a92b67f9397d58dc8df8bc28de0a4b
Is it your mic broken? 😁
It’s hanging above my head haha.
I think he meant that low rumbling noise in this video. Extremely unpleasant in headphones.
Ok yeah I'm starting to hear it more and more now that you bring it up. My recording setup had to go through some changes after I updated to High Sierra, causing my macbook pro to slow down significantly. I'm still trying to find out how to fix this without having to purchase a brand new laptop.
It's not really a problem, it's always a good content. Thanks at all. :D
A quick fix is to place an EQ on your audio in Premiere or Final Cut, and filter out the low end. Since most of what we hear in your videos is your voice, we don't need the extra audio frequencies under 100hz. Loving your videos!
bloody hell dude, slow down :(
Things are only gonna get faster 🔥🔥🔥
I have already given up :)
You can slow down the video from youtube settings