CODEWITHSUNDEEP
iosiphoneswiftuiview
redcurry
redcurry

Reputation: 2497

How can I implement the iPhone Photos editing drawer?

In the Photos app, when editing an image (see screenshot) a bottom drawer slides up with options. I'd like to implement this functionality for my app. What would be the best way to do this?

I'm thinking of creating a UIView with a blurring effect. However, I'm not sure how to create the sliding up animation. Any hints would be appreciated.

Related question: Because this UIView will cover up much of the main view, is it possible to edit it outside of the main view (in the storyboard), so it doesn't obstruct the main view?

iPhone Photos

Upvotes: 0

Views: 44

Answers (1)

user7014451
user7014451

Reputation:

I'm working - actually polishing - something similar. My style is to develop this sort of thing in code. If you go that route, your second question is moot.

In code I'm creating a tool bar that rotates from bottom to right on orientation using auto layout. This tool bar - like the control boards that slide out - are subclasses of UIVisualEffectView for the blur you are talking about. I like the "light" effect for my app but from the screenshot you have that's probably "dark".

The "boards", UIVisualEffectViews also, have UIButton, UISlider, and UILabel subviews. This makes the controls show up above the blur.

Using auto layout, I create two arrays (plus the slide arrays) of constraints - on for portrait, one for landscape. (This is only needed this way for rotation like I described above. If you are good with keeping things on the bottom in landscape, you may get away with no arrays.) I activate/deactive according to the orientation.

Here's the key: To "slide in" a board I set the height (or width in landscape) to zero and hide the subviews and then animate. To slide out the board I do the opposite. With several boards I (again) use deactivate/activate, but you may be able to use isActive = false/true.

After setting the constraints, I simply animate the view. I do this from the tool bar, so the code is:

UIView.animate(withDuration: 0.3) { self.superview?.layoutIfNeeded() }

If you do this from the view controller, adjust the call to layoutIfNeeded().

It's a lot of coding, but whether you use IB or straight code you'll have a lot of work in front of you. I think you'll also find setting and testing the constraints through IB a bigger chore than if you do it straight in code.

Upvotes: 1

Related Questions