根据屏幕宽度和列数设置 UICollectionViewCell 的大小 Xamarin.iOS

Question

我正在使用 Xamarin.iOS 构建应用程序。在应用程序的第一个屏幕上，我使用了 UICollectionView 来显示多个类别。我希望类别显示在两列中，但这里有一个问题。我在storyBoard.In小屏如iPhone 3.5英寸手动设置单元格大小，只出现一列，而在iPhone 6或6Plus等大屏出现两列但是列之间有很多 space。

table 视图有一个方法，我们可以在 TableViewSource、GetRowHeight 中重写。有没有办法根据屏幕宽度和列数设置 collectionViewCell 的大小。

这是我在我的应用程序中实现 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);
});

根据屏幕宽度和列数设置 UICollectionViewCell 的大小 Xamarin.iOS

Set the Size of a UICollectionViewCell based on the screen width and the number of columns Xamarin.iOS

c#

xamarin.ios

xamarin

uicollectionview

uicollectionviewcell