根據屏幕寬度和列數Xamarin.iOS設置UICollectionViewCell的大小

Question

我正在使用Xamarin.iOS構建應用程序。 應用程序的第一個屏幕我使用了UICollectionView來顯示多個類別。 我希望類別顯示在兩列中，但這里有一個問題。 我在storyBoard.In上手動設置了單元格的大小。在像iPhone 3.5英寸這樣的小屏幕上，只出現一列，同時在iPhone 6或6Plus等大屏幕中出現兩列，但列之間有很多空格。

表View有一個我們可以在TableViewSource ， GetRowHeight覆蓋的方法。 有沒有辦法根據屏幕寬度和列數設置collectionViewCell的大小。

這是我在My App中實現CollectionView的方式：

SectionViewSource.cs

public class SectionViewSource: UICollectionViewSource
    {
        public List<SectionCategory> rows { get; set; }
        public ViewController owner { get; set;}

        public SectionViewSource (List<SectionCategory> _rows, ViewController _owner)
        {
            rows = _rows;
            owner = _owner;

        }

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

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

        public override bool ShouldHighlightItem (UICollectionView collectionView, NSIndexPath indexPath)
        {
            return true;
        }

        public override void ItemHighlighted (UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cell = (SectionViewCell)collectionView.CellForItem (indexPath);
            cell.mainLabel.Alpha = 0.5f;



        }

        public override bool CanPerformAction (UICollectionView collectionView, Selector action, NSIndexPath indexPath, NSObject sender)
        {

                return true;
        }

        public override void PerformAction (UICollectionView collectionView, Selector action, NSIndexPath indexPath, NSObject sender)
        {
            System.Diagnostics.Debug.WriteLine ("code to perform action");

        }

        public override void ItemUnhighlighted (UICollectionView collectionView, NSIndexPath indexPath)
        {

            var cell = (SectionViewCell)collectionView.CellForItem (indexPath);
            cell.mainLabel.Alpha = 1.0f;

        }

        public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cell = (SectionViewCell)collectionView.DequeueReusableCell (SectionViewCell.CellID, indexPath);

            cell.UpdateCell (rows [indexPath.Row].sectionName,rows [indexPath.Row].sectionUrlImage);

            return cell;
        }
    }

SectionViewCell.cs

public class SectionViewCell: UICollectionViewCell
    {
        public UILabel mainLabel;
        public UIImageView _imageView;
        public static NSString CellID = new NSString("customCollectionCell");

        [Export ("initWithFrame:")]
        public SectionViewCell (CGRect frame) : base(frame)
        {
            BackgroundView = new UIView { BackgroundColor = UIColor.Orange };

            ContentView.BackgroundColor = UIColor.LightGray;

            _imageView = new UIImageView ();
            mainLabel = new UILabel ();

            mainLabel.TextColor = UIColor.White;

            ContentView.AddSubviews (new UIView[] { _imageView, mainLabel });
        }



        public void UpdateCell (string text, string url) {

            mainLabel.Text = text;
            mainLabel.LineBreakMode = UILineBreakMode.TailTruncation;
            mainLabel.Lines = 2; 
            mainLabel.Font = UIFont.FromName("Optima-Bold", 18f);

            ImageService.LoadUrl(url).Into(_imageView);
            _imageView.Frame = new CGRect (0, 0, ContentView.Bounds.Width, ContentView.Bounds.Height);
            mainLabel.Frame = new CGRect (10, 10, ContentView.Bounds.Width-20, 40);

        }

    }

ViewController.cs

sectionGrid.RegisterClassForCell(typeof(SectionViewCell), SectionViewCell.CellID);
sectionGrid.Source = new SectionViewSource (sectionCategories,this);

Answer 1

嘗試設置CollectionViewLayout，如下所示：

// Flow Layout
var 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
};

simpleCollectionViewController = new UICollectionViewController (flowLayout);

創造這樣的東西：

---

更新

你可以試試這個：

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

sectionGrid.PerformBatchUpdates (() => {
    sectionGrid.CollectionViewLayout.InvalidateLayout ();
    sectionGrid.SetCollectionViewLayout (flowLayout, false);
});