Xamarin iOS - Fit scrollview's contents within the scrollview

Question

This may be a fairly simple solution but none of the suggestions here work for me. I have a UIScrollView inside a UITableViewCell. I'm adding dynamic images from a list into the scrollview like this.

public void InitViews()
{
    scrollViewThumbNails.ContentSize = 
            new SizeF((float)scrollViewThumbNails.Frame.Size.Width/listCount * listCount, 
                      (float)scrollViewThumbNails.Frame.Size.Height);

    for (int i = 0; i < listCount; i++)
    {                                       
        var imageView = new UIImageView
        {
            Frame = new RectangleF((float)i * (float)scrollViewThumbNails.Frame.Size.Width / listCount, 0,
                        (float)scrollViewThumbNails.Frame.Size.Width / listCount, (float)scrollViewThumbNails.Frame.Size.Height),
            UserInteractionEnabled = true,
            ContentMode = UIViewContentMode.ScaleAspectFit
        }; 

        //call method to load the images

        var index = i;
        imageView.SetImage(
            url: new NSUrl(allItems[i].AbsoluteUri),
            placeholder: UIImage.FromFile("placeholder.png"),
            completedBlock: (image, error, type, url) =>
            {
                //when download completes add it to the list
                if (image != null)
                {
                    allImages.Add(image);

                    scrollViewThumbNails.AddSubview(imageView);
                }
            });
    }

I found a suggestion here which advices to set the content size of the scrollview, based on the total number of subviews in ViewDidAppear like this:

public override void ViewDidAppear (bool animated)
{
    base.ViewDidAppear (animated);

    CGRect contentRect = CGRect.Empty;

    foreach(UIImageView view in scrollViewThumbNails.Subviews)
    {
        contentRect = CGRect.Union(contentRect,view.Frame);
    }

    scrollViewThumbNails.ContentSize = contentRect.Size;
}

The imageViews are still spaced out and do not start from the edge of the screen/scrollview as shown in my screen shot below. I would like for the first image to always be positioned at the origin of the scrollview and wouldn't want the spacing between each image. How can I adjust the scrollview based on the size of its contents?

Can someone show me what I'm missing? Thanks.

score 0 · Answer 1 · edited May 23 '17 at 12:09

I found a solution here where I calculate the total height and width of all the views and assign that as the content size of the scroll view in ViewDidLayoutSubviews:

Solution

public override void ViewDidLayoutSubviews ()
{
    base.ViewDidLayoutSubviews ();

    try{

        float scrollViewHeight = 0.0f;
        float scrollViewWidth = 0.0f;

        foreach(UIImageView view in scrollViewThumbnails.Subviews)
        {
            scrollViewWidth += (float)view.Frame.Size.Width;
            scrollViewHeight += (float)view.Frame.Size.Height;
        }

        scrollViewThumbnails.ContentSize = new CGSize(scrollViewWidth, scrollViewHeight);
    }
    catch(Exception ex)
    {
        Console.WriteLine(ex.Message+ex.StackTrace);
    }
}

Xamarin iOS - Fit scrollview's contents within the scrollview

1 Answers1