Help with auto layout in a scrollview

I have a nav bar at the top and a tab bar at the bottom of my view. I have a scrollview that has two stackviews in it. The top stackview holds 9 holes of golf scores in a horizontal stackview inside a vertical stack view. The bottom stackview holds the last nine holes of golf scores including totals. I done the UI in storyboard on an IPhone 8 template. When I run it on the Iphone 8 the layout works perfect. By perfect I mean that the 9th hole in the top stack stops right on top of my tab bar. Then when I scroll up with the paginated scrollview the 2nd 9 holes winds up perfect also on top of my tab bar at the bottom of my view. The problem is that when I run it on an Iphone 8 plus the scrollview stops toward the bottom of the 10th hole. The question how can I get the scrollview to stop the 9th hole on top of my tab bar reguardless of what device I run it on. Thanks

I would think just get the screen device size and use offsets, but surely there is a better way.

Replies

Oops, hard to read!


Have you set the content size of the scroll view high enough ?


Please show code, that will help.

For testing, do exactly the same in another view without nav and without tab.

That will simplify testing.


Do you get the same problem ?

If so, show the whole code of the controller and explain the constraints you have set.

A likely cause is that the constraints you defined are adapted to iPhone8 but no more for 8Plus.

Did you do the test ?

I am doing it all in storyboard. I don't think I am allowed to post pics. I have View,Scollview,A top stackview for front 9, A bottom stackview for back nine and totals. I have used autolayout with stackviews set at vertical,fill,fill equally, no spaces. This works great on iphone 8, but on the iphone 8 plus it works great from top to bottom, however the scrollview pagination now stops on the bottom of the 10 hole. The bottom of the scrollview still works fine as the bottom and the totals stop right above the tabbar, which is what it is supposed to be doing. I need to change the spacing on the top stackview just a little when it is running on the iphone 8 plus. But I cannot figure out how, just yet. Any suggestions would be very appreciated.... I think the way to fix it is to set the stackview spacings for the first nine or maybe all of them to be adjusted to a suitable height of the vertical scoreview that would let the 9th hole stop at the bottom of the tabbar just like it does on the iphone 8. Thought about putting both of these two stacks into another stack, but I think that will leave me with what I have now.Thanks......

Could you detail exactly the constraints you have set for the scrollView and its content ?


A similar question was handled in this thread.

Have a look.

https://forums.developer.apple.com/thread/127532

View

Horizontal

Trailing Space to : Scrollview

Leading Space to : Scrollview


Vertical

Bottom Space to : Scrollview

Top Space to : Scrollview

Equal Heights to : Scrollview


Scrollview

Horizontal

Trailing Space to : Stack View

Trailing Space to : Stack View

Leading Space to : Stack View

Leading Space to : Stack View

Equal Width to : Stack View

Trailing Space to : SuperView

Leading Space to: SuperView


Vertical

Bottom Space to : Stack View

Top Space to : Stack View

Bottom Space to: SuperView

Top Space to : SuperView

Equal Height to: SuperView


Top Stack View

Horizontal

Trailing Space to : Superview

Leading Space to: Superview


Vertical

Top Space to : Superview

Bottom Space to : StackView


Bottom Stack View

Horizontal

Trailing Space to : Superview

Leading Space to: Superview

Equal Width to : Superview


Vertical

Bottom Space to : Superview

Top Space to : Stack View

Let me reformat your text again to make it readable …


I am doing it all in storyboard. I don't think I am allowed to post pics.

No pics on this forum, unfortunately


I have View,Scollview,A top stackview for front 9, A bottom stackview for back nine and totals.

What is the hierarchy ? Is it this one ?

- View

- ScrollView

- Top Stack

- Bottom Stack


If this is it, let"s look at constraints:


Scrollview

Horizontal

Trailing Space to : Stack View // Which stackView ? Top Stack ?

Trailing Space to : Stack View // Which stackView ? BottomStack ?

Leading Space to : Stack View // Which stackView ? Top Stack ?

Leading Space to : Stack View // Which stackView ? BottomStack ?

Equal Width to : Stack View

Trailing Space to : SuperView // Do you want scroll area to occupy the whole screen ?

Leading Space to: SuperView


Vertical

Bottom Space to : Stack View // Which stackView ? Top Stack or BottomStack ?

Top Space to : Stack View // Which stackView ? Top Stack or BottomStack ?

Bottom Space to: SuperView

Top Space to : SuperView

Equal Height to: SuperView // This is redundant with the 2 above


Could you show how you set the ScrollView contentSize ?

Yes, the hierarchy you listed above is right.

Bottom

Top

Bottom

Top

Bottom

No, Just above my tab bar.

Bottom

Top

Did not set a conent size to start with. I used a vc with freeform of 375 X 1200. Worked just perfect with autolayout with nav and tab bar running on iphone 8. I then set the content size on the iphone 8 plus in viewdidload but all I could get that to do was shorten up the bottom, thus that would not help the "Top Stack" stop on top of the tab bar. I am sorry, as I have been away from coding so long especially using scrollview with the new stackview. Let me take some time and do some reading (should have done that first I guess) and then maybe I could communicate better with your about your questions.

I made a scrollview with textfields for my holes in a horizontal stackview with 4 scores for 4 people going across horizontally in the view plus 1 textfield for Hole number and 1 texfield for par number making a total of 6 textfields acorss. Don't remember if I told you that I have 12 horizontal stacks (for the 4 players names or score and the hole number and a par textfield and then placed them in the (Top Stack) vertical stack , the first holes scores going across horizontal and so on down vertiaclly to the Horizontal (Bottom stack). 1st stack for names,2nd for hole 1,3rd for hole 2,etc, then total and total on front then the skins are totalled making 12 horizontal stacks. Then the same for the Bottom stack. The (Bottom Stack) has 13 horizontal stacks in a vertical stack (Bottom Stack). I think I have made a mess of something that I feel like should be fairly easy to do. I want the user to key in scores on front nine (Top stack) then use the scrollview to "Paginate" to the top of the (Bottom stack to key in the back nine). This works great in the iphone 8, but not in the iphone 8 plus. Never run into this situation before. I have used vary for traits and size classes. But I still don't think this should be very difficult to accomplish for someone that knows a lot more about coding than me.

You'd you post a mail address so that we can share projects by mail ? That would be much easier and efficient.