Question

我正在研究Xamarin IOS，我希望使用集合视图概念以网格样式显示项目。我尝试了样本集合视图示例。 Sample Collection View Example

但是项目显示为给定的示例。但我想在网格样式中显示项目，请看下面的图像。

Answer 1

这是我在相同示例代码上进行的快速测试的一个相当粗略的例子：

    [Export ("initWithFrame:")]
    public ProductCell (CGRect frame) : base (frame)
    {
        BackgroundView = new UIView{ BackgroundColor = UIColor.DarkGray };
        SelectedBackgroundView = new UIView{ BackgroundColor = UIColor.Green };

        ContentView.Layer.BorderColor = UIColor.LightGray.CGColor;
        ContentView.Layer.BorderWidth = 2.0f;
        ContentView.BackgroundColor = UIColor.Gray;

        cellViewContainer = new UIView ();
        cellViewContainer.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;

        imageView = new UIImageView (UIImage.FromBundle ("placeholder.png"));
        productName = new UILabel {
            Text = "Name",
            TextColor = UIColor.Black,
            BackgroundColor = UIColor.White,
            TextAlignment = UITextAlignment.Center
        };
        price = new UILabel {
            Text = "Price",
            TextColor = UIColor.Black,
            BackgroundColor = UIColor.Red,
            TextAlignment = UITextAlignment.Center
        };
        var labelHeight = (ContentView.Bounds.Height - 2) / 2;
        var labelWidth = (ContentView.Bounds.Width - 2 ) / 2;
        productName.Frame = new CGRect(5, 5, labelWidth, labelHeight);
        price.Frame = new CGRect(5, labelHeight, labelWidth, labelHeight);
        imageView.Frame = new CGRect (labelWidth, 0, labelWidth, ContentView.Bounds.Height - 2); 

        ContentView.AddSubviews (new UIView[] { imageView, productName, price });
    }

Answer 2

在该示例代码中，你不能只这样做：

// Flow Layout
        flowLayout = new UICollectionViewFlowLayout (){
            ItemSize = new CGSize ((float)UIScreen.MainScreen.Bounds.Size.Width/2.0f, (float)UIScreen.MainScreen.Bounds.Size.Width/2.0f),
            HeaderReferenceSize = new CGSize (100, 100),
            SectionInset = new UIEdgeInsets (0,0,0,0),
            ScrollDirection = UICollectionViewScrollDirection.Vertical,
            MinimumInteritemSpacing = 0, // minimum spacing between cells
            MinimumLineSpacing = 0 // minimum spacing between rows if ScrollDirection is Vertical or between columns if Horizontal
        };

使单元格的大小达到屏幕宽度的一半。如果你想要那个模拟中的其他元素，你需要发布一些代码。

This也是一个关于UICollectionViews的精彩教程，其自定义布局在本机代码中，但应该很容易转换为c＃

或者查看此问题UICollectionView for Grid Layout with Xamarin.iOS (MonoTouch)?

Xamarin IOS集合视图与自定义单元格

2 个答案: