UIColor and Anchor Extension
Instagram Firebase
Having seen how verbose and time consuming it can be to layout views with UIKit, let's make our lives easier by creating an extension that does all the heavy lifting in one single line of code. Finally we will refactor our layout code to use this extension method and examine the amount of work we'll save now and moving forward.

Comments (44)
johnrm9
6 years ago
In the UIView extension func anchor ... shouldn't (for connivence) the paddingBottom be changed to - paddingBottom just like paddingRight is? extension UIView { func anchor ( ...){ ... if let bottom = bottom { bottomAnchor.constraint(equalTo: bottom, constant: paddingBottom).isActive = true } if let right = right { rightAnchor.constraint(equalTo: right, constant: -paddingRight).isActive = true // make right padding negative } ... }
Brian Voong
6 years ago
johnrm9
6 years ago
I just discovered a cool thing about "Email" text fields. In this project setting the keyboardType = .email gives the user a nice keyboard for entering the email address.
johnrm9
6 years ago
Oh, correction that UITextField setting should be - keyboardType = .emailAddress
johnrm9
6 years ago
In the AppDelegate class setting the window property to just the default initializer works the same as - window = UIWindow(frame: UIScreen.main.bounds). This works for iOS 9.0 or higher. ... var window: UIWindow? func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { if #available(iOS 9.0, *) { window = UIWindow() } else { window = UIWindow(frame: UIScreen.main.bounds) } ...
Brian Voong
6 years ago
rogerbayarea
6 years ago
Am excited to let you know, it's your improvement to teach/show me to use Extension, it's much simplier neat in coding style and am more confident from learning this.
Brian Voong
6 years ago
Slava Nagornyak
6 years ago
Hi, Brian! Thanks for this super amazing tutorial. I got one question. Why don't you use default values for anchor method? It will allow you to avoid of typing all those nills and zeros every time. Also, if you add there width/height centerx/y anchors, it will be a one big solution for almost everything layout issue, including 1:1 aspect ratio
Brian Voong
6 years ago
Hen Shabat
6 years ago
Hi, Brian! Thanks for this amazing course! Can I ask How to check if the current image on the plus button has changed? I want to be sure that the user select his own profile image. Thanks!
Brian Voong
6 years ago
Hen Shabat
6 years ago
It dosen't worked for me but any way I changed this button to imageView with tapGesture.. so its working! Thanks!
Jesus Adolfo
6 years ago
I am not sure how you made it work here... when you created the extension, the right constant was not negative as it was before. I had to pass the negative -40 to the right constraint to make it work. Also, for the widthAnchor and heightAnchor I had to use a slightly different initializer in heightAnchor.constraint(equalToConstant: height) Also, I can see how similar this is to LBTAComponents and I really like it. I hope you keep maintaining LBTAComponents, I've been using it in a couple of projects and it's really useful. It saves me the work of having to do these extensions for UIColors and Anchors and has other neat features I've been enjoying lately...
Brian Voong
6 years ago
Razzor Owa
6 years ago
What an amazing class, Brian! I'm really excited!
mattnet
6 years ago
Hi Brian, great session. One question, and maybe you address it in the next lesson, but can we move the anchor extension code in the viewcontroller to the extensions file we created? Seemed like the logical place for it. Seemed to work fine after moving it there. Thanks!
Brian Voong
6 years ago
fflg1418
6 years ago
Hi Brian, great video. What is the point of creating extensions and helper methods? Is it so the code is easy to read?
Brian Voong
6 years ago
wasim
6 years ago
Hi, thanks for your great video.. I learned a lot from this video..even more, I used optional parameters for extension method to make call statements cleaner.
xd573797483
6 years ago
Hi, why only topAnchor and leftAnchor have .self?
Sean Moriarity
6 years ago
The "self" isn't required, and probably looks better without. All the anchors are properties of UIView, so they don't need to have self before them.
skydhax
6 years ago
What's the best approach for custom UIColor? The one that is showed on the video or the approach with class var? Example: class var lightBlue: UIColor { return UIColor(red: 149/255, green: 204/255, blue: 244/255, alpha: 1) }
Mamun Simul
6 years ago
There is an error in your code. Variable and Class are two diffrent things. If you want to create an UIColor instance remove Class. The best approach is to use whatever is shown on the video . The reason is that you can call the function created in the Extention on the class without creating instances of UIColor.
skydhax
6 years ago
Sorry I missed to add that it needs to be put inside the UIColor extension exactly like this. Try it: extension UIColor { class var lightBlue: UIColor { return UIColor(red: 149/255, green: 204/255, blue: 244/255, alpha: 1) } } then call it from another class just like: UIColor.lightBlue
stonypig1
6 years ago
just bought the instagram video, i always watch video outside, can. you make them downloadable? starbucks internet lags and it is unplayable.
smiller193
6 years ago
Is anyone having an issue with the input accessory view getting stuck at the bottom? When exiting comment screen
Brian Voong
6 years ago
Chard
6 years ago
so slowly this video load . sad~
Brian Voong
6 years ago
Chard
6 years ago
from shanghai vpn connect . its smooth later 3q
Tube
5 years ago
I wanted to use tuples like so: myTopAnchor = myButton.layoutAnchors( top: (view.topAnchor, 0), // left: (nil, 0), // bottom: (nil, 0), right: (view.rightAnchor, 0), width: 60, height: 50).first // notice subscript So, I rejiggered one of your layout convenience methods like this: // anchor convenience method typealias X_ANCHOR = (anchor: NSLayoutXAxisAnchor?, k: Int) typealias Y_ANCHOR = (anchor: NSLayoutYAxisAnchor?, k: Int) // anchor convenience method // all parameters are optional func layoutAnchors (top : Y_ANCHOR = (nil, 0), left : X_ANCHOR = (nil, 0), bottom : Y_ANCHOR = (nil, 0), right : X_ANCHOR = (nil, 0), width : Int = 0, height : Int = 0) -> [NSLayoutConstraint] { translatesAutoresizingMaskIntoConstraints = false var anchors = [NSLayoutConstraint]() if top.0 != nil { anchors.append(topAnchor.constraint(equalTo: top.0!, constant: CGFloat(top.1))) } if left.0 != nil { anchors.append(leftAnchor.constraint(equalTo: left.0!, constant: CGFloat(left.1))) } if bottom.0 != nil { anchors.append(bottomAnchor.constraint(equalTo: bottom.0!, constant: CGFloat(-bottom.1))) } if right.0 != nil { anchors.append(rightAnchor.constraint(equalTo: right.0!, constant: CGFloat(-right.1))) } if width > 0 { anchors.append(widthAnchor.constraint(equalToConstant: CGFloat(width))) } if height > 0 { anchors.append(heightAnchor.constraint(equalToConstant: CGFloat(height))) } anchors.forEach {$0.isActive = true} // activate each one return anchors } // end Trouble is the autocomplete doesn't look right: It only shows the first of each tuple. Also, is the $0 type-checked I wonder...
Matuk
5 years ago
How would you update the anchor extension, so it can handle safeAreaLayoutGuide? Cant figure out how to test it.
Brian Voong
5 years ago
GD
5 years ago
hi, I am continuously getting message "Sorry There was an issue with playback" at 3:59 point.
Brian Voong
5 years ago
GD
5 years ago
yes, it's still there. I can play rest of the video by skipping few minutes.
Brian Voong
5 years ago
GD
5 years ago
i am using safari
swinful
5 years ago
Hi Brian. Just purchased your course and I do not regret it at all! You may touch on this in the next video or future videos... but, we can cut a lot of clutter when making calls to anchor() by supplying default values for all parameters. For example, by supplying default values for all parameters we can simply call anchor() as follows w/o error: --- stackView.anchor(height: 200) stackView.anchor(top: plusPhotoButton.bottomAnchor, paddingTop: 20) stackView.anchor(right: view.rightAnchor, paddingRight: -40) stackView.anchor(left: view.leftAnchor, paddingLeft: 40) --- The definition looks as follows: --- extension UIView { func anchor( top: NSLayoutYAxisAnchor? = nil, paddingTop: CGFloat? = nil, right: NSLayoutXAxisAnchor? = nil, paddingRight: CGFloat? = nil, bottom: NSLayoutYAxisAnchor? = nil, paddingBottom: CGFloat? = nil, left: NSLayoutXAxisAnchor? = nil, paddingLeft: CGFloat? = nil, width: CGFloat = 0, height: CGFloat = 0 ) { ... } ---
swinful
5 years ago
Additionally, by supplying all default values the one-liner also looks less cluttered because we do not have to specify nil explicitly: ```swift stackView.anchor(top: plusPhotoButton.bottomAnchor, paddingTop: 20, right: view.rightAnchor, paddingRight: -40, left: view.leftAnchor, paddingLeft: 40, height: 200) ```
Brian Voong
5 years ago
Sieder Villareal
5 years ago
how do I add static func anchor to my Extension.swift?
Brian Voong
5 years ago
Sieder Villareal
5 years ago
I was referring to extension UIView {} being added to extensions.swift, and I cant seem to make it work like extension UIColor.
pdefilippi
5 years ago
Brian, few questions... Would this be best practice to create this extension inside this particular class or should we separate it into a separate Swift file. I am thinking big picture and am wondering if this extension should be available throughout the app from inside this class.... For the most part I am asking if this app had 20 view controllers, should all the view controllers have access to this extension from where it is currently written? Is that ok from an architecture stand point? Am I getting to far ahead of myself?
Brian Voong
5 years ago
pdefilippi
5 years ago
Awesome Brian. At least I know that I am thinking about it correctly...
ozolc
5 years ago
In my opinion it would be better to place extension to external file
Sanket Ray
5 years ago
I am re-watching this episode and something is not clear to me. When you created "someRandomMethod" function in the UIColor extension. Its a regular method and should be accessible by any instance of UIColor right? The method is available for UIColor.red but not for UIColor() Why is that? Isn't UIColor() an instance of the class?
diegobust4545
5 years ago
That... was... so... crispy. I am in complete awe in how clean that code was
Brian Voong
5 years ago
Gilbert Martinez
5 years ago
I've watched a large portion of your YouTube videos and that led me to purchasing this program. I really enjoy programatically creating the views instead of clicking on things. It helps me understand a lot more what Xcode does under the covers. I'm looking forward to finishing this course and hopefully in the future see an advanced course. Thanks Brian!
kimwooch
5 years ago
Brian, I have a question about landscape mode. When the phone is rotated 90 degrees from the portrait mode, the sign up button is cut off from the screen. Is there a way to fix that so that the stackview fits in the screen even in landscape mode?
Johnny Wu
5 years ago
you can implement two different layouts using size classes. hope that it's helpful for you. https://stackoverflow.com/questions/25685829/programmatically-implementing-two-different-layouts-using-size-classes
tsangaris
5 years ago
Great stuff! Not to mention the badass voice! :)
Daniel Salomon
5 years ago
Hi Brian, How can we use MVC or other design patterns if we write all the UI code inside the view controller? Thanks.
Brian Voong
5 years ago
Daniel Salomon
5 years ago
Thanks, this helps. I will appreciate if you could make a short video about this, I think it can help others as well. Great course btw!
Brian Voong
5 years ago
Daniel Salomon
5 years ago
Great, I will subscribe. Thanks.
Deniz Mersinlioglu
5 years ago
Hi Brian, I just wonder why you don't use visual representation instead of anchoring? Thanks,
Brian Voong
5 years ago
Gabriel
5 years ago
Hi Brian Yes I don't have a clue what Daniel Salomon is talking about, but it sounds good - can you enlighten me/us?
dclawson
5 years ago
Hey, what Dan (and Brian) are talking about is that you can "subclass" components like UIButton or UIView. Let's say that you wanted to create a "SubmitButton" class in the app that would be the shape and style that would be common across all of the UI. You would create the one subclass called SubmitButton and then create the init function to accept text and maybe a selector for what action should be taken when it's clicked. So, look at the code we have for "signUpButton" for this app. Seven or so lines of code. Instead of: let signUpButton: UIButton .... We'd have: let signUpButton: SubmitButton(parameters here) (I forget the syntax) So, you'd pass in the text you wanted on the button, and what function you wanted it to call, and then you'd be done. Lots faster. For what it's worth, it's covered in the Intermediate Core Data class that Brian offers. It's likely that we'll end up doing something similar in this course, too, assuming Brian does that commonly for his projects.
Gabriel
5 years ago
dclawson Thank you very much for that explanation. Got it. I will through the Core data class and track it down. Thanks again, appreciated.
Duc Vu
5 years ago
Hi Brian and everyone, I do agree that using extension can make our life a lot easier, but I wonder if it is adding time complexity or some kind of drawback to the processing time of the application.
pdefilippi
5 years ago
Brian, What is the though process of creating these helper methods. What do you look for when deciding this is something to put in place. When you create an extension, are you basically looking at the "type" and just passing it through the extension? Can you basically do this to any "type"? Im trying to figure out a consistent approach so to say.
Brian Voong
5 years ago
pdefilippi
5 years ago
got it, thanks for the response
roygbiv
4 years ago
Hi Brian, I am still confused as to when I should include self in front of the topAnchor, bottomAnchor, etc. I remove the "self." in front of topAnchor and leftAnchor and the app displays the same as when the "self." is present. Hence, I am unsure why there is a need to put self for top and left anchor? Thank you.
Brian Voong
4 years ago
Jaylon22
4 years ago
Hey Brian, I hope you are having a wonderful day, i really love the course. I just have a quick question. When i test this on the iphone 6s, or 7(Basically the smaller versions). The constraints are kind of different, it seems like the post size and cell sizes are compacted, do i need to add extra constraints? Or is there something else i should be doing.
Brian Voong
4 years ago
Jaylon22
4 years ago
Thank you for the response, so what i did was i detected the screen size and added constraints accordingly. Is that bad coding practice?
shasvat
4 years ago
Love how you explain every little detail like diff b/w static and non-static methods. Looking forward to learn a lot from this course :)
Parv Bhasker
4 years ago
Greetings, I lave the way you explain things, every concept is clearly explained, I almost watched each and every video on youtube channel. I really want to learn from all the Paid courses over here. But the price is bit hight according to our currency due to that I wasn't able to purchase these courses. Do you have any tieup with any teaching websites ? like udemy etc ? These sites provide opportunity to sell courses with low prices to more number of students. So that both end will get the benefit. I hope you understand what I mean : ) Happy Coding :)
Cinquain
4 years ago
That video was great!
Brandon.zappia
4 years ago
bad video keeps changing code and very confusing
johnicode101
3 years ago
if its confusing you might need to study swift a bit more since the way he teaches is more for intermediate developers hope that helps
Dino32
3 years ago
Hi all! Have created an extensions for omit repeated code. extension UIButton { class func setupButton(title: String, color: UIColor) -> UIButton { let button = UIButton(type: .system) button.setTitle(title, for: .normal) button.setTitleColor(.white, for: .normal) button.backgroundColor = color button.layer.cornerRadius = 22 return button } } extension UITextField { class func setupTextField(placeholder: String, hideText: Bool) -> UITextField { let tf = UITextField() tf.placeholder = placeholder tf.backgroundColor = UIColor(white: 0, alpha: 0.03) tf.layer.cornerRadius = 22 tf.font = UIFont.systemFont(ofSize: 18) tf.isSecureTextEntry = hideText return tf } } and call like this - private let emailTextField = UITextField.setupTextField(placeholder: "Email...", hideText: false) All will be the same but in one line of code.
Rep0se
3 years ago
A pretty handy UIColor Extension (for those who are lazy to type in UIColor.rgb all the time) ;): extension UIColor{ convenience init (red: CGFloat, green: CGFloat, blue: CGFloat){ assert(red >= 0 && red <= 255, "Invalid red component") assert(green >= 0 && green <= 255, "Invalid green component") assert(blue >= 0 && blue <= 255, "Invalid blue component") self.init(red: red/255, green: green/255, blue: blue/255, alpha: 1) } }
Jp1478
3 years ago
I got everyhting fixed took an hour sat down and read line by lin understood the code got this far
ZacharySmouse
3 years ago
Hey Brian, I have center X and Y anchors if you want to include them in your projects too. :)
HELP & SUPPORT