I have a show stopper from using this :( please kindly help, project attached. Not working correctly with TabView

[waelsaad]

Hi, I've been looking forward to using this in a project for sometime until I faced an issue when embedding a nice TabView component.

The problem:
The TabView contains 3 views. Each view has a different number of rows so obvoiusly different content height for each view. The Tabview is not displaying the full content because it needs each view to be wrapped with a ScrollView of its own which will clash with the Card scrollView upon scrolling :(.

I thought as an alternative, I would try to calculate the height dynamically of each view to set the height of the TabView whenever the user switches the index but I am unable to get it right. and also if I do that it messes with the slide transition.

I am not sure what the best solution is I hope there is a way or somehow when we scroll the scrollview of each view to also scroll the card ! I am out of attempts at this stage. hoping someone could help with a solution.

I've attached the sample project just navigate to the Banking Screen you'll see the code there and a few extra things.
ScalingHeaderScrollView.zip

[f3dm76]

Hey @waelsaad, if I replace ScalingHeaderScrollView in your code with a regular ScrollView - it doesn't work either. Could you please make a sample code where your TabView works as you want it to, scrolling and everything? And from there I can work on putting a scaling header on top of it.

[waelsaad]

Hi @f3dm76 sure will get back to you as soon as I can. Thank you.

[waelsaad]

Hey @f3dm76 I am hoping as the user scrolls the content within any of the Tab views, the card folds and the topbar will be always just below the card as it scrolls and folds.

couple of things to note please:-

1- There is now a new file BankingScreenStatic.swift which has the simple logic for a working Tabview with content.
2- I am hoping as I have done to use navigationBarItems or .Toolbar for the buttons at the top and control the top padding of the card. It needs to work fine on iPhone SE also.
3- Please be aware of this line in case it causes any issues as you try to scroll the topBar but hopefully it should be ok
configuration.displayMode = .atTopOfScreen(topPadding: -20)

Thank you so much for assistance I am really hoping for this to work.

[f3dm76]

@waelsaad, what you have here is three separate scroll views - such an arrangement cannot be stored in ScalingHeaderView. ScalingHeaderView has its own scrollView, and its contents cannot have any scrollViews or it will be a mess. A scrollView in another one - is always a mess... So what you can do is forbid the scrolling in your views, much like AutosizingList does. Basically the view you store in ScalingHeaderView shouldn't have scrolling and it should know its own fixed size - just like putting subviews into a regular scrollView. So if you get your example working with one scrollView, then it will also work with ScalingHeaderView.

[waelsaad]

@f3dm76 that's right that's what I thought initially and this is what I did or tried to do anyway:-

1- If you simply remove the ScrollView from each of the little subviews (in the views folder) as done in the first project I attached that way we could only rely on the ScalingHeaderView scroller.
2- I tried to get the TabView to behave like an AutosizingList and workout its own height for each of the subviews but this is where I couldn't work out.

I couldn't get the TabView working with ScalingHeaderView, the TabView needs to know its own height for each view dynamically based on its content so ScalingHeaderView Scroller can scroll correctly the full content and this is what I am having an issue with. I hope you understand what I mean.

[waelsaad]

Hi @f3dm76 , I've worked out a very ugly dodgy hack which I am not happy with but I hope this might get you to help see if there is a better solution please.

The TabView contains 3 views each has 100 rows, 50 rows and 10 rows respectively. the row height is hardcoded and is about 41.0 so I set the height of the TabView dynamically based on the row height * the number of rows.

but I lose the TabView animation slide transition this way and I really don't want that, there must be a better way. or a way to bring the transition back at least I hope so. In this version the TabView worksout the height dynamically using BankingScreen.Swift and changes are in contentView method.

Thanks again.

[f3dm76]

Hey again @waelsaad, I'm afraid there is no good solution while using TabView - it has limitations of its own. Attached is the best I could do, but I'd say it's not good enough, I'm just attaching it in hopes it might give you some hints... I'm guessing you just need the ability to swipe left-right, why don't you just add these gestures manually, without the TabView?
ScalingHeaderScrollView 3.zip

[waelsaad]

Hi @f3dm76 thank you for the attempt and assitance, I also reliazed that TabView is not the best for this. However I truned my workaround into a proper solution and I can now detect the content height dynamically and scroll the content along with the card as intended.

I found out that whether you use a TabView or a custom PageViewer for page view swipes you still need to set the height dynamically for the component that is hosting the views, whether its a TabView or something else, so it seems my workaround above is sutiable to my knowledge so far.

I am just trying to find a way to get the slide transition working if I find a compatible custom PageViewer or implement one myself with custom gestures as you suggested but that's a bonus for me right now, the main issue was working out the content height for each view and scroll correctly at the same time.

Thanks again, really appreciate you looking into this.