UICollectionView с проблемой макета раздела в Xamarin Native

Question

У меня есть UIcollectionView с 8 разделами. Каждый раздел имеет выделенный массив в качестве источника данных. Я хочу добавить элемент в каждый раздел нажатием кнопки. Направление прокрутки UICollectionView установлено на Горизонтальное, потому что я хочу, чтобы секции были в вертикальном направлении. Все работает нормально в проекте Xcode (Xib и Objective- C) как этот скриншот (элементы красного цвета - это элементы, добавляемые при нажатии кнопки).

Когда я делаю ту же реализацию в Xamarin ios, макет становится беспорядочным после нажатия кнопки, как показано ниже.

Мой код как ниже

 public partial class GridViewController : UIViewController
{
    CVSource source;

    int MAX_NUMBER_OF_ROWS = 4;

    public GridViewController(IntPtr handle) : base(handle)
    {
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        // Perform any additional setup after loading the view, typically from a nib.
        //this.collectionView.SetNeedsDisplay();
        this.collectionView.RegisterClassForCell(typeof(ItemCell), ItemCell.CellId);

        source = new CVSource();
        this.collectionView.DataSource = source;


    }

    partial void AddButtonPressed(UIButton sender)
    {
        Console.WriteLine("Add button pressed");

        MAX_NUMBER_OF_ROWS = MAX_NUMBER_OF_ROWS + 1;
        source.AddItem();

        collectionView.Layer.RemoveAllAnimations();
        collectionView.ReloadData();

        ViewDidLayoutSubviews();

    }

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

        collectionView.Frame = new CoreGraphics.CGRect(collectionView.Frame.Location.X, collectionView.Frame.Location.Y, collectionView.Frame.Size.Width, MAX_NUMBER_OF_ROWS * 40);
        btnAdd.Frame = new CoreGraphics.CGRect(btnAdd.Frame.Location.X, collectionView.Frame.Location.Y + collectionView.Frame.Size.Height + 10, btnAdd.Frame.Size.Width, btnAdd.Frame.Size.Height);

    }

    public override void DidReceiveMemoryWarning()
    {
        base.DidReceiveMemoryWarning();
        // Release any cached data, images, etc that aren't in use.
    }

Класс DataSource

class CVSource : UICollectionViewSource
{

    List<string> arr1 = new List<string> { "40", "30"};
    List<string> arr2 = new List<string> { "25", "22" };
    List<string> arr3 = new List<string> { "35", "67" };
    List<string> arr4 = new List<string> { "26", "12" };
    List<string> arr5 = new List<string> { "27", "21", };
    List<string> arr6 = new List<string> { "12", "45" };
    List<string> arr7 = new List<string> { "34", "67" };
    List<string> arr8 = new List<string> { "21", "44", };


    public override nint NumberOfSections(UICollectionView collectionView)
    {
        return 8;
    }

    public override nint GetItemsCount(UICollectionView collectionView, nint section)
    {
        if ((int)section == 0)
            return arr1.Count;
        else if ((int)section == 1)
            return arr2.Count;
        else if ((int)section == 2)
            return arr3.Count;
        else if ((int)section == 3)
            return arr4.Count;
        else if ((int)section == 4)
            return arr5.Count;
        else if ((int)section == 5)
            return arr6.Count;
        else if ((int)section == 6)
            return arr7.Count;
        else if ((int)section == 7)
        return arr8.Count;

        return 0;
    }



    public override UICollectionViewCell GetCell(UICollectionView collectionView, Foundation.NSIndexPath indexPath)
    {
        var itemCell = (ItemCell)collectionView.DequeueReusableCell(ItemCell.CellId, indexPath);

        if (indexPath.Section == 0)
        {
            itemCell.SetText(arr1[indexPath.Row]);

        }
        else if (indexPath.Section == 1)
        {
            itemCell.SetText(arr2[indexPath.Row]);

        }
        else if (indexPath.Section == 2)
        {
            itemCell.SetText(arr3[indexPath.Row]);

        }
        else if (indexPath.Section == 3)
        {
            itemCell.SetText(arr4[indexPath.Row]);

        }
        else if (indexPath.Section == 4)
        {
            itemCell.SetText(arr5[indexPath.Row]);

        }
        else if (indexPath.Section == 5)
        {
            itemCell.SetText(arr6[indexPath.Row]);

        }
        else if (indexPath.Section == 6)
        {
            itemCell.SetText(arr7[indexPath.Row]);

        }
        else if (indexPath.Section == 7)
            itemCell.SetText(arr8[(indexPath.Row)]);


        return itemCell;
    }

    public override void ItemSelected(UICollectionView collectionView, NSIndexPath indexPath)
    {
        Console.WriteLine("Row selected "+ indexPath.Row);
    }


    public void AddItem()
    {
        arr1.Add("0");
        arr2.Add("0");
        arr3.Add("0");
        arr4.Add("0");
        arr5.Add("0");
        arr6.Add("0");
        arr7.Add("0");
        arr8.Add("0");

    }
}

Класс ItemCell

public partial class ItemCell : UICollectionViewCell
{
    public static readonly NSString CellId = new NSString("ItemCell");
    public static UITextField txtFld;

    [Export("initWithFrame:")]

    public ItemCell(CGRect frame) : base(frame)
    {
        BackgroundView = new UIView { BackgroundColor = UIColor.Orange };

        SelectedBackgroundView = new UIView { BackgroundColor = UIColor.Green };

        ContentView.Layer.BorderColor = UIColor.LightGray.CGColor;
        ContentView.Layer.BorderWidth = 2.0f;
        ContentView.BackgroundColor = UIColor.White;
        ContentView.Transform = CGAffineTransform.MakeScale(0.8f, 0.8f);

        txtFld = new UITextField() { Frame = new CGRect(5.0, 5.0, 60.0, 30.0), KeyboardType = UIKeyboardType.DecimalPad };

    }
}

Я не разработчик Xamarin, ценим любые комментарии / предложения экспертов Xamarin

Answer 1

Может быть, вам не хватает UICollectionViewLayout для установки на collectionView, вы можете установить GridLayout для collectionView для попытки.

this.collectionView.SetCollectionViewLayout(new GridLayout(), true); //add CollectionViewLayout
this.collectionView.RegisterClassForCell(typeof(ItemCell), ItemCell.CellId);

GridLayout наследуется от UICollectionViewFlowLayout в Xamrarin iOS:

public class GridLayout : UICollectionViewFlowLayout
{
    public GridLayout ()
    {
    }

    public override bool ShouldInvalidateLayoutForBoundsChange (CGRect newBounds)
    {
        return true;
    }

    public override UICollectionViewLayoutAttributes LayoutAttributesForItem (NSIndexPath path)
    {
        return base.LayoutAttributesForItem (path);
    }

    public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect (CGRect rect)
    {
        return base.LayoutAttributesForElementsInRect (rect);
    }
}

Эффект:

Аффтер пробовал общий код, эффект следующим образом:

Отличается только вашими кодами здесь:

 public ViewController (IntPtr handle) : base (handle)
{
    collectionView = new UICollectionView(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 300), new GridLayout());
    collectionView.RegisterClassForCell(typeof(ItemCell), ItemCell.CellId);

    //collectionView.SetCollectionViewLayout(new GridLayout(), true);
    collectionView.BackgroundColor = UIColor.Blue;
    source = new CVSource();
    collectionView.DataSource = source;
    View.AddSubview(collectionView);


    button = new UIButton(new CGRect(150, 400, 100, 50));
    button.SetTitle("Hello", UIControlState.Normal);
    button.BackgroundColor = UIColor.Red;
    View.AddSubview(button);

    button.TouchUpInside += Button_TouchUpInside;

}

Примечание: я использую код для создания интерфейса, и установите GridLayout для CollectionView. Вот ссылка sample .