Reproduce Apple “Find Me” Bottom Menu view

Recreate Find Me Bottom Menu view in few lines of code.

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\

Share this post

Subscribe for “The Next Bytes” where Han & the crew draft up our observation in the industry.

We’d love to work with you.

Drop us a message if you need any helps from the Dwarves

Let’s build with us