Customizing a cell's appearance

We are now going to design our cells that will appear for every model found in the TableSource class. Add a new .cs file for our custom UITableViewCell.

Note

We are not going to use a .xib and simply build the user interface directly in code using a single .cs file.

Now for the implementation:

public class GalleryCell: UITableViewCell   
    { 
        private UIImageView _imageView; 
 
        private UILabel _titleLabel; 
 
        private UILabel _dateLabel; 
 
        public GalleryCell (string cellId) : base (UITableViewCellStyle.Default, cellId) 
        { 
            SelectionStyle = UITableViewCellSelectionStyle.Gray; 
 
            _imageView = new UIImageView() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
 
            _titleLabel = new UILabel ()  
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
 
            _dateLabel = new UILabel ()  
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
 
            ContentView.Add (imageView); 
            ContentView.Add (titleLabel); 
            ContentView.Add (dateLabel); 
        } 
    } 

Our constructor must call the base constructor, as we need to initialize each cell with a cell style and cell identifier. We then add a UIImageView and two UILabels for each cell, one for the filename and one for the date. Finally, we add all three elements to the main content view of the cell.

When we have our initializer, we add the following:

public void UpdateCell (GalleryItem gallery) 
        { 
            _imageView.Image = UIImage.LoadFromData (NSData.FromArray (gallery.ImageData)); 
            _titleLabel.Text = gallery.Title; 
            _dateLabel.Text = gallery.Date; 
        } 
 
        public override void LayoutSubviews () 
        { 
            base.LayoutSubviews (); 
 
            ContentView.TranslatesAutoresizingMaskIntoConstraints = false; 
 
            // set layout constraints for main view 
            AddConstraints (NSLayoutConstraint.FromVisualFormat("V:|[imageView(100)]|", NSLayoutFormatOptions.DirectionLeftToRight, null, new NSDictionary("imageView", imageView))); 
            AddConstraints (NSLayoutConstraint.FromVisualFormat("V:|[titleLabel]|", NSLayoutFormatOptions.DirectionLeftToRight, null, new NSDictionary("titleLabel", titleLabel))); 
            AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|-10-[imageView(100)]-10-[titleLabel]-10-|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("imageView", imageView, "titleLabel", titleLabel))); 
            AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|-10-[imageView(100)]-10-[dateLabel]-10-|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("imageView", imageView, "dateLabel", dateLabel))); 
        } 

Our first function, UpdateCell, simply adds the model data to the view, and our second function overrides the LayoutSubViews method of the UITableViewCell class (equivalent to the ViewDidLoad function of a UIViewController).

Now that we have our cell design, let's create the properties required for the view-model. We only want to store data in our GalleryItem model, meaning we want to store images as byte arrays. Let's create a property for the item model:

namespace Gallery.iOS 
{ 
    using System; 
 
    public class GalleryItem 
    { 
        public byte[] ImageData; 
 
        public string ImageUri; 
 
        public string Title; 
 
        public string Date; 
 
        public GalleryItem () 
        { 
        } 
    } 
} 

Now back to our TableSource class. The next step is to implement the GetCell function:

public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath) 
        { 
            var cell = (GalleryCell)tableView.DequeueReusableCell (CellIdentifier); 
            var galleryItem = galleryItems[indexPath.Row]; 
 
            if (cell == null) 
            {  
                // we create a new cell if this row has not been created yet 
                cell = new GalleryCell (CellIdentifier);  
            } 
 
            cell.UpdateCell (galleryItem); 
 
            return cell; 
        } 

Notice the cell reuse on the if statement; you should be familiar with this type of approach, it is a common pattern for reusing cell views and is the same as the Objective-C implementation (this is a very basic cell reuse implementation). We also call the UpdateCell method to pass in the required GalleryItem data to show in the cell. Let's also set a constant height for all cells. Add the following to your TableSource class:

public override nfloat GetHeightForRow (UITableView tableView, NSIndexPath indexPath) 
        { 
            return 100; 
        } 

So what is next?

public override void ViewDidLoad () 
{ 
.. 
table.Source = new TableSource(); 
.. 
} 

Let's stop development and have a look at what we have achieved so far. We have created our first UIViewController, UITableView, UITableViewSource, and UITableViewCell, and bound them all together. Fantastic!

We now need to access the local storage of the phone to pull out the required gallery items. But before we do this, we are going to create an Android project and replicate what we have done with iOS.