Xamarin.iOS ScrollView please help

ervaerva USMember ✭✭

Hi Guys!

I really need your help. I'm new at developing Xamarin.iOS apps and now I'm totally stuck. I cannot get the hang of how to implement a dynamic ScrollView in iOS, it was fairly easy to implement on Android.

So what I'm trying to implement is a view that contains mostly text (that will be quite long, hence the scrolling, but also two buttons.
Here is a gif in Android showing what I'm trying to achieve:

The view is like this:

Header
Long text
Copyright button
 -- Copyright text 
Terms of usage button
 -- Terms of usage text

I have struggled with the scrolling so long and I really need your help. All of the text properties are getting bound to the view by binding with MvvmCross so the view can't be with hard-coded heights and widths, it needs to adjust properly.

Can somebody please show me with a sample project how to implement it?

The view needs to be in a .xib view (because of MvvmCross) and it cannot contain a UIViewcontroller.

So the solution needs to be in a simple UIView
I'm working on a Windows, with Visual Studio 2015 enterprise, and I cannot use a Mac (and Xcode) other than to compile my code with.

What I've tried is a solution like this:

UIView called "MyRootview"
-- UIScrollView called "MyScrollView"
-- -- UIView called "MyContentView"

Can you please help me?

Posts

  • ervaerva USMember ✭✭
  • descorpdescorp RUUniversity ✭✭
    Hi @erva

    Indeed iOS is a bit different from Android in terms how view behave in case of resizing. Foldable items is one of most painful examples.

    Simplest ways to implement it:
    1) Put all views inside your ScrollView into StackView and show/hide them when needed. StackView must be attached to sides of ScrollView with width equal to container's width.
    2) Use TableView with auto-height rows in place of ScrollView and reload collection when needed.

    P.S. sorry no links, but if you have any questions - let me know
  • TedRogersTedRogers USMember ✭✭✭✭
    edited July 2017

    I posted a UIScrollView sample on this thread:
    https://forums.xamarin.com/discussion/98180/example-of-a-scrollview-setup-via-the-storyboard

    @erva Post questions here. Once you get the hang of it, it's not too bad, but it is more difficult than Android.

  • ervaerva USMember ✭✭

    @descorp I will try your solution today, thanks.

  • ervaerva USMember ✭✭
    edited July 2017

    @TedRogers
    I see a problem with your solution.
    My label is getting databind with Mvvmcross programmatically so when the view is getting drawn, I dont know the height of the label. I need the view containing the label to grow depending on the length of the text.
    How would you solve that?
    Is it I need to do in ViewDidLayoutSubviews()?

  • ervaerva USMember ✭✭

    @DELPINSUSAIRAJ
    Thanks for your link, but the is the height of a label that gets databound programmatically.
    When the view is getting drawn, I don't know the height of the view. How would you solve that?

  • ervaerva USMember ✭✭

    @adamkemp Can you please help?

  • TedRogersTedRogers USMember ✭✭✭✭

    @erva Please find attached another version of that ScrollViewApp that uses a UILabel. I added buttons to Add Text and Remove Text to hopefully simulate the late binding behavior of MvvmCross. As you can see the UILabel height grows and contracts when the text is added or removed and the scroll view works just as it should.

    Hope it helps.

  • ervaerva USMember ✭✭
    edited July 2017

    @TedRogers
    Thanks so much for your help but I cant seem to get it right. Can you do a example, not in storyboard but in a simple xib. file?
    The view cannot have any viewcontrollers, only a simple - "UIView"

  • TedRogersTedRogers USMember ✭✭✭✭
    edited July 2017

    @erva I don't really have time to put together an example like that but should be pretty easy to use the same technique. They're all UIViews in the end. What is the problem you are having? Make sure your UILabel is set to 0 lines and has word wrap on. Also, make sure you are using auto-layout.

    If you provide me with a sample, I will try to make it work. How about that?

    No MvvmCross in it though.

  • 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

  • TedRogersTedRogers USMember ✭✭✭✭

    @assegd Can you ask a specific question or upload a sample project you are having trouble with?

  • AssegdAssegd Member ✭✭✭

    @TedRogers
    Thanks for the reply!

    So far, all of my pages in my app does't have a scroll view as a background. I realized that i need the scroll view, because everytime the iphone(simulator) changes its orientation i am facing a big problem. The layout n design of the app is varying.
    I just want to know how to do add a scroll view n add all the contents under it, i just want a simple step by step way of doing it.

    Because your project works perfectly, i want to replate that on my project too

  • TedRogersTedRogers USMember ✭✭✭✭
    1. Change the size of your main view to be freeform, so you can resize to fit your content. You don't have to do this but it makes it much easier to work with.
      1.Create a container view that contains all your content.
    2. Create autolayout constraints so that your content is fully constrained to your container view top to bottom. This assumes you want to scroll vertically.
    3. Your container view should be constrained to top, bottom, leading, trailing of scrollview.
    4. Your scrollview must be constrained on all sides to your superview
    5. Now here is the most important part: constrain the width of your container view to the width of the main superview. (i.e.- the parent of the scrollview)
Sign In or Register to comment.