带有自定义单元格的 Xamarin IOS 集合视图答案

【问题标题】：Xamarin IOS Collection View With Custom Cell带有自定义单元格的 Xamarin IOS 集合视图
【发布时间】：2016-04-19 21:52:11
【问题描述】：

我正在开发 Xamarin IOS，我想使用集合视图概念以网格样式显示项目。我尝试了示例收集视图示例。 Sample Collection View Example

但项目显示为给定的示例。但我想以网格样式显示项目，请看下图。

【问题讨论】：

贴一些代码，否则没人知道发生了什么
请查看developer.xamarin.com/guides/ios/user_interface/…，尤其是developer.xamarin.com/guides/ios/user_interface/… 一行中的两个单元格

标签： c# xamarin xamarin.ios

【解决方案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 });
    }

【讨论】：

嗨@SushiHangover，我试过你的代码。但就我而言，它在单行中显示所有记录/项目。因为 productcell 列表包含 10 条记录/项目。它显示在一行中。如果可能的话，您能否将您的代码分享到我的邮箱 id。谢谢。\ 电子邮件：ranjithnagiri@gmail.com。

【解决方案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)?

【讨论】：