xamarin.iOS Vertically scroll through Images

Question

I'm attempting to build a UI in Xamarin.iOS which allows a user to vertically scroll through a list of images. I'm unsure what the best approach would be. I have looked at using UITableViewSource however I'm not sure if this would be the best approach.

The data that I want to display is not really tabular it's just a list of images. Is there a way to mould UITableViewSource to just show an image that's as wide as the screen, allowing the user to scroll down through them.

Or would a better approach be adding a ScrollView and adding images to that allowing a user to just scroll down through the scrollView?

Any advice or code samples would be greatly appreciated.

Answer 1

You can use the UITableView to implement what you need, this is a sample.

At first finish you can invoke the sample code like this:

public override void ViewDidLoad ()
    {
        base.ViewDidLoad ();
        // Perform any additional setup after loading the view, typically from a nib.

        List<string> dataList = new List<string> ();
        for (int i = 0; i < 20; i++) {
            //Make sure all images is already in the Resources folder
            dataList.Add ("test.png");
        }

        UITableView myTalbeView = new UITableView ();
        myTalbeView.RowHeight = 80;
        myTalbeView.Frame = UIScreen.MainScreen.Bounds;
        myTalbeView.AllowsSelection = false;//If you don't want any image be selected, use it.
        myTalbeView.SeparatorStyle = UITableViewCellSeparatorStyle.None;//remove the under line
        myTalbeView.Source = new MyTableViewSource (dataList);//set source for tableView
        this.View.AddSubview (myTalbeView);
    }

And this is MyTableViewSource.cs:

public class MyTableViewSource : UITableViewSource
{
    private static string cellReuseID = "MyTalbeCell";
    private List<string> dataList;

    public MyTableViewSource(List<string> _dataList)
    {
        this.dataList = _dataList;
    }

    public override nint RowsInSection (UITableView tableview, nint section)
    {
        return dataList.Count;
    }

    public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
    {
        MyTableCell cell = tableView.DequeueReusableCell (cellReuseID) as MyTableCell;
        if (null == cell)
            cell = new MyTableCell (UITableViewCellStyle.Default, cellReuseID);
        cell.ImageName = dataList [indexPath.Row];
        return cell;
    }
}

And this is MyTalbeCell.cs:

public class MyTableCell : UITableViewCell
{
    private UIImageView imageView;

    private string imageName = "";
    public string ImageName{
        get{ 
            return imageName;
        }
        set{ 
            imageName = value;
            imageView.Image = UIImage.FromFile (imageName);
        }
    }

    public MyTableCell (UITableViewCellStyle style,string reuseID) : base(style,reuseID)
    {
        imageView = new UIImageView ();
        this.AddSubview (imageView);
    }

    public override void LayoutSubviews ()
    {
        imageView.Frame = this.Bounds;
    }
}

Hope it can help you.

If you still need some help, just leave the question here, I will check latter.