Reproduce Apple Find Me Bottom Menu View

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:

1. Bottom View can update itself height follow user finger position when dragging (Pan Gesture)
2. 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)