Today we are going to recreate Find Me Bottom Menu view in few lines of code.
Device list Bottom Menu has three states: Collapsed, HalfExpanded and Expanded like images below:
What we should do:
- Bottom View can update itself height follow user finger position when dragging (Pan Gesture)
- Bottom View can automatically resize its height base on the direction of dragging and position compare to “half position”
Create an XCode project, add a new UIView and named it to BottomMenuView.
Add a PanView as a subview of BottomMenuView and set constrain leading, trailing, top equal to superview, set height constrain to 44.0, PanView using to tracking user finger using UIPanGestureReconizer.
Add a bottom constraint for PanView, make outlet for our PanView and bottom constraint. (don’t worry if Xcode warning ⚠️ conflict constraint)
Now let's coding.
Define some variables to set menu height
Add pan gesture to panView and handle pan event.
Update height of menu base on user dragging direction and position
Setup our UI and init heigh for menu in aweakFromNib
Finally, test out the menu by add to the view controller
Full source code:
Subscribe for “The Next Bytes” where Han & the crew draft up our observation in the industry.