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: [https://github.com/viettrungphan/BottomMenu.git](https://github.com/viettrungphan/BottomMenu.git%5C)
