1

We're creating an application with a design concept similar to Snapchat. On the base level, we have three Views that are supposed to be horizontally swipeable, with the camera view being in the middle.

The Views are also supposed to be selectable via a Tab Bar. While the views are being swiped, the transition should also manipulate the color of the Tab Bar aswell as the size of some elements on the Tab Bar, similar to how Snapchat does it:

Snapchats View Elements during transition

Our UI Designer made a mockup for our specific application in Adobe XD:

Mockup of custom View Elements during supposed transition

The button has been made independent from the Tab Bar, as it is supposed to do some interaction with the controller beneath, even if the Tab Bar disappears.

I've been trying to figure out how to best implement a navigation like this for about 10 hours now. I've come as far as trying to create my own AnimationController for animating between Tabs coupled with a custom InteractionController, but those have been unsafe and buggy at best, and I still haven't figured out how to animate the button at the same time as the views.

Has anyone tried to implement a design similar to this and succeeded? Could you lead me in the right direction of which methodology to use to achieve a design like this?

Thanks in advance everyone.

TomQDRS
  • 875
  • 1
  • 7
  • 20
  • 1
    If you dont like 3rd parties, use uiscrollview with paging enabled, override scrollViewDidScroll and update you tab buttons position and scale. – ChanOnly123 Aug 01 '18 at 11:00
  • @ChanOnly123 I've been considering something like that for a while, it looks like a hacky way that might also be unsafe regarding memory, but I'll try it out next, thanks for the suggestion! – TomQDRS Aug 01 '18 at 11:16
  • https://developer.apple.com/documentation/uikit/uiviewcontrolleranimatedtransitioning and make it interactive. Easier than you think – agibson007 Aug 01 '18 at 14:56
  • did you solved it – Sultan Ali Mar 07 '19 at 12:51
  • @SultanAli yes I did, but it is too long to post as an answer. I basically followed ChanOnly123's advice. I am using a UIScrollView with paging and use "scrollViewDidScroll" to calculate animation values. – TomQDRS Mar 07 '19 at 12:56
  • 1
    hmmm... I think I have to work a lot to achieve this – Sultan Ali Mar 07 '19 at 13:00

0 Answers0