Example of a ScrollView setup via the storyboard

Max_MacFarlaneMax_MacFarlane USMember ✭✭

Hi,

I was wondering if anyone has any small project which contains an example of a scroll view being implemented correctly within the storyboard?

I'm just struggling to set one up via the storyboard it just doesn't work as I expected.

Any help is greatly appreciated thanks!

Best Answer

Answers

  • Max_MacFarlaneMax_MacFarlane USMember ✭✭

    @TedRogers

    I just want to say thank you very much for making this sample project. After spending about an hour taking your project apart and trying to understand the process I have managed to recreate your app successfully. Whoop! Now i just need to apply it to my app.

    Once again thank you for taking the time for making this and I hope it helps others too.

  • Max_MacFarlaneMax_MacFarlane USMember ✭✭

    @TedRogers

    Was just wondering when you do design using the storyboard do you do it using visual studio or do you load the storyboard file in xcode?

  • TedRogersTedRogers USMember ✭✭✭✭
    edited June 2017

    @Max_MacFarlane I use XCode. I have never gotten the hang of creating constraints in the iOS Designer. I find being able to create constraints in a document view vs. graphically a necessity.

    And you are very welcome. I have answered a number of questions in these forums regarding creating scroll views and it would have helped if I had created this sample a while ago.

    The trick which I am sure you discovered is to constrain one dimension of the content view to the view that is the parent of the scroll view.

  • Max_MacFarlaneMax_MacFarlane USMember ✭✭

    @TedRogers

    Yes that was the issue and it wasn't until i loaded the storyboard in xcode that I was able to set the width of the content view to match the parent of the scroll view.

  • MatteoRisoMatteoRiso USMember ✭✭

    @TedRogers said:
    @MaxMacFarlane.8215

    Since so many people struggle with this I whipped up an sample project. This has a scroll view that has a single container view child which in turn has 4 children. The total height of the children is 1000 so it will scroll on a iPhone7 simulator.

    Enjoy.

    @TedRogers you saved my day :) Thank you very much!

  • @TedRogers said:
    @MaxMacFarlane.8215

    Since so many people struggle with this I whipped up an sample project. This has a scroll view that has a single container view child which in turn has 4 children. The total height of the children is 1000 so it will scroll on a iPhone7 simulator.

    Enjoy.

    Thanks for this sample. I have tried many attempts to get this to scroll horizontally on any simulated device and have not been able to get it to work. I see that all combined inner-views (250 + 300 +150 + 301 = 1001) exceed the scrollview height. I changed the inner-view widths from 375 to 600 as well as the inner-container view from 375 to 600 in hopes to get this to scroll horizontally with no luck.

    This seems pretty straight forward: Make the inner-container view larger than the scrollview and that will automatically invoke horizontal/vertical scrolling. It's just not panning out for me.

    What's the secret sauce?

    Using Visual Studio Professional 2017 for PC + Xamarin.iOS + Xcode 10.0 |and| I am developing the storyboard (your sample code) in Visual Studio on my PC.

  • TedRogersTedRogers USMember ✭✭✭✭
    edited October 2018

    @donaldashworth

    Changes to make this work:

    1. Change container view to match main superview height instead of width
    2. Change constraints to go left to right instead of top to bottom.

    Number 1 above is really the magic to making scrollviews and auto layout constraints work. Since the container view must be attached to all four sides of the scroll view for things to work, it has to get its non-scrollable size from somewhere. You can either set it to equal height of the main view or constrain it to the top and bottom layout guides of the main view.

    See attached project.

  • @TedRogers said:
    @donaldashworth

    Changes to make this work:

    1. Change container view to match main superview height instead of width
    2. Change constraints to go left to right instead of top to bottom.

    Number 1 above is really the magic to making scrollviews and auto layout constraints work. Since the container view must be attached to all four sides of the scroll view for things to work, it has to get its non-scrollable size from somewhere. You can either set it to equal height of the main view or constrain it to the top and bottom layout guides of the main view.

    See attached project.

    Thank you kind Sir. That works great. I am having difficulty combining horizontal with vertical scrolling. I think I may have discovered my problem. I am not properly defining my constraint relationships. In the end I am going to present the User with a form that is larger than their viewing area. So, imagine the red, yellow, green and purple UIViews arranged in a square pattern instead of linear. I have this working now...but really do not understand why it is working ;o)

    I will figure this out. Thanks again for your tutelage.

  • TedRogersTedRogers USMember ✭✭✭✭
    edited October 2018

    If you want to scroll in both directions, then you remove number 1 in my steps above. That constraint ensures you only scroll in one direction. In that case your content must drive the size of the container view in both directions.

    Here is modified scroll view app to scroll in both directions.

  • @TedRogers said:
    If you want to scroll in both directions, then you remove number 1 in my steps above. That constraint ensures you only scroll in one direction. In that case your content must drive the size of the container view in both directions.

    Here is modified scroll view app to scroll in both directions.

    Yup. That worked. I owe you a beer ;o)

  • TedRogersTedRogers USMember ✭✭✭✭

    "I like beer, I still like beer" - LOL

  • AssegdAssegd Member ✭✭✭

    @TedRogers

    I have also downloaded the sample project you did. It is working properly. I am trying to figure it out how u set it up, things like structure of the scrollview, maybe the UIviews and the labels

    I will really appreciate it if you give me some hints on how i can set up all the controlls in the storyboard. So that the layout(orientation) of the Phone(simulator) doesnt affect the design of the application

  • OnedayOneday GBMember ✭✭

    Hi All

    I downloaded Ted Rodgers sample and can get it to work, but I can seem to work out how it works as my effort does not scroll. I attach my storyboard effort and hope that some one can give me pointers to get it working.

    Cheers all

Sign In or Register to comment.