Tabman icon indicating copy to clipboard operation
Tabman copied to clipboard

Feature Request - TabItem transition enhancement

Open otymartin opened this issue 5 years ago • 2 comments

@msaps This request is an extension to #244

To recap - It called for TabItem's to interpolate along as user swipes through childControllers. It's largely been implemented and TinderBar demonstrates it well.

Two things are missing from this:

  • Transition Easing
  • Title Icons

TABITEM TRANSITION EASING

Currently TinderBar interpolates it's TabItem's at the same rate from one position to the next. The positions being one of (Left, Center, Right). As you can see from the Gif above, with transition easing, the PageTitle's are easing into position depending on their destination.

screen shot 2019-03-03 at 2 37 24 pm

I managed to achieve it with my own custom TabView (Demo project here which I doubt still works. I layout each TabItem in their initial position, then as user for example swipes left, the TabItem's naturally shift to the next position based on which page is coming to the center. Left to OffLeft, OffRight to Right will naturally transition slower than Center to Left and Right to Center The easing effect is therefore just a function of how far each TabItem has to travel to their next position. I think it makes for a way more intuitive swipe navigation experience and makes the TabItems feel very fluid. My logic sucks though @msaps I think you are way better at this.

TITLE ICONS

The second request is for TabItems to optionally interchange their titles for Icons. This could be both cosmetic but is mainly helpful in Left and Right positions where a title may be too long and no longer looks nice. As you can see in my gif above, when the TabItem comes to the center, it always defaults to it's text title. For some pages when they transition to either left or right of the page, I display an Icon along with a shortened title like a number. Again my logic for this sucks, I add two UILabels on top of a UIButton and add the shorted title and Icon as an AttributedString. When the Button transitions to the left, I reveal the LeftIconLabel with the Icon on the left, when it transition to the right I reveal the RightIconLabel with the icon on the right. and When its center I hide both Label and show the original button's title. Once again @msaps I think you are way better at this than me :)

otymartin avatar Mar 03 '19 20:03 otymartin

@otymartin seem to have lost the images! Sorry for taking so long to reply - will try and get some of this added 🚀

msaps avatar Mar 16 '19 09:03 msaps

@otymartin

let barView = TMBarView<TMHorizontalBarLayout, TMLabelBarButton, CustomBarIndicator>()

bla bla barView.layout.alignment = .center

sugitatestblue avatar May 10 '21 08:05 sugitatestblue