Custom Search Area
Twitter Slide Out Menu
In today's lesson, we'll be implementing a custom Search Bar container for our chatroom menu on the left panel. This is a little tricky as we'll be implementing this container for both portrait and landscape orientation. I'll be taking advantage of the safeAreaLayoutGuide's anchoring to help us achieve a variable height search bar. Hopefully this wont be too hard to follow!

Comments (7)
Dennisvm82
4 years ago
Thank you for sharing that terrific anchor extension with the initializer. This version has made my day. I used to use a similar version, but I wasn't aware of the fact that you could just keep the padding and sizing out when needed. Together with the function that uses generics to create objects (posted on Twitter a week or so ago), I was able to reduce the amount of lines I have in my code by a lot.
Brian Voong
4 years ago
Dennisvm82
4 years ago
Hey Brian, Could you tell me how I can add an anchor dimension to the size init in your anchoring extension? I am trying to initialize a width by using the widthAnchor of the view, but it complains about "Overloads for 'init' exist with these partially matching parameter lists: (width: CGFloat, height: CGFloat)" For example, I have some code with old-school constraints, and I am trying to translate them to your anchoring system. The multiplier is giving me a hard time, because I don't know where to put it to get the same result. NSLayoutConstraint.activate([ labelView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 20), labelView.widthAnchor.constraint(equalTo: self.widthAnchor), detailLabelView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -15), detailLabelView.widthAnchor.constraint(equalTo: labelView.widthAnchor, multiplier: 0.3) ]) labelView.anchorView(top: nil, leading: self.leadingAnchor, bottom: nil, trailing: self.trailingAnchor, padding: .init(top: 0, left: 20, bottom: 0, right: 0)) detailLabelView.anchorView(top: nil, leading: nil, bottom: nil, trailing: self.trailingAnchor, padding: .init(top: 0, left: 0, bottom: 0, right: 15), size: .init(width: labelView.widthAnchor / 3, height: 0))
Brian Voong
4 years ago
st4n
4 years ago
I truly hope this is not the last video in this course.. maybe you can cover the topic of animations inside tableView's cells (for example rotate # when clicked) when dequeuing.. or maybe make searchBar useful - search in hardcoded data (or decoded from some JSON) for parts of raw string and for example presenting results sorted by users / topics using the same tableView (or maybe covering current with some resultTableView) + didSelectRow:at functionality (passing objects, delegation?) i can provide with more ideas :)
caquillo07
4 years ago
Im a bit confused, why does providing a background color to the labels make the headers "sticky"?
Brian Voong
4 years ago
吳登秝
4 years ago
Hey Brian, Have you figured out the fix to indentation of tableViewCells in landscape mode? It seems like it's got some problem with contentView. This is the screenshot of my dubug hierarchy: https://imgur.com/a/VIe45SP
吳登秝
4 years ago
OK, I've figured this out by implementing StackView like the previous ones.
Joe Langenderfer
4 years ago
Hey Brian, This video series is great - I've learned a ton and am excited to keep learning more from these tutorials. Would it be possible for you to add another video to show us how to set up the tab bar at the bottom of the menu like Twitter has today? More specifically, the tab bar with the dark/light mode button and the QR code button. Thanks for your time with this! Joe
st4n
4 years ago
hey Brian, maybe you could do the next lesson(s) sticking with the slack app design and implement pageControl or horizontal collectionView within ours left view? Merry xmass :)
romer_96p@hotmail.com
3 years ago
Hi Brian hope all is well, Basically I'm using the same tabBar from the other course and passing the BaseSlidingController() onto two of my tabBarControllers. I will get the same features found inside the BaseSlidingController for both tabs, unless I switch controllers onto the blue view. which begs the question... how can I do that? how can I switch controller for both the red and blue view? I am using this to recognizer which tabBar got pressed and passing the tag value to a new switch statement. override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) { baseSlidingController.didSelectTabBar(tag: item.tag) } and this is what is in the BaseSlidingController.swift func didSelectTabBar(tag: Int) { print(tag) switch tag { case 1: menuController = newMenuController() rightViewController = newHomeController() default: menuController = MenuController() menuController = HomeController() } } the tag value goes through because it gets printed in the console when I tab.. but it won't switch controller... please help i've been literally all of yesterday and today trying to come up with answers but I can't get my head around it... as you can tell im brand new at this...
HELP & SUPPORT