Engineering
November 08, 2019

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:

image1

What we should do:

Bottom View can update itself height follow user finger position when dragging (Pan Gesture)

  1. 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.

image2

Add a bottom constraint for PanView, make outlet for our PanView and bottom constraint. (don’t worry if Xcode warning ⚠️ conflict constraint)

image3

Now let's coding.

Define some variables to set menu height

image4

Add pan gesture to panView and handle pan event.

Update height of menu base on user dragging direction and position

image6

Setup our UI and init heigh for menu in aweakFromNib

image7

Finally, test out the menu by add to the view controller

image8

image9

Full source code:

https://github.com/viettrungphan/BottomMenu.git

Work with us

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

Let's build something