MvxExpandableTableViewSource for nested list view

Question

I've tried to make a nested expandable list by MvxExpandableTableViewSource in MvvmCross-iOSSupport 4.1 but it's no hope. Please show me the right way!

Answer 1

I tried to use MvxExpandableTableViewSource but I was having issues setting the _isCollapsed bool array.

I know you have to subclass MvxExpandableTableViewSource and make sure the ItemSource you bind to is of type IEnumerable<IEnumerable<object>> but still wasn't having any luck with it, possibly missed something.

So I created another type of TableViewSource based on MvxExpandableTableViewSource so I could set the _isCollapsed bool array when the ItemSource is bound, I then needed to bind to Title for the group header section. This is what I came up with:

public abstract class MyExpTVS<TItemSource, TItem> : MvxTableViewSource where TItemSource : ItemGroup<TItem>
{
    /// <summary>
    /// Indicates which sections are expanded.
    /// </summary>
    private bool[] _isCollapsed;

    private IEnumerable<TItemSource> _itemsSource;
    new public IEnumerable<TItemSource> ItemsSource
    {
        get
        {
            return _itemsSource;
        }
        set 
        { 
            _itemsSource = value;
            _isCollapsed = new bool[ItemsSource.Count()];

            for (var i = 0; i < _isCollapsed.Length; i++)
                _isCollapsed[i] = true;
            ReloadTableData();
        }
    }

    public MyExpTVS(UITableView tableView) : base(tableView)
    {
    }

    protected override void CollectionChangedOnCollectionChanged(object sender, NotifyCollectionChangedEventArgs args)
    {
        // When the collection is changed collapse all sections
        _isCollapsed = new bool[ItemsSource.Count()];

        for (var i = 0; i < _isCollapsed.Length; i++)
            _isCollapsed[i] = true;

        base.CollectionChangedOnCollectionChanged(sender, args);
    }

    public override nint RowsInSection(UITableView tableview, nint section)
    {
        // If the section is not colapsed return the rows in that section otherwise return 0
        if ( (ItemsSource?.ElementAt((int)section)).Items.Any() && !_isCollapsed [(int)section] )
            return (ItemsSource.ElementAt((int)section)).Items.Count();
        return 0;
    }

    public override nint NumberOfSections(UITableView tableView)
    {
        return ItemsSource.Count();
    }

    protected override object GetItemAt(NSIndexPath indexPath)
    {
        if (ItemsSource == null)
            return null;

        return ItemsSource.ElementAt(indexPath.Section).Items.ElementAt(indexPath.Row);
    }

    protected object GetHeaderItemAt(nint section)
    {
        if (ItemsSource == null)
            return null;

        return ItemsSource.ElementAt((int)section);
    }

    public override UIView GetViewForHeader(UITableView tableView, nint section)
    {
        var header = GetOrCreateHeaderCellFor(tableView, section);

        // Create a button to make the header clickable
        UIButton hiddenButton = new UIButton(header.Frame);
        hiddenButton.TouchUpInside += EventHandler(tableView, section);
        header.AddSubview(hiddenButton);

        // Set the header data context
        var bindable = header as IMvxDataConsumer;
        if (bindable != null)
            bindable.DataContext = GetHeaderItemAt(section);
        return header;
    }

    private EventHandler EventHandler(UITableView tableView, nint section)
    {
        return (sender, e) =>
        {
            // Toggle the is collapsed
            _isCollapsed[(int)section] = !_isCollapsed[(int)section];
            tableView.ReloadData();

            // Animate the section cells
            var paths = new NSIndexPath[RowsInSection(tableView, section)];
            for (int i = 0; i < paths.Length; i++)
            {
                paths[i] = NSIndexPath.FromItemSection(i, section);
            }

            tableView.ReloadRows(paths, UITableViewRowAnimation.Automatic);
        };
    }

    public override void HeaderViewDisplayingEnded(UITableView tableView, UIView headerView, nint section)
    {
        var bindable = headerView as IMvxDataConsumer;
        if (bindable != null)
            bindable.DataContext = null;
    }

    /// <summary>
    /// This is needed to show the header view. Should be overriden by sources that inherit from this.
    /// </summary>
    /// <param name="tableView"></param>
    /// <param name="section"></param>
    /// <returns></returns>
    public override nfloat GetHeightForHeader(UITableView tableView, nint section)
    {
        return 44; // Default value.
    }

    public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
    {
        return base.GetCell(tableView, indexPath);
    }

    /// <summary>
    /// Gets the cell used for the header
    /// </summary>
    /// <param name="tableView"></param>
    /// <param name="section"></param>
    /// <returns></returns>
    protected abstract UITableViewCell GetOrCreateHeaderCellFor(UITableView tableView, nint section);

    protected abstract override UITableViewCell GetOrCreateCellFor(UITableView tableView, NSIndexPath indexPath, object item);
}

I was then using it like so:

public class BaseGroupedTableView : MvxTableViewController
{
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        var source = new GroupTableSource(TableView)
        {
            UseAnimations = true,
            AddAnimation = UITableViewRowAnimation.Left,
            RemoveAnimation = UITableViewRowAnimation.Right
        };

        this.AddBindings(new Dictionary<object, string>
            {
                {source, "ItemsSource Kittens"}
            });

        TableView.Source = source;
        TableView.ReloadData();
    }
}

public class GroupTableSource : MyExpTVS<KittenType, Kitten>
{
    public GroupTableSource(UITableView tableView) : base(tableView)
    {
        string nibName = "KittenCell";
        this._cellIdentifier = new NSString(nibName);
        tableView.RegisterNibForCellReuse(UINib.FromName(nibName, NSBundle.MainBundle), CellIdentifier);


        string nibName2 = "HeaderCell";
        this._headerCellIdentifier = new NSString(nibName2);
        tableView.RegisterNibForCellReuse(UINib.FromName(nibName2, NSBundle.MainBundle), HeaderCellIdentifier);
    }

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


    protected override UITableViewCell GetOrCreateHeaderCellFor(UITableView tableView, nint section)
    {
        return tableView.DequeueReusableCell(this.HeaderCellIdentifier);
    }

    protected override UITableViewCell GetOrCreateCellFor(UITableView tableView, NSIndexPath indexPath, object item)
    {
        return tableView.DequeueReusableCell(this.CellIdentifier);
    }

    private readonly NSString _cellIdentifier;
    protected virtual NSString CellIdentifier => this._cellIdentifier;

    private readonly NSString _headerCellIdentifier;
    protected virtual NSString HeaderCellIdentifier => this._headerCellIdentifier;
}

There are some other bits: like a cell for the header and the Model I was using.

So I have created a fork of the MvvmCross-Samples and modified the "WorkingWithCollection" project with a grouped collection example it can be found here:

https://github.com/b099l3/MvvmCross-Samples/tree/master/WorkingWithCollections

and looks like this:

Hope the Grouped Kittehs helps.

UPDATE

This was merged into the MvvmCross iOS samples here