如何实现UICollectionView-XAMARIN.IOS

Question

我正在尝试使用UICollectionView，但找不到任何可以利用的示例。我需要通过代码的UICollectionView（不使用swift / storyboard / forms）。你能给我一个非常简单的例子吗？例如2行2列吗？只是为了尝试了解如何实现它的基本内容。

谢谢

Answer 1

您可以参考Collection Views in Xamarin.iOS doc来检查如何将Collection View与Code一起使用。在这里，我将显示一个示例代码来说明如何实现它。

您能给我一个非常简单的例子吗？例如2行2列吗？

首先，需要创建GridLayout：

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);
    }
}

然后您可以在ViewDidLoad中初始化集合视图：

static NSString animalCellId = new NSString("AnimalCell");
List<IAnimal> animals;

animals = new List<IAnimal>();
for (int i = 0; i < 2; i++)
{
    animals.Add(new Monkey());
}

// Perform any additional setup after loading the view, typically from a nib.
UICollectionView collectionView = new UICollectionView(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 300), new GridLayout());
collectionView.RegisterClassForCell(typeof(AnimalCell), animalCellId);
collectionView.BackgroundColor = UIColor.Blue;
collectionView.DataSource = new MyCollectionViewDataDelegate(animals);
View.AddSubview(collectionView);

这里您还需要根据需要创建一个自定义单元，可以自己修改：

public class AnimalCell : UICollectionViewCell
{
    UIImageView imageView;

    [Export("initWithFrame:")]
    public AnimalCell(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);

        imageView = new UIImageView(UIImage.FromBundle("placeholder.png"));
        imageView.Center = ContentView.Center;
        imageView.Transform = CGAffineTransform.MakeScale(0.7f, 0.7f);

        ContentView.AddSubview(imageView);
    }

    public UIImage Image
    {
        set
        {
            imageView.Image = value;
        }
    }

    [Export("custom")]
    void Custom()
    {
        // Put all your custom menu behavior code here
        Console.WriteLine("custom in the cell");
    }


    public override bool CanPerform(Selector action, NSObject withSender)
    {
        if (action == new Selector("custom"))
            return true;
        else
            return false;
    }
}

[MyCollectionViewDataDelegate也需要创建：

公共类MyCollectionViewDataDelegate：UICollectionViewDataSource{私人清单动物；

    public MyCollectionViewDataDelegate(List<IAnimal> animals)
    {
        this.animals = animals;
    }

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

    public override nint GetItemsCount(UICollectionView collectionView, nint section)
    {
        return animals.Count;
    }

    public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
    {
        var animalCell = (AnimalCell)collectionView.DequeueReusableCell(animalCellId, indexPath);

        var animal = animals[indexPath.Row];

        animalCell.Image = animal.Image;

        return animalCell;
    }

}

您可以在初始化Collection View时发现应该注册animalCell。

然后效果：

这是sample link供参考。