Menu Header and Intrinsic Content Size
Twitter Slide Out Menu
Moving on, in this lesson we'll navigate a few different techniques of using a UIStackView to create our Menu Header View. More specifically, we'll be go over how to customize the sizing of the elements in our header by analyzing what intrinsic content size means. Again, this will be mostly UI designing as its very important to understand how to get pixel precision for your application.

Comments (10)
axel2018prena
4 years ago
could you please specify Swift version for each lesson you sale, that way we are up to date with the version of Swift.
axel2018prena
4 years ago
i just purchased $20.00 course and the version of Swift is 3. witch is outdated.
Brian Voong
4 years ago
axel2018prena
4 years ago
thank you Brian, you doing good job.
Dennisvm82
4 years ago
Having only four menu items, I wouldn't make the tableView in the menu scrollable at all, though. Twitter probably did this because they support landscape mode, which gives the menu a lot less space to show its selectable items. It totally depends on the design of your application of course :)
Brian Voong
4 years ago
Dennisvm82
4 years ago
Hey Brian. I tried the following to change the scroll based on the orientation. Not exactly rocket science and probably not monkey-proof, but I had to bump up the header cell height to 250 because disabling the scroll somehow got into the way of the statsLabel (wasn't visible with the base height of 200). override func viewWillLayoutSubviews() { let orientation: UIDeviceOrientation = UIDevice.current.orientation orientation.isPortrait || orientation.isFlat ? returnTableViewOrientationFalse() : returnTableViewOrientationTrue() } func returnTableViewOrientationFalse() { tableView.isScrollEnabled = false } func returnTableViewOrientationTrue() { tableView.isScrollEnabled = true }
Brian Voong
4 years ago
Dennisvm82
4 years ago
Thanks! The two separate functions were a little bit redundant I guess :-)
Tube
4 years ago
The intrinsic size thing sure comes in handy sometimes, BUT... We are setting exact sizes in points! This goes against auto layout, size classes, etc. Doesn't seem like good practice?
Brian Voong
4 years ago
logicsoftware
4 years ago
I think SpacerView also is a hack. UIStackView has a method 'open func setCustomSpacing(_ spacing: CGFloat, after arrangedSubview: UIView)'.
吳登秝
4 years ago
I agree with @logicsoftware. Adding UIViews is a good way to add spacing more like a visual format, but it will certainly take up unnecessary memory by instantiating UIViews.
pawelcichonski
4 years ago
Everything is very clear to this point. I am just trying to understand one thing if I may. In the logic for velocity: //so before our 'main logic' of opening and closing the menu, we are checking the following if isMenuOpened { //if menu is OPENED and we want to slide it to the left to hide it if abs(velocity.x) > velocityThreshold { If the value of velocity is less than 500 = close the menu closeMenu() return } //next logic if abs(translation.x) < menuWidth / 2 { // ????????????? QUESTION BELOW ??????????????? openMenu() } else { closeMenu() } } else { //If the menu is CLOSED and we want to slide it to the right to open it if abs(velocity.x) > velocityThreshold { //if greater than value of 500 then we are going to open the menu openMenu() return } //'main logic' if translation.x < menuWidth / 2 { //if it's less than half open (to the right) then close it back to the left closeMenu() //from 0 to 150 = close } else { //if it's more than half open (to the right) then open it completely openMenu() // } } "if abs(translation.x) < menuWidth / 2" - HAVE NO IDEA WHAT THIS LOGIC IS FOR. WHY DO WE CHECK FOR THE ABSOLUTE VALUE OF TRANSLATION.X ??? IT IS SIMILAR TO THE LOGIC of translation.x < menuWidth / 2 BUT THE RESULTS ARE SWAPED (open menu or else close).
pawelcichonski
4 years ago
"if abs(translation.x) < menuWidth / 2" Without this logic when we drag it in the middle it stays in the middle. When we replace abs(translation.x) with just translation.x then it slides to one side. Trying to figure out why we need to use abs(translation.x). Any hints?
pawelcichonski
4 years ago
I think I can see where this is going. This is when we want to close the menu to the left. And if we would use just translation.x (instead of abs(translation.x)) and then drag to the left to close the menu then letting go in the middle would not close the menu. So I seem to understand but then again... how do you even come up with that logic in the first place? :)
Brian Voong
4 years ago
rebeloper
4 years ago
You're just brilliant with StackViews
rebeloper
4 years ago
P.S. timestamps on the comments seem to have a bug
Brian Voong
4 years ago
rebeloper
4 years ago
Interestingly it is ok on mobile
malrhex
4 years ago
I have no idea why my menu don't want to load the header ~_~
malrhex
4 years ago
now doing view hierarchy debug, it just doesn't load. nutty
Brian Voong
4 years ago
malrhex
4 years ago
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { // let customHeaderView = CustomMenuHeaderView() // return customHeaderView let v = UIView() v.backgroundColor = .orange return v } override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 200 }
malrhex
4 years ago
actually, it is exactly as all your courses. Now that I know how to debug view hierarchy I was feeling powerful but, looks like there is more to learn. haha! The class simple class MenuController: UITableViewController but this looks like some weird behaviour I don't know from where, it loads the separator lines but not the header
malrhex
4 years ago
and the best, haha! my future is over this, like if I get a job with a decent app I'll be super happy! I'll be no more poor again! haha But I have to leeeeeaaaaarrrrrnn lots of it. I can't be in a job where I don't know what is happening with something that I have built. well.. 27 coming for me. hurry up!
Christopher J. Roura
3 years ago
Hi Brian, I tweaked the handleEnded function just a tad for some better (I think) calculations. Currently, I found a bug that if you open the menu and then pan really fast towards the right the menu closes even though it should be open. And when the menu is closed and you pan really fast towards the left the menu should stay close but instead opens. I thought this was because of the absolute value calculation with the velocity and originally didn't think it would matter but after making a tweak with lines 69 and 79 I found it fixed the bug. I didn't want to change that math but instead wanted to check for the translation direction to allow the velocity to only work when panning in the right translation.x direction. So with my way the menu only opens when the speed is greater than the threshold and the translation is positive. It will respectively only close when the translation is negative. if isMenuOpened { if abs(velocity.x) > velocityOpenThreshold && translation.x < 0 { closeMenu() return } if abs(translation.x) < menuWidth / 2 { openMenu() } else { if translation.x > 0 { openMenu() } else { closeMenu() } } } else { if abs(velocity.x) > velocityOpenThreshold && translation.x > 0 { openMenu() return } if translation.x < menuWidth / 2 { closeMenu() } else { openMenu() } }
Manikanta DG
3 years ago
nice videos
HELP & SUPPORT