Custom iOS Xib View not displaying in Storyboard

Question

We have a number of table views in our Xamarin iOS app that have duplicated storyboard code for rendering the table row cells. I'm attempting to create a custom iOS view (xib) that contains the table row cell elements so that it can be reused across all of the table views in our app.

I have followed different tutorials as well as read many SO posts to set up the custom iOS view, and have everything building and running however the table row cells now display as empty white rows instead of actually rendering the content of the xib. In code within the custom view I'm able to access the elements successfully and populate labels, images, etc... but it doesn't make any difference, it still shows up as a blank white row:

Here is a screenshot of what a row is supposed to look like:

Here is the xib file:

Here I'm setting the File Owner to my custom class:

Here is the storyboard where I'm referencing my custom class as the table row cell of my table view:

This is how I'm instantiating the table row cell from my table view source class:

public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath) {
                    var cell = tableView.DequeueReusableCell (SearchResultUITableViewCell.ReuseKey) as PropertySearchResultRow;
                    cell.Bind (/* Passes in some data to populate the row */);
                    return cell;
            }
        }

And lastly, here is the AwakeFromNib method in my custom view class:

[Export ("awakeFromNib")]
        public override void AwakeFromNib () {
            base.AwakeFromNib ();
            if (Site != null && Site.DesignMode)
                return;

            var nibObjects = NSBundle.MainBundle.LoadNib ("PropertySearchResultRow", this, null);
            var view = (UIView)Runtime.GetNSObject (nibObjects.ValueAt (0));
            view.Frame = Bounds;
            view.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
            AddSubview (view);
        }

What step am I missing to get this to display the custom view's content correctly?

Jack Hua Jack Hua · Accepted Answer · 2020-01-22T01:49:55

1.Remember to registers the cell xib to be used by calling RegisterNibForCellReuse in the controller's constructor:

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

        UITableView tablView = new UITableView();

        UINib Nib = UINib.FromName("TableViewCell1", NSBundle.MainBundle);
        tablView.RegisterNibForCellReuse(Nib, "reuseID");
    }

2.The bounds or frame you get in the AwakeFromNib sometimes is not correct, you should move the codes to LayoutSubviews to use proper Bounds:

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

        var nibObjects = NSBundle.MainBundle.LoadNib("PropertySearchResultRow", this, null);
        var view = (UIView)Runtime.GetNSObject(nibObjects.ValueAt(0));
        view.Frame = Bounds;
        view.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
        AddSubview(view);
    }

Custom iOS Xib View not displaying in Storyboard

2 Answers